ARIAとは何ぞや

2023/10/23に公開

ARIAそろそろちゃんと理解したい

最近Svelteを書くようになって、何かしらInteractiveなUIを作ろうとすると、
Svelteさんにa11y(Accecivility)関連で怒られることがあり、ずっとその場しのぎできたARIAについて
本腰入れて理解しようと思う

ARIA とは

ARIA, which stands for Accessible Rich Internet Applications, refers to a set of more than 150 declarations that can be added into web page code so assistive technologies, such as screen readers, can understand how to present the page. For example, the text "Home" might be visually presented as a heading, an interactive link or button, or as the label for a phone number. If the web code does not declare what the element containing that text represents, a screen reader cannot present it to a blind user in an accessible way.

ARIA = Accessible Rich Internet Applications
=> リッチなアクセシビリティを備えたインターネット上のアプリケーション

とのことだそうだ

WAI-ARIA の WAI って何よ

WAI = Web Accessibility Initiative

ウェブのアクセシビリティについて主導している人たち

WAI-ARIA

つまるところ、WAI-ARIAとはウェブのアクセシビリティについて主導している人たちが本気で考えて策定した(している)リッチなアクセシビリティを備えたインターネット上のアプリケーションということだ

策定は偉い人たちに任せるとして、開発者としては、WAI-ARIAで策定されたものを正しく使って、いろんな人に優しいWebを作りましょうよってことになる

「よくあるやつ」は大体教えてくれている

よくあるやつ

https://www.w3.org/WAI/ARIA/apg/patterns/

よく使われそうなやつは、こんな感じでw3cのアンニュイなオネェさんが教えてくれるようなので、引き続きやっつけで凌いで行く分には困らなさそう

Index

https://www.w3.org/WAI/ARIA/apg/example-index/#abouttheindex
ここに全ての項目が挙げられてるので、一旦総なめしようと思う

こっちの方が説明付きでわかりやすいかも
https://w3c.github.io/aria/#role_definitions

Role だけで 47件。。。
どこかの国の行政区画と同じですね!!

(2023/10/28追記: 別途記事追加したものについては、順次名前を記事ページへのリンクに変更 - 6/47)

Role Examples
alert Alert, Alert Dialog
alertdialog Alert Dialog
article Feed
banner Navigation Menubar (HC), Navigation Treeview (HC), Banner Landmark
button Button (IDL Version), Button
cell Table
checkbox Checkbox (Mixed-State) (HC), Checkbox (Two State) (HC)
columnheader Table
combobox Editable Combobox With Both List and Inline Autocomplete (HC), Editable Combobox With List Autocomplete (HC), Editable Combobox without Autocomplete (HC), Date Picker Combobox (HC), Select-Only Combobox, Editable Combobox with Grid Popup
complementary Complementary Landmark
contentinfo Navigation Menubar (HC), Navigation Treeview (HC), Contentinfo Landmark
dialog Date Picker Combobox (HC), Date Picker Dialog (HC), Modal Dialog
feed Feed
form Form Landmark
grid Date Picker Combobox (HC), Editable Combobox with Grid Popup, Date Picker Dialog (HC), Data Grid, Layout Grid
gridcell Editable Combobox with Grid Popup, Layout Grid, Treegrid Email Inbox
group Auto-Rotating Image Carousel with Buttons for Slide Control, Checkbox (Two State) (HC), Listbox with Grouped Options, Editor Menubar (HC), Color Viewer Slider (HC), Date Picker Spin Button, Switch Using HTML Button (HC), File Directory Treeview Using Computed Properties, File Directory Treeview Using Declared Properties, Navigation Treeview (HC)
link Link
listbox Editable Combobox With Both List and Inline Autocomplete (HC), Editable Combobox With List Autocomplete (HC), Editable Combobox without Autocomplete (HC), Select-Only Combobox, (Deprecated) Collapsible Dropdown Listbox, Listbox with Grouped Options, Listboxes with Rearrangeable Options, Scrollable Listbox
main Main Landmark
menu Actions Menu Button Using aria-activedescendant (HC), Actions Menu Button Using element.focus() (HC), Navigation Menu Button (HC), Editor Menubar (HC), Navigation Menubar (HC), Toolbar
menubar Editor Menubar (HC), Navigation Menubar (HC)
menuitem Actions Menu Button Using aria-activedescendant (HC), Actions Menu Button Using element.focus() (HC), Navigation Menu Button (HC), Editor Menubar (HC), Navigation Menubar (HC)
menuitemcheckbox Editor Menubar
menuitemradio Editor Menubar (HC), Toolbar
meter Meter
navigation Navigation Menubar (HC), Navigation Treeview (HC), Navigation Landmark
none Navigation Menu Button (HC), Navigation Menubar (HC), Rating Radio Group (HC), Horizontal Multi-Thumb Slider (HC), Media Seek Slider (HC), Vertical Temperature Slider (HC), Navigation Treeview (HC)
option Editable Combobox With Both List and Inline Autocomplete (HC), Editable Combobox With List Autocomplete (HC), Editable Combobox without Autocomplete (HC), Select-Only Combobox, (Deprecated) Collapsible Dropdown Listbox, Listbox with Grouped Options, Listboxes with Rearrangeable Options, Scrollable Listbox
radio Radio Group Using aria-activedescendant (HC), Rating Radio Group (HC), Radio Group Using Roving tabindex (HC), Toolbar
radiogroup Radio Group Using aria-activedescendant (HC), Rating Radio Group (HC), Radio Group Using Roving tabindex (HC), Toolbar
region Accordion, Auto-Rotating Image Carousel with Buttons for Slide Control, Auto-Rotating Image Carousel with Tabs for Slide Control (HC), Navigation Menubar (HC), Navigation Treeview (HC), Region Landmark
row Editable Combobox with Grid Popup, Layout Grid, Table, Treegrid Email Inbox
rowgroup Table
search Search Landmark
separator Editor Menubar
slider Horizontal Multi-Thumb Slider (HC), Color Viewer Slider (HC), Rating Slider (HC), Media Seek Slider (HC), Vertical Temperature Slider (HC)
spinbutton Date Picker Spin Button, Toolbar
switch Switch Using HTML Button (HC), Switch Using HTML Checkbox Input (HC), Switch (HC)
tab Auto-Rotating Image Carousel with Tabs for Slide Control (HC), Tabs with Automatic Activation (HC), Tabs with Manual Activation (HC)
table Table
tablist Auto-Rotating Image Carousel with Tabs for Slide Control (HC), Tabs with Automatic Activation (HC), Tabs with Manual Activation (HC)
tabpanel Auto-Rotating Image Carousel with Tabs for Slide Control (HC), Tabs with Automatic Activation (HC), Tabs with Manual Activation (HC)
toolbar Toolbar
tree File Directory Treeview Using Computed Properties, File Directory Treeview Using Declared Properties, Navigation Treeview (HC)
treegrid Treegrid Email Inbox
treeitem File Directory Treeview Using Computed Properties, File Directory Treeview Using Declared Properties, Navigation Treeview (HC)

https://zenn.dev/ideodora/articles/f573a8edde640c
https://zenn.dev/ideodora/articles/ec7c3b7da49783
https://zenn.dev/ideodora/articles/4323d141a81c33
https://zenn.dev/ideodora/articles/32de2f5ea750a5

その他・気になるもの・語句メモ

  • ARIA概要部分だけで別記事にしよう
  • Alert, Alertdialog で別記事に
  • role概要日本語に。。。

ref

Discussion