ARIAとは何ぞや
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概要日本語に。。。
Discussion