ARIA의 세 가지 주요 기능: roles, properties, states/values.

[00kang]

아래는 챕터4. ARIA and HTML 에서 나오는 내용이다.

ARIA의 세 가지 주요 기능은 역할, 속성, 상태/값입니다.
역할은 페이지나 앱에서 요소가 무엇인지 또는 무엇을 하는지 정의합니다.
속성은 객체의 특성이나 관계를 표현합니다.
상태/값은 요소와 관련된 현재 조건이나 데이터 값을 정의합니다.

각각에 어떤 종류가 있는지 MDN 문서를 기반으로 정리해보고자 한다.

[00kang]

Roles

Widget roles

• button
  • 클릭 가능하고 사용자 동작에 반응하는 요소임을 알려주기 위한 것, 버튼 기능은 제공하지 않음
  • 가능하면 <button> 또는 <input type="button">을 사용하는 것을 권장
• checkbox
  • 체크 가능한 상호작용 컨트롤을 위한 것
  • role="checkbox"를 사용할 때는 반드시 aria-checked 속성 필요
  • 가능하면 <input type="checkbox">를 사용하는 것을 권장
• gridcell
  • grid나 treegrid 내의 셀을 만들 때 사용
  • 가능하면 <td> 사용하는 것을 권장
• link
  • 가능하면 <a> 사용하는 것을 권장
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• progressbar
• radio
• scrollbar
• searchbox
• separator
• slider
• spinbutton
• switch
• tab
• tabpanel
• textbox
• treeitem

Composite roles

• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• tablist
• tree
• treegrid

Document structure roles

• application
• article
• cell
• columnheader
• definition
• directory
• document
• feed
• figure
• group
• heading
• img
• list
• listitem
• math
• none
• note
• presentation
• row
• rowgroup
• rowheader
• separator
• table
• term
• tollbar
• tooltip

Landmark roles

• banner
• complementary
• contentinfo
• form
• main
• navigatioin
• region
• search

Live Region Roles

• alert
• log
• marquee
• status
• timer

Window Roles

• alertdialog
• dialog

[00kang]

States and Properties

Widget attributes

• aria-autocomplete
• aria-checked
• aria-current
• aria-disabled
• aria-errormessage
• aria-expanded
• aria-haspopup
• aria-hidden
• aria-invalid
• aria-label
• aria-level
• aria-modal
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-placeholder
• aria-pressed
• aria-readonly
• aria-rquired
• aria-selected
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext

Live region attributes

• aria-live
• aria-relevant
• aria-atomic
• aria-busy

Relationship attributes

• aria-activedescendant
• aria-colcount
• aria-colindex
• aria-colspan
• aria-controls
• aria-describedby
• aria-details
• aria-errormessage
• aria-flowto
• aria-labelledby
• aria-owns
• aria-posinset
• aria-rowcount
• aria-rowindex
• aria-rowspan
• aria-setsize