✨

ARIAとは何ぞや

2023/10/23に公開

a11y

W3C

aria

tech

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)

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

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