WAI-ARIAの
キホンの考え方

2017年6月29日 masuP9

今日の目標

WAI-ARIA実装時の基本的な考え方や気をつけるポイント、参照するドキュメントを知る

WAI-ARIA とは

Web
Accessibility
Initiative
Accessible
Rich
Internet
Application

ホストマークアップ言語にないセマンティクス（役割と属性）を追加するための仕様

Accessible Rich Internet Applications (WAI-ARIA) 1.1

※ここでは基本的にホストマークアップ言語はHTMLとしてお話します。

なぜ追加のセマンティクスが必要か

アクセシビリティAPIを通じて適切な
アクセシビリティオブジェクトを支援技術に伝えるため。
HTMLは語彙が貧弱（要素追加するの大変やし）

アクセシビリティAPI？
アクセシビリティオブジェクト？

支援技術はブラウザだけが対象ではない。そのため情報をやりとりする汎用的なAPIが必要

→ アクセシビリティオブジェクトについて

WAI-ARIA が追加するもの

• 役割 : role
• 状態 : aria-*
• プロパティ : aria-*

role

役割の追加・上書きをするための属性。次のように分類される。

抽象ロール

widget, structure, landmark...

ウィジェットロール

button, slider, tooltip...

文書構造ロール

article, heading, img, none, toolbar

ランドマークロール

banner, main, contentinfo

ライブ領域ロール

alert, log, marquee

Caution!!!!!!

抽象ロールは使用不可

インスタンス化してはいけないやつ （よくわかってない、俺達は雰囲気で(ry)

aria-*

状態、プロパティを追加する属性

aria-label

テキストプロパティを付与する

aria-controls

操作する要素を定義するプロパティ

aria-expanded

開いたり閉じたり（ステート）

aria-hidden

アクセシビリティーAPIに公開されているかどうか ≠ hidden

状態やプロパティはHTMLのネイティブセマンティクスにあまり無いため、利便性を高めるには重宝する。

checked, disabled, hidden, open

WAI-ARIAを使う上で注意点

デフォルトの役割と重複させたアカンよ

<button role="button">button</button>

※ブラウザのサポート状態やバグ対応のためにあえて重複させるのは 🙆‍️

<main role="main">main</main>

※IE11は<main>要素の暗黙のARIAセマンティクスを理解しない
（ role="main" は解釈する）

<img role="img" src="hoge.svg" alt="hoge" />

※iOS VoiceOver は .svg で終わる img 要素の alt を読み上げない。
（ role="img" があると読み上げる）

使っていいroleは決められてるんよ

次は、button要素でrole=headingを使用する。button要素はheadingロールと衝突するデフォルト特性を持つため、これは許可されない。

<button role="heading">search</button>

HTMLの各要素の暗黙のセマンティクスと使用しても良い role については、ARIA in HTMLの使用に対する文書適合性要件を参照のこと

覚えられないので eslint-plugin-jsx-a11y とか使うと良いかもね！

WAI-ARIAは補助輪？
未来予想図？

個人的には未来のHTMLを先取りしている気分！

参考文献

＼(^o^)／ｵﾜﾘ