추상적 역할(Abstract Roles) | WAI-ARIA 역할

command (명령 역할)

요약 설명
사용자 명령을 나타내는 역할의 상위 개념입니다. 이 역할을 통해 사용자가 상호작용할 수 있는 다양한 UI 요소를 정의합니다. command 역할 자체는 직접 사용되지 않으며, button, link, menuitem 등의 구체적인 역할이 이 역할에서 파생됩니다.

W3C ARIA command
MDN ARIA command

사용 시 주의사항

command는 직접 사용되지 않으며, 이를 상속하는 구체적인 역할(button, link 등)을 사용해야 합니다.
명령 요소는 사용자에게 명확히 전달되도록 aria-label 또는 aria-labelledby 속성을 사용할 수 있습니다.

상속된 상태 및 속성

aria-disabled
요소가 비활성화되었는지 여부를 나타냅니다.
aria-expanded
요소가 확장되었는지 여부를 나타냅니다.

예시

								<!-- 잘못된 예시 - input는 직접 사용되지 않음 -->
								<div role="input">Enter text</div>

								<!-- 올바른 예시 -->
								<input role="textbox" type="text" aria-label="Enter text">

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5 시맨틱 요소 사용 -->
								<input type="text" aria-label="Enter text">

composite (복합 역할)

요약 설명
composite 역할은 여러 개의 상호작용 가능한 위젯을 포함하는 복합 위젯을 정의하는 상위 개념입니다. combobox, grid, tablist, tree 등이 이 역할을 상속받습니다.

W3C ARIA composite
MDN ARIA composite

사용 시 주의사항

composite는 직접 사용되지 않고, 구체적인 복합 위젯 역할을 사용해야 합니다.
복합 위젯 내의 자식 요소는 명확하게 정의되고 접근 가능해야 합니다.

상속된 상태 및 속성

aria-activedescendant
복합 위젯 내에서 현재 활성화된 자식 요소의 ID를 지정합니다.
aria-disabled
요소가 비활성화되었는지 여부를 나타냅니다.
aria-expanded
요소가 확장되었는지 여부를 나타냅니다.

예시

								<!-- 잘못된 예시 - composite는 직접 사용되지 않음 -->
								<div role="composite">Items</div>

								<!-- 올바른 예시 -->
								<div role="tablist">
									<div role="tab" aria-selected="true">Tab 1</div>
									<div role="tab" aria-selected="false">Tab 2</div>
								</div>

								<!-- (권장)시맨틱 마크업과의 비교 - 시맨틱 마크업만으로는 복합 위젯을 정의하기 어려움 -->
								<div>
									<button type="button">Tab 1</button>
									<button type="button">Tab 2</button>
								</div>

input (입력 역할)

요약 설명
input 역할은 사용자가 입력할 수 있는 요소를 정의하는 상위 개념입니다. checkbox, radio, slider, spinbutton, textbox 등이 이 역할을 상속받습니다.

W3C ARIA input
MDN ARIA input

사용 시 주의사항

input 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 입력 역할을 사용해야 합니다.
사용자는 입력 필드의 상태(예: 필수, 읽기 전용, 비활성화)를 명확히 알 수 있어야 합니다.

상속된 상태 및 속성

aria-required
필드가 필수인지 여부를 나타냅니다.
aria-readonly
필드가 읽기 전용인지 여부를 나타냅니다.
aria-disabled
요소가 비활성화되었는지 여부를 나타냅니다.

예시

								<!-- 잘못된 예시 - input는 직접 사용되지 않음 -->
								<div role="input">Enter text</div>

								<!-- 올바른 예시 -->
								<input role="textbox" type="text" aria-label="Enter text">

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5 시맨틱 요소 사용 -->
								<input type="text" aria-label="Enter text">

landmark (랜드마크 역할)

요약 설명
landmark 역할은 웹 페이지의 주요 섹션을 정의하는 상위 개념입니다. banner, navigation, main, contentinfo 등에서 파생됩니다.

W3C ARIA landmark
MDN ARIA landmark

사용 시 주의사항

landmark 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 랜드마크 역할을 사용해야 합니다.
각 랜드마크 역할은 페이지 내에서 고유한 역할을 가지며, 중복되지 않도록 주의해야 합니다.

상속된 상태 및 속성

aria-label
요소의 레이블을 제공하여 사용자에게 명확한 정보를 전달합니다.
aria-labelledby
요소를 레이블링하는 다른 요소의 ID를 지정합니다.

예시

								<!-- 잘못된 예시 - landmark는 직접 사용되지 않음 -->
								<div role="landmark">Main Content</div>

								<!-- 올바른 예시 -->
								<div role="main">
									<h1>Main Content</h1>
									<p>This is the main area of the page.</p>
								</div>

								<!-- (권장)시맨틱 마크업과의 비교 - 시맨틱 요소를 통해 main 역할이 암시됨 -->
								<main>
									<h1>Main Content</h1>
									<p>This is the main area of the page.</p>
								</main>

range (범위 역할)

요약 설명
range 역할은 특정 범위 내에서 값을 설정하거나 선택할 수 있는 위젯을 정의하는 상위 개념입니다. progressbar, slider, spinbutton 등에서 파생됩니다.

W3C ARIA range
MDN ARIA range

사용 시 주의사항

range 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 역할을 사용해야 합니다.
사용자는 현재 값과 범위를 명확히 이해할 수 있어야 하며, 필요한 경우 aria-valuetext를 사용하여 설명을 제공합니다.

상속된 상태 및 속성

aria-valuemin
값의 최소 범위를 지정합니다.
aria-valuemax
값의 최대 범위를 지정합니다.
aria-valuenow
현재 값을 지정합니다.
aria-valuetexts
현재 값을 텍스트로 표현할 수 있도록 합니다.

예시

								<!-- 잘못된 예시 - range는 직접 사용되지 않음 -->
								<div role="range">50</div>

								<!-- 올바른 예시 -->
								<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 range 요소 -->
								<input type="range" min="0" max="100" value="50">

roletype (역할 유형)

요약 설명
roletype은 모든 WAI-ARIA 역할의 최상위 추상적 역할로, 다른 모든 역할이 이 역할에서 파생됩니다.

W3C ARIA roletype
MDN ARIA roletype

사용 시 주의사항

roletype은 직접 사용되지 않고, 구체적인 역할에서만 상속되어 사용됩니다.
적절한 aria 속성을 사용하여 역할이 명확히 전달되도록 해야 합니다.

상속된 상태 및 속성

aria-atomic
변경 시 전체 영역을 다시 읽어야 하는지 여부를 지정합니다.
aria-busy
요소가 현재 작업 중인지 여부를 나타냅니다.
aria-controls
이 요소가 제어하는 다른 요소의 ID를 지정합니다.
aria-describedby
이 요소를 설명하는 다른 요소의 ID를 지정합니다.

예시

								<!-- 'roletype'은 다른 역할을 정의하는 데 사용되므로 직접 사용되지 않음 -->

								<!-- 잘못된 예시 - roletype은 직접 사용되지 않음 -->
								<div role="roletype">Item</div>

								<!-- 권장사항 - 사용하지 마십시오. -->

section (섹션 역할)

요약 설명
section 역할은 문서의 주제별 섹션을 정의하는 상위 개념입니다. region, alert, log, status 등이 이 역할을 상속받습니다.

W3C ARIA section
MDN ARIA section

사용 시 주의사항

section 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 섹션 역할을 사용해야 합니다.
각 섹션은 명확히 구분되고, 적절한 레이블과 설명이 제공되어야 합니다.

상속된 상태 및 속성

aria-labelledby
이 섹션을 레이블링하는 다른 요소의 ID를 지정합니다.
aria-describedby
이 섹션을 설명하는 다른 요소의 ID를 지정합니다.

예시

								<!-- 잘못된 예시 - section은 직접 사용되지 않음 -->
								<div role="section">Section Content</div>

								<!-- 올바른 예시 -->
								<div role="region" aria-labelledby="section-title">
									<h2 id="section-title">Section Title</h2>
									<p>This is a section of the document.</p>
								</div>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 section 요소 -->
								<section aria-labelledby="section-title">
									<h2 id="section-title">Section Title</h2>
									<p>This is a section of the document.</p>
								</section>

sectionhead (섹션 헤더 역할)

요약 설명
sectionhead 역할은 문서 내 섹션의 제목을 나타내는 역할입니다. heading, tab, columnheader, rowheader 등이 이 역할을 상속받습니다.

W3C ARIA sectionhead
MDN ARIA sectionhead

사용 시 주의사항

sectionhead 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 역할을 사용해야 합니다.
문서 구조와 일치하는 헤더 계층이 중요하며, aria-level 속성을 사용하여 정의합니다.

상속된 상태 및 속성

aria-level
섹션 헤더의 계층적 수준을 지정합니다.

예시

								<!-- 잘못된 예시 - sectionhead는 직접 사용되지 않음 -->
								<div role="sectionhead">Section Title</div>

								<!-- 올바른 예시 -->
								<div role="heading" aria-level="2">Section Title</div>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 heading 요소 -->
								<h2>Section Title</h2>

select (선택 역할)

요약 설명
select 역할은 사용자가 옵션을 선택할 수 있는 위젯을 정의하는 상위 개념입니다. combobox, listbox, menu, radiogroup 등이 이 역할을 상속받습니다.

W3C ARIA select
MDN ARIA select

사용 시 주의사항

select 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 선택 위젯 역할을 사용해야 합니다.
사용자는 선택 가능한 옵션의 수와 상태를 명확히 이해할 수 있어야 합니다.

상속된 상태 및 속성

aria-multiselectable
사용자가 여러 항목을 선택할 수 있는지 여부를 지정합니다.
aria-required
선택이 필수인지 여부를 지정합니다.

예시

								<!-- 잘못된 예시 - select는 직접 사용되지 않음 -->
								<div role="select">Option 1</div>

								<!-- 올바른 예시 -->
								<ul role="listbox" aria-multiselectable="true">
									<li role="option">Option 1</li>
									<li role="option">Option 2</li>
								</ul>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 select 요소 -->
								<select>
									<option>Option 1</option>
									<option>Option 2</option>
								</select>

structure (구조 역할)

요약 설명
structure 역할은 문서의 구조를 정의하는 상위 개념입니다. document, article, section, group, heading 등이 이 역할을 상속받습니다.

W3C ARIA structure
MDN ARIA structure

사용 시 주의사항

structure 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 구조 역할을 사용해야 합니다.
문서 구조의 일관성을 유지하고, 사용자에게 명확한 내비게이션을 제공해야 합니다.

상속된 상태 및 속성

aria-labelledby
이 구조를 레이블링하는 다른 요소의 ID를 지정합니다.
aria-describedby
이 구조를 설명하는 다른 요소의 ID를 지정합니다.

예시

								<!-- 잘못된 예시 - structure는 직접 사용되지 않음 -->
								<div role="structure">Document Structure</div>

								<!-- 올바른 예시 -->
								<div role="article">
									<h2>Article Title</h2>
									<p>This is an article content.</p>
								</div>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 article 요소 -->
								<article>
									<h2>Article Title</h2>
									<p>This is an article content.</p>
								</article>

widget (위젯 역할)

요약 설명
widget 역할은 사용자가 상호작용할 수 있는 UI 요소를 정의하는 상위 개념입니다. button, checkbox, slider, link, textbox 등이 이 역할을 상속받습니다.

W3C ARIA widget
MDN ARIA widget

사용 시 주의사항

widget 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 역할을 사용해야 합니다.
상호작용 가능한 위젯은 사용자에게 명확히 전달되고, 키보드 및 보조 기술을 통한 접근성이 보장되어야 합니다.

상속된 상태 및 속성

aria-disabled
요소가 비활성화되었는지 여부를 나타냅니다.
aria-expanded
요소가 확장되었는지 여부를 나타냅니다.

예시

								<!-- 잘못된 예시 - widget은 직접 사용되지 않음 -->
								<div role="widget">Interactive Element</div>

								<!-- 올바른 예시 -->
								<div role="button" aria-disabled="true">Click me</div>

								<!-- (권장)시맨틱 마크업과의 비교 - HTML5의 button 요소 -->
								<button type="button">Click me</button>

window (윈도우 역할)

요약 설명
window 역할은 사용자 인터페이스의 창 요소를 정의하는 역할입니다. alertdialog, dialog, tooltip 등이 이 역할을 상속받습니다.

W3C ARIA window
MDN ARIA window

사용 시 주의사항

window 역할은 직접 사용되지 않으며, 이를 상속하는 구체적인 역할을 사용해야 합니다.
창 요소는 포커스(초점) 관리가 중요하며, 창이 닫힐 때 이전 상태로 포커스(초점)를 반환해야 합니다.

상속된 상태 및 속성

aria-modal
창이 모달 대화 상자인지 여부를 나타냅니다.
aria-labelledby
창을 레이블링하는 다른 요소의 ID를 지정합니다.
aria-describedby
창을 설명하는 다른 요소의 ID를 지정합니다.

예시

								<!-- 잘못된 예시 - window는 직접 사용되지 않음 -->
								<div role="window">Dialog Window</div>

								<!-- 올바른 예시- 시맨틱 마크업으로 직접 대응할 수 없는 역할로, ARIA를 사용하여 정의 -->
								<div role="dialog" aria-labelledby="dialog-title">
									<h2 id="dialog-title">Settings</h2>
									<p>Adjust your preferences below:</p>
								</div>