WAI-ARIA란? - by. UXKM

ARIA 역할 유형

1. Abstract Roles (추상적 역할)
   • 브라우저에서만 사용되는 요소로, 문서 구성 및 간소화에 도움을 줍니다. 개발자가 HTML 마크업을 작성할 때는 사용하지 않아야 하며, 참조용으로만 포함됩니다.
   • 주요 예시 : command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget 및 window
2. Widget Roles (위젯 역할)
   • UI 요소의 상호작용을 정의하는 역할로, 버튼, 슬라이더, 탭 등과 같은 사용자가 직접 조작할 수 있는 위젯을 포함합니다. Widget Roles는 보조 기술이 이러한 요소들의 기능과 상태를 정확히 이해하고 사용자에게 올바르게 전달하도록 지원합니다.
   • 주요 예시 : button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, textbox
3. Document Structure (문서 구조 역할)
   • 문서 구조 역할은 콘텐츠의 섹션에 대해 구조적 설명을 제공하는 데 사용됩니다. 현대 브라우저는 시맨틱 HTML 요소를 지원하므로, 이러한 역할의 대부분은 더 이상 필요하지 않습니다. 그러나, 프리젠테이션, 도구 모음, 도구 설명 역할과 같이 HTML에 해당하는 역할이 없는 경우, 보조 기술에 문서 구조에 대한 정보를 제공하는 데 유용합니다.
   • 주요 예시 : toolbar, tooltip, feed, math, presentation / none, note, application, directory, document, group
   • 시멘틱 예시 :
     article (<article>)
cell (<td>)
columnheader (<th scope=”col”>)
definition (<dfn>)
figure (<figure>)
heading (h1~h6)
img (<img> or <picture>)
list (<ul> or <ol>)
listitem (<li>)
meter (<meter>)
row (<tr> with <table>)
rowgroup (<thead>, <tfoot> and <tbody>)
rowheader (<th scope=”row”>)
separator (<hr>)
table (use <table>)
term (use <dfn>)
4. Landmark Roles (랜드마크 역할)
   • 랜드마크 역할은 웹 페이지의 주요 구역을 식별하고 구조를 정의합니다. 페이지의 각 섹션에 레이블을 붙이면, 시각적으로 나타나는 구조적 정보가 프로그래밍 방식으로 표현되어, 사용자가 페이지를 보다 효율적으로 탐색할 수 있게 합니다.
   • 시멘틱 예시 :
     banner (document <header>)
complementary (<aside>)
contentinfo (document <footer>)
form (<form>)
main (<main>)
navigation (<nav>)
region (<section>)
search (<search>)
5. Live Region Roles (라이브 영역 역할)
   • 동적으로 변경되는 콘텐츠를 사용자에게 실시간으로 알리기 위해 사용하는 역할입니다. 시각적으로는 변화가 눈에 띄지만, 저시력 또는 시각 장애가 있는 사용자는 스크린 리더와 같은 보조 기술을 통해 콘텐츠의 업데이트를 확인할 수 있도록 해야 합니다. 이러한 역할은 보조 기술이 콘텐츠의 변경 사항을 사용자에게 정확하게 전달할 수 있도록 돕습니다.
   • 주요 예시 : alert, log, marquee, status, timer
6. Window Roles (윈도우 역할)
   • 사용자 인터페이스의 창 요소를 정의하는 역할로, 주로 대화 상자, 모달 창, 툴팁과 같은 UI 구성 요소를 나타냅니다. 이러한 요소들은 웹 애플리케이션에서 중요한 정보를 전달하거나 사용자와 상호작용할 때 사용되며, 보조 기술이 이들 요소를 인식하고 사용자에게 적절하게 알릴 수 있도록 돕습니다.
   • 주요 예시 : alertdialog, dialog, tooltip

자주 사용되는 역할(Role) 예시

1. Role: button

   요소를 “버튼”으로(클릭 가능한 요소) 인식합니다.

   <!-- 기본 시멘틱 마크업 예시 --> <button type="button">UXKM</button> <!-- role 부여 예시 --> <div role="button" tabindex="0">UXKM</div>
2. Role: alert
   • 중요한 메시지를 사용자에게 즉시 전달해야 할 때 사용됩니다. 스크린 리더는 이러한 요소가 등장할 때 자동으로 읽어주어, 시각 장애 사용자에게 중요한 정보를 빠르게 전달할 수 있도록 돕습니다.
   • 폼 제출 시 오류 메시지를 표시할 때 유용합니다.
   <div role="alert">중요한 알림 메시지입니다!</div>
3. Role: dialog

   대화 상자(Dialog)는 주로 모달 창에서 사용되며, 사용자가 상호작용할 수 있는 별도의 창을 나타냅니다. 이 역할은 사용자에게 중요한 정보나 선택을 요구하는 경우에 사용되며, 스크린 리더와 같은 보조 기술이 대화 상자를 인식하고 알리도록 돕습니다.

   <div role="dialog" aria-labelledby="dialogTitle"> <h2 id="dialogTitle">Confirm Action</h2> <p>Are you sure you want to proceed?</p> </div>
4. Role: heading

   섹션 제목은 콘텐츠의 계층 구조를 정의하는 데 사용되며, aria-level 속성을 통해 제목의 레벨을 설정할 수 있습니다. 이 역할은 보조 기술이 제목의 중요도와 위치를 이해하고, 사용자가 콘텐츠를 더 쉽게 탐색할 수 있도록 돕습니다.

   <!-- 기본 시멘틱 마크업 예시 --> <h1>Heading h1</h1> <!-- role 부여 예시 --> <div role="heading" aria-level="1">Heading h1</div>
5. Role: navigation

   페이지 내의 내비게이션 링크 그룹을 정의하는 역할을 제공하며, 주로 메뉴, 탐색 바 등에서 사용됩니다. 이 역할을 통해 보조 기술은 내비게이션 링크의 구조를 이해하고, 사용자가 웹 페이지의 다양한 섹션으로 쉽게 이동할 수 있도록 돕습니다.

   <!-- 기본 시멘틱 마크업 예시 --> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> <!-- role 부여 예시 --> <div role="navigation"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </div>
6. Role: tab

   탭 인터페이스에서 각 탭 요소를 정의하며, tablist와 함께 사용됩니다. 이 역할은 사용자가 여러 탭 사이를 전환할 때 각 탭의 기능을 이해할 수 있도록 돕습니다. tablist는 탭의 그룹을 정의하고, 각 탭 요소는 그 그룹 내의 개별 탭을 나타냅니다.

   <div role="tablist"> <div role="tab" tabindex="0" aria-selected="true">Tab 1</div> <div role="tab" tabindex="-1" aria-selected="false">Tab 2</div> </div>
7. Role: tabpanel

   탭이 선택되었을 때 표시되는 콘텐츠 패널을 정의합니다. 이 역할은 각 탭에 해당하는 콘텐츠 영역을 나타내며, 사용자가 탭을 클릭할 때 해당 패널의 내용을 확인할 수 있도록 합니다.

   <div role="tabpanel" aria-labelledby="tab1">Content for Tab 1</div>
8. Role: header

   <header> 요소의 역할을 수행하는 <div> 요소에는 role="banner" 속성을 추가하여 이 요소가 페이지의 주요 헤더 역할을 함을 명시합니다. 이 역활은 스크린 리더와 같은 보조 기술이 이 <div>가 페이지의 상단 헤더로 인식하도록 도와줍니다.

   <!-- 기본 시멘틱 마크업 예시 --> <header> <h1>Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header> <!-- role 부여 예시 - header 역할을 하는 div --> <div role="banner"> <h1>Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </div>
9. Role: main

   <main> 요소의 역할을 수행하는 <div> 요소에는 role="main" 속성을 추가하여 이 요소가 페이지의 주요 콘텐츠 영역을 나타내는 역할을 한다고 명시합니다. 이렇게 설정하면 보조 기술이 이 <div>를 페이지의 주요 콘텐츠로 인식하고 사용자가 페이지의 중심 콘텐츠를 쉽게 찾을 수 있도록 도와줍니다.

   <!-- 기본 시멘틱 마크업 예시 --> <header> <h1>Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header> <!-- role 부여 예시 - main 역할을 하는 div --> <div role="banner"> <h1>Website Title</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </div>
10. Role: section

    <section> 요소의 역할을 수행하는 <div> 요소에 role="region" 속성을 추가하고, aria-labelledby 속성을 사용하여 섹션 제목을 참조할 수 있습니다. 이렇게 하면 보조 기술이 해당 <div>를 섹션으로 인식하고, 제목과 함께 관련 콘텐츠를 명확하게 설명할 수 있습니다.

    <!-- 기본 시멘틱 마크업 예시 --> <section> <h2>섹션 제목</h2> <p>이 섹션에 대한 내용입니다.</p> </section> <!-- role 부여 예시 - section 역할을 하는 div --> <div role="region" aria-labelledby="section-title"> <h2 id="section-title">섹션 제목</h2> <p>이 섹션에 대한 내용입니다.</p> </div>
11. Role: article

    <article> 요소의 역할을 수행하는 <div> 요소에 role="article" 속성을 추가하여, 보조 기술이 해당 <div>를 독립적인 콘텐츠 블록(예: 블로그 글, 뉴스 기사 등)으로 인식하게 할 수 있습니다.

    <!-- 기본 시멘틱 마크업 예시 --> <article> <h2>기사 제목</h2> <p>이 기사의 내용입니다.</p> </article> <!-- role 부여 예시 - article 역할을 하는 div --> <div role="article"> <h2>기사 제목</h2> <p>이 기사의 내용입니다.</p> </div>
12. Role: footer

    <footer> 요소의 역할을 수행하는 <div> 요소에 role="contentinfo" 속성을 추가하여, 보조 기술이 해당 <div>를 페이지나 섹션의 푸터(하단 정보 영역)로 인식할 수 있게 합니다.

    <!-- 기본 시멘틱 마크업 예시 --> <footer> <p>© 2024 Company Name. All rights reserved.</p> </footer> <!-- role 부여 예시 - footer 역할을 하는 div --> <div role="contentinfo"> <p>© 2024 Company Name. All rights reserved.</p> </div>
13. Role: aside

    <aside> 요소의 역할을 수행하는 <div> 요소에 role="complementary" 속성을 추가하여, 보조 기술이 해당 <div>를 주요 콘텐츠와는 별도로 관련된 부가적인 콘텐츠로 인식할 수 있게 합니다.

    // 기본 시멘틱 마크업 예시 <aside> <h3>관련 기사</h3> <ul> <li><a href="#link1">관련 기사 1</a></li> <li><a href="#link2">관련 기사 2</a></li> </ul> </aside> // role 부여 예시 - aside 역할을 하는 div <div role="complementary"> <h3>관련 기사</h3> <ul> <li><a href="#link1">관련 기사 1</a></li> <li><a href="#link2">관련 기사 2</a></li> </ul> </div>

역할(Role) 요약 및 주의사항

1. 역할 부여

   <div> 요소에 role 속성을 추가하면, HTML5 요소가 제공하는 접근성 역할을 구현할 수 있습니다. 이 기능을 통해 화면에 보이지 않는 정보도 보조 기술에 전달되어, 모든 사용자가 웹 콘텐츠를 보다 쉽게 접근할 수 있게 됩니다.

2. 일관된 접근성

   보조 기술은 role 속성을 활용하여 웹 요소의 역할을 정확히 이해하고, 사용자에게 페이지의 구조와 내용을 명확히 전달할 수 있도록 돕습니다.

3. 네이티브 요소 사용 권장

   가능한 경우에는 role 속성을 사용하는 대신, HTML5에서 제공하는 네이티브 요소(header, main, section, article, footer, aside 등)를 사용하는 것이 좋습니다. 네이티브 요소는 접근성과 의미론적 구조를 기본적으로 지원하므로, 웹 페이지의 구조를 보다 명확하고 일관되게 표현할 수 있습니다.

상태(State)와 속성(Properties)의 차이점

• 상태(State)
  • 웹 요소의 동적인 상태를 나타내며, 사용자의 상호작용에 따라 변경될 수 있습니다.
  • HTML 요소의 상태와 특성은 보조 기술이 웹 요소의 현재 상태를 이해하고 사용자에게 전달할 수 있도록 정의됩니다. 이러한 상태와 특성은 역할(Role)과 함께 사용되어 웹 콘텐츠의 접근성을 향상시키는 데 기여합니다.
  • 예) 선택 여부, 확장 여부, 활성화 상태 등을 포함.
• 속성(Properties)
  • 속성은 웹 요소의 고정된 특성을 나타내며, 보조 기술이 이러한 요소를 적절하게 처리할 수 있도록 돕습니다. 속성은 일반적으로 페이지 로딩 시 설정되며, 변경되지 않거나 요소의 본질적인 특성을 나타내는 정적 정보를 제공합니다.
  • 예) 요소의 레이블, 설명, 역할 등이 속성에 해당.

상태(States) 예시

1. aria-checked
   • 체크박스, 라디오 버튼 또는 트리 항목의 선택 상태를 나타냅니다.
   • value : true(선택됨), false(선택되지 않음), mixed(부분 선택됨, 체크박스에만 해당)
   <div role="checkbox" aria-checked="false" tabindex="0">약관 동의</div>
2. aria-expanded
   • 요소가 확장되었는지, 축소되었는지 여부를 나타냅니다. 드롭다운 메뉴, 아코디언 등에서 사용됩니다.
   • value : true(확장됨), false(축소됨)
   <button aria-expanded="false" aria-controls="submenu">Menu</button> <ul id="submenu" aria-hidden="true"> <li><a href="#item1">Item 1</a></li> <li><a href="#item2">Item 2</a></li> </ul>
3. aria-disabled
   • 요소가 비활성화되었음을 나타냅니다. 이 상태에서는 사용자가 요소와 상호작용할 수 없습니다.
   • value : true(비활성화됨), false(활성화됨)
   <button aria-disabled="true">Submit</button>
4. aria-hidden
   • 요소가 보조 기술에 의해 무시될지를 나타냅니다. 요소가 시각적으로는 보이지만, 보조 기술 사용자에게는 숨겨질 때 사용됩니다
   • value : true(숨김), false(보임)
   <div aria-hidden="true">이 콘텐츠는 화면 낭독기가 읽지 않습니다.</div>
5. aria-selected
   • 요소가 선택된 상태인지 나타냅니다. 주로 탭, 옵션 리스트 등에서 사용됩니다.
   • value : true(선택됨), false(선택되지 않음)
   <div role="tablist"> <div role="tab" aria-selected="true">Tab 1</div> <div role="tab" aria-selected="false">Tab 2</div> </div>
6. aria-pressed
   • 토글 버튼의 눌림 상태를 나타냅니다.
   • value : true(눌림), false(눌리지 않음), mixed(부분적으로 눌림)
   <button aria-pressed="false">Bold</button>

속성(Properties) 예시

1. aria-label
   • 요소의 레이블을 제공하여, 스크린 리더가 이 레이블을 읽어 사용자에게 요소의 목적을 전달합니다.
   • 작성자가 접근성 있는 이름을 제공할 수 없는 역할을 제외한 거의 모든 역할에 사용됩니다.
   • value : string
   <button aria-label="닫기">X</button> <button aria-label="취소">X</button>
2. aria-labelledby
   • aria-labelledby 속성은 다른 요소가 레이블을 제공할 때 사용됩니다. 이 속성은 레이블 요소의 ID를 참조하여 해당 요소를 레이블로 지정합니다. aria-labelledby는 접근 가능한 이름을 정의하지만, 레이블 지정 요소를 클릭하여 연결된 입력을 활성화하는 등의 기능은 제공하지 않습니다.
   • 작성자가 액세스 가능한 이름을 제공할 수 없는 역할을 제외한 거의 모든 역할에서 사용됩니다.
   • value : ID reference list(ID 참조 목록)
   <h1 id="dialogTitle">대화 상자 제목</h1> <div role="dialog" aria-labelledby="dialogTitle"> <p>대화 상자 내용입니다.</p> </div>
3. aria-describedby
   • 다른 요소가 추가적인 설명을 제공할 때 사용됩니다. 설명을 제공하는 요소의 ID를 참조합니다.
   • 모든 역할에 사용됩니다. 모든 HTML 요소에서도 사용할 수 있습니다.
   • value : ID reference list(ID 참조 목록)
   <span id="info">요소의 설명입니다.</span> <input type="text" aria-describedby="info">
4. aria-controls
   • 요소가 제어하는 다른 요소의 ID를 참조합니다. 주로 사용자 인터페이스에서 요소 간의 관계를 나타냅니다.
   • 모든 역할에서 사용됩니다.
   • value : id list(ID 목록)
   <button aria-controls="submenu">하위 메뉴 토글</button> <div id="submenu">하위 메뉴 내용</div>
5. aria-live
   • 동적으로 변경되는 콘텐츠 영역을 나타내며, 보조 기술이 콘텐츠의 변경 사항을 사용자에게 알리는 방법을 정의합니다.
   • 모든 역할에서 사용됩니다.
   • value : off, polite, assertive
   <div aria-live="polite">New message received.</div>
6. aria-valuenow / aria-valuemin / aria-valuemax
   • aria-valuenow : 슬라이더나 프로그레스 바 등에서 현재 값을 나타냅니다.
   • aria-valuemin : 슬라이더나 프로그레스 바 등에서 설정할 수 있는 최소 값을 나타냅니다.
   • aria-valuemax : 슬라이더나 프로그레스 바 등에서 설정할 수 있는 최대 값을 나타냅니다.
   • meter, scrollbar, separator, slider, spinbutton 역할에서 사용됩니다.
   • value : number
   <div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>

적절한 ARIA 역할(Role) 사용

• WAI-ARIA 역할을 사용하여 HTML 요소의 목적을 명확하게 정의합니다.
• 예) div나 span 같은 요소에 role="button" 속성을 사용하여 해당 요소가 스크린 리더와 같은 보조 기술에서 버튼 역할을 수행하는 것으로 인식되도록 해줍니다.

ARIA 속성(Properties) 활용

• 요소의 상태나 특성을 명확히 하기 위해 적절한 ARIA 속성을 추가합니다.
• 예) aria-expanded를 사용하여 요소가 확장되었는지 여부를 나타낼 수 있습니다.

ARIA 상태(States) 적용

• 사용자의 상호작용에 따라 변할 수 있는 요소에 대해 ARIA 상태를 설정합니다.
• 예) 체크박스의 상태를 aria-checked로 표시합니다.

정확한 레이블 제공

• aria-label 또는 aria-labelledby를 사용하여 요소에 명확한 텍스트 레이블을 제공함으로써 스크린 리더와 같은 보조 기술 사용자가 요소의 목적을 이해할 수 있도록 함

동적 콘텐츠에 aria-live 적용

• 실시간으로 변경되는 콘텐츠에 aria-live 속성을 사용하여 스크린 리더가 해당 변화를 사용자에게 알릴 수 있도록 합니다.