적용 예시를 살펴보자

Tab

<div role="tablist">
  <button 
  role="tab" 
  aria-selected="true" 
  aria-controls="tabpanel-id-1" 
  id="tab-1"
  tabindex="0">
  Tab1
  </button>
  <button role="tab" aria-controls="tabpanel-id-2" id="tab-2" tabindex="-1">Tab2</button>
  <button role="tab" aria-controls="tabpanel-id-3" id="tab-3" tabindex="-1">Tab3</button>
</div>

<div role="tabpanel" id="tabpanel-id-1" aria-labelledby="tab-1">Tab ONE</div>
<div role="tabpanel" id="tabpanel-id-2" aria-labelledby="tab-2" hidden>Tab TWO</div>
<div role="tabpanel" id="tabpanel-id-3" aria-labelledby="tab-3" hidden>Tab THREE</div>

연관된 role

• 탭 아이템 role='tab'

• 탭 아이템을 감싸는 리스트 role='tablist'

• 탭 아이템을 선택했을 때 보여지는 컨텐츠 role='tabpanel'

연관된 attributes

• aria-selected: [role=tab] element가 선택된 상태라면 해당 element는 aria-selected='true'가 된다.

• aria-controls: [role=tab] 탭 아이템과 연결된 tab panel의 id를 정의한다.

• aria-labelledby: [role=tabpanel] 탭 패널과 연결된 탭 아이템의 id를 정의한다.

• aria-multiselectable: [role=tablist] 탭이 여러 개 선택가능하다면 aria-multiselectable=‘true’로 설정한다.

• aria-expanded: [role=tab] tablist가 multi-selectable할 때 탭이 선택되었다면 aria-expanded='true'를 정의한다.

기타

• role='tab'을 정의할 땐 button element를 추천한다.

• tab key를 사용하고 싶다면 active element에 tabindex=0을, 나머지 element엔 tabindex=-1을 정의하자.

• role='listbox'와 role='option'을 사용해서 custom select를 구현할 수 있다.

listbox 사용해서 select 구현하기

<p id="listbox1label">Select a color:</p>
<div
  role="listbox"
  tabindex="0"
  id="listbox1"
  aria-labelledby="listbox1label"
  aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" aria-selected="true">
    Green
  </div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div>
  <div role="option" id="listbox1-4">Blue</div>
  <div role="option" id="listbox1-5">Violet</div>
  <div role="option" id="listbox1-6">Periwinkle</div>
</div>

연관된 role

• role='listbox': list를 담고 있는 element이다. <select>와 다르게 image를 넣을 수 있다.

• role='option': listbox안에서 selectable한 아이템을 나타내기 위해 사용된다.

연관된 attributes

• aria-orientation: role='listbox'는 암묵적으로 aria-orientiation='vertical'을 가진다.

• aria-labelledby: [role='listbox'] listbox에 accessible name을 지정해주는 대상이다. 만약 존재하지 않는다면 aria-label을 사용해서 직접 accessible name을 정의해야 한다.

• aria-selected: [role='option'] 선택 가능한 option에 aria-selected를 정의하고 선택된 option은 aria-selected='true'로 표기한다. 만약 선택이 불가능하다면 aria-selected을 제거한다.

• aria-checked: [role='option'] 여러가지가 선택 가능할 때 선택된 옵션들은 aria-checked='true'로 표기한다.

• aria-activedescendant: [role='listbox'] 선택가능한 option 중에서 가장 최근에 active된 element의 id이다. 가장 최근에 상태가 변한 option이라고 보면 된다.

• aria-multiselectable: [role='listbox'] option을 2개 이상 선택 가능할 때 true로 정의한다.

!! <select>와 <option>을 사용하면 더 쉽게 구현이 가능하므로 이미지가 필요없다면 <select>, <option>을 사용하자.

다이알로그 구현

<label for="listbox1">Select a color:</label>
<select id="listbox1">
  <option selected>Green</option>
  <option>Orange</option>
  <option>Red</option>
  <option>Blue</option>
  <option>Violet</option>
  <option>Periwinkle</option>
</select>

<button id="dialogbutton" aria-haspopup="dialog" aria-controls="dialog">
    <img src="hamburger.svg" alt="Dialog"/>
</button>
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc"
  hidden
>
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

다이알로그 구현 시 주의할 점

• 라벨링이 잘 되어야 한다.

• 키보드 포커싱을 올바르게 관리해야 한다.

연관된 role

• role='dialog': dialog와 같이 현재 page와 분리된 content 혹은 UI를 표현하기 위해 사용된다. non-modal(dialog 외부의 컨텐츠와도 interact 가능), modal(dialog 내부의 컨텐츠만 interact가능) 모두 가능하다.

연관된 attributes

• aria-labelledby: 라벨링을 위해 적용한다. dialog의 title을 나타내는 element의 id를 정의한다.

• aria-describedby: dialog가 추가로 텍스트를 가지고 있다면 해당 element의 id를 정의한다.

• aria-modal: true라면 element가 모달이 된다. 모달이면 모달 내부 컨텐츠만 focus되어야 한다.

참고

dialog 태그가 있다.

팝업 메뉴

<div>
  <button id="menubutton" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
    <img src="hamburger.svg" alt="Page Sections" />
  </button>
  <div role="menu" id="menu" aria-labelledby="menubutton" hidden>
    <ul role="group">
      <li role="menuitem">Inbox</li>
      <li role="menuitem">Archive</li>
      <li role="menuitem">Trash</li>
    </ul>
    <div role="separator">Custom Folder</div>
    <ul role="group">
      <li role="menuitem">Custom Folder 1</li>
      <li role="menuitem">Custom Folder 2</li>
      <li role="menuitem">Custom Folder 3</li>
    </ul>
    <div role="separator"/>
    <ul role="group">
      <li role="menuitem">New Folder</li>
    </ul>
  </div>
</div>

연관된 roles

• role='menu' : 팝업 메뉴, 컨텍스트 메뉴와 같이 유저가 선택할 수 있는 액션이나 함수를 리스팅한 위젯에 정의한다. 기본적으로 메뉴로 정의된 위젯은 열고 닫을 수 있고 메뉴가 열리면 첫 번째 메뉴 아이템에 키보드 포커싱이 되어야 한다.
  만약 메뉴가 계속 열린 상태라면 role='menu' 대신 role='menubar'를 사용한다.

• role='menuitem', 'menuitemcheckbox', 'menuitemradio' : 메뉴 아이템에 정의한다.

• role='group' : 메뉴 아이템끼리 그룹핑할 수 있다.

• role='separator' :<hr> 태그와 동일한 기능을 한다.
  role='separator'를 적용할 경우, 자식 element들에게 role='presentation'이 자동으로 적용되어 ARIA semantic들이 사라진다.

  <div role="separator"><h3>Title of my separator</h3></div>
  <!-- 위에 코드는 접근성 트리에서 아래와 같아진다. -->
  <div role="separator">Title of my separator</div>

연관된 attributes

• aria-haspopup: menu를 트리거하는 버튼에 정의

• aria-controls: menu를 트리거하는 버튼에 정의

이미지가 있는 버튼 정의하기

이미지와 함께 있는 버튼을 정의하고자 할 때 svg 태그를 사용한다면 아래와 같이 정의할 수 있다.

<button>
  <svg aria-hidden='true' .../>
  다음 페이지
</button>

하지만 img 태그를 사용한다면 alt를 사용하는게 베스트이다.

<button>
  <img src="..." alt=""/>
  다음 페이지
</button>