WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 역할(Role)은 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위해 사용되는 속성입니다. 이 속성들은 특히 스크린 리더와 같은 보조 기술이 웹 페이지의 구조와 기능을 더 잘 이해하도록 도와줍니다. WAI-ARIA 역할은 HTML 요소에 추가되어 보조 기술이 사용자 인터페이스의 목적과 행동을 더 명확하게 이해할 수 있게 합니다.
주요 WAI-ARIA 역할은 Abstract Roles, Widget Roles, Document Structure Roles, Landmark Roles, Live Region Roles, Window Roles로 정의할 수 있습니다.
Abstract Roles은 다른 역할을 정의하는 데 사용되는 개념적 역할입니다. 이러한 역할들은 웹 페이지에 직접 사용되지 않으며, 구체적인 역할을 정의하고 이들 간의 관계를 설명하고,
웹 접근성을 높이는 데 중요한 역할을 합니다. 올바르게 이해하고 사용하여 웹 콘텐츠의 접근성을 개선할 수 있습니다. W3C ARIA Abstract Roles
사용자 명령을 나타내는 역할의 상위 개념입니다. 이 역할을 통해 사용자가 상호작용할 수 있는 다양한 UI 요소를 정의합니다. command 역할 자체는 직접 사용되지 않으며, button, link, menuitem 등의 구체적인 역할이 이 역할에서 파생됩니다.
W3C ARIA command
MDN ARIA command
// 잘못된 예시 - 'command'는 직접 사용되지 않음
<div role="command">Click me</div>
// 올바른 예시 - button은 command에서 파생된 역할
<div role="button">Click me</div>
// (권장)시맨틱 마크업과의 비교 - HTML5의 시맨틱 요소를 사용하여 button 역할을 암시적으로 정의
<button type="button">Click me</button>
사용 시 주의사항
상속된 상태 및 속성
composite 역할은 여러 개의 상호작용 가능한 위젯을 포함하는 복합 위젯을 정의하는 상위 개념입니다. combobox, grid, tablist, tree 등이 이 역할을 상속받습니다.
W3C ARIA composite
MDN ARIA composite
// 잘못된 예시 - 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 역할은 사용자가 입력할 수 있는 요소를 정의하는 상위 개념입니다. checkbox, radio, slider, spinbutton, textbox 등이 이 역할을 상속받습니다.
W3C ARIA input
MDN ARIA input
// 잘못된 예시 - 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 역할은 웹 페이지의 주요 섹션을 정의하는 상위 개념입니다. banner, navigation, main, contentinfo 등에서 파생됩니다.
W3C ARIA landmark
MDN ARIA landmark
// 잘못된 예시 - 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 역할은 특정 범위 내에서 값을 설정하거나 선택할 수 있는 위젯을 정의하는 상위 개념입니다. progressbar, slider, spinbutton 등에서 파생됩니다.
W3C ARIA range
MDN ARIA range
// 잘못된 예시 - 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은 모든 WAI-ARIA 역할의 최상위 추상적 역할로, 다른 모든 역할이 이 역할에서 파생됩니다.
W3C ARIA roletype
MDN ARIA roletype
'roletype'은 다른 역할을 정의하는 데 사용되므로 직접 사용되지 않음
// 잘못된 예시 - roletype은 직접 사용되지 않음
<div role="roletype">Item</div>
// 권장사항 - 사용하지 마십시오.
사용 시 주의사항
상속된 상태 및 속성
section 역할은 문서의 주제별 섹션을 정의하는 상위 개념입니다. region, alert, log, status 등이 이 역할을 상속받습니다.
W3C ARIA section
MDN ARIA section
// 잘못된 예시 - 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 역할은 문서 내 섹션의 제목을 나타내는 역할입니다. heading, tab, columnheader, rowheader 등이 이 역할을 상속받습니다.
W3C ARIA sectionhead
MDN ARIA sectionhead
// 잘못된 예시 - sectionhead는 직접 사용되지 않음
<div role="sectionhead">Section Title</div>
// 올바른 예시
<div role="heading" aria-level="2">Section Title</div>
// (권장)시맨틱 마크업과의 비교 - HTML5의 heading 요소
<h2>Section Title</h2>
사용 시 주의사항
상속된 상태 및 속성
select 역할은 사용자가 옵션을 선택할 수 있는 위젯을 정의하는 상위 개념입니다. combobox, listbox, menu, radiogroup 등이 이 역할을 상속받습니다.
W3C ARIA select
MDN ARIA select
// 잘못된 예시 - 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 역할은 문서의 구조를 정의하는 상위 개념입니다. document, article, section, group, heading 등이 이 역할을 상속받습니다.
W3C ARIA structure
MDN ARIA structure
// 잘못된 예시 - 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 역할은 사용자가 상호작용할 수 있는 UI 요소를 정의하는 상위 개념입니다. button, checkbox, slider, link, textbox 등이 이 역할을 상속받습니다.
W3C ARIA widget
MDN ARIA widget
// 잘못된 예시 - 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 역할은 사용자 인터페이스의 창 요소를 정의하는 역할입니다. alertdialog, dialog, tooltip 등이 이 역할을 상속받습니다.
W3C ARIA window
MDN ARIA window
// 잘못된 예시 - 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>
사용 시 주의사항
상속된 상태 및 속성