WAI-ARIA(ウェイ-アリア)勉強会
CODE-EGGリンク
CODE-EGGWAI-ARIAとは
WAI-ARIA(ウェイ-アリア)、英語の動画とか見るとワイ-アリアに聞こえる。
W3CのWeb Accessibility Initiativeという団体が策定している。
Accessible Rich Internet Applicationという仕様のこと。
リッチインターネットアプリケーション、現在でいうところの「ウェブアプリ」をアクセシブルにするための技術と決め事。初版は2006年の技術。（ウェブアプリだけではなくブラウザで表示できるものすべてが対象）
HTMLでは「role」属性や「aria-」で始まる属性(プロパティとステート)をつかってWAI-ARIAを実装する。これらの属性をまとめてARIA属性という。
HTML5よりも歴史が古く、HTML5になったときにHTMLの各要素には暗黙的にロールが規定された。button要素ならbuttonロール、a要素ならlinkロールとすべての要素に何かしらのWAI-ARIAが規定されたロールが対応する。
現状WAI-ARIA側だけで規定されていてHTMLに取り込まれていない語彙がいくつかある。
※SVGやXML等のマークアップ言語にも対応できるように作られているが、ここでは要素といったらHTMLのことにする。
アクセシビリティツリーとは
ブラウザはHTMLであればDOMを、CSSであればCSSOMを生成して、レンダリングーツリーを作る。レンダリングーツリーはディスプレイに伝わり表示される。これのほかにアクセシビリティツリー（ユーザ補助ツリー）というものも同時に作られている。これはOSに伝わったあとスクリーンリーダーに伝達される。そのあとスピーカーであれば音声に、点字ディスプレイであれば点字を表示する。
アクセシビリティツリーは支援技術に各HTML要素の役割や性質、状態を伝える。
HTMLだけでは作れない、役割や性質、状態をARIA属性(role, aria-)を使って追加・拡張する。
視覚的にしか提供できなかったユーザインタフェースの手がかりを拡張して適切なアクセシビリティツリーを提供することがWAI-ARIAの目的です。
アクセシビリティツリーはデベロッパーツールで確認できる。
支援技術
スクリーンリーダーなどのこと
HTMLの役割や性質、状態を自由に拡張できるのか？
自由には拡張できない。
一部拡張できる。
WAI-ARIAで意識すること
roleやaria-はたくさんあり、「指定できる要素」「指定できる組み合わせ」がある。
だいたいダメで、駄目なことが圧倒的に多いので、「この組み合わせダメだろうけどできたかな？」くらいの粒度で確認する。
ロールがあってプロパティとステートがある。
ボタン要素にaria-labelをつけた場合は、ボタン要素のaria-labelを利用しているのではなく、buttonロールのaria-labelを利用してることを意識する。なぜならroleによって使用できるaria-labelに違いがあるから。例えば<strong>要素にはaria-lableは利用できない。
ロールとは？
要素に役割を持たせるもの。
スクリーンリーダーなどではロールを読み上げることでどんな役割を持った情報なのか知る手がかりになる。ただ、読み上げるかは支援技術依存なので、中には読み上げられないロールもある。今後のアップデートで読み上げられるようになるかもしれないので適切なロールは与えよう。
暗黙のロール
スクリーンリーダーa要素が「リンク」と読まれるのは各HTML要素に暗黙のロールがあるから。
※aタグはhref属性がないとロールが付与されない。aタグのような要素には注意。
role属性
ロールを設定するための属性。しかしすべてHTML要素にはロールがあるので事実上、上書きするための属性。role属性はグローバル属性なのですべてのHTMLに記述することができる。
role属性に設定できる値は決まっているため、自由なロール名は付与できない。
また上書き禁止のロールがあるため注意。
roleの上書き方法
次の書き方はよくない。なぜならbuttonロールは<button>タグがすでに使用している。
<img role="button">
すでに使用されている場合はその要素を利用する。
<button>
<img>
</button>
なぜこのように書く必要があるのかというと、role属性はあくまで要素に役割を持たせるもので振る舞いを持たせることはできない。頑張れば真似た実装ができるかもしれないが、ブラウザのアップデートのたびに要素を書き換えたりする必要があったり、真似れない実装があり現実的ではない。
暗黙のロールは明示しない
<button role="button"> ×
抽象ロール
仕様書で"Is Abstract: True"と定義されるロール。role属性に指定することができない。
アクセシブルな名前とは？
アクセシビリティツリーでテキストとして参照できる要素の名前。したがってスクリーンリーダーなどに伝達されて読み上げられるような情報。
<button>ヘルプ</button>
ヘルプが読み上げれれる。（コンテンツから得られる：コンテンツ由来という）
<button aria-label="ヘルプです">ヘルプ</button>
ヘルプですが読みあげられる。（属性から得られる：著者(auther)由来という）
「アクセシブルな名前」の設定と計算
aria-labelとaria-labelledbyはアクセシブルな名前を設定できるARIA属性で、要素が持っている名前を上書きする。注意点としては簡単に次のような矛盾を作り出せる。
<button aria-label="編集">削除</button>
読み上げる際に編集となって削除は読み上げられないのでとても危険。
最終的に何が「アクセシブルな名前」として採用できるか複雑な計算によって決まる。計算は覚える必要はなく、最終的な結果はデベロッパーツールで確認すればOK。aria-labelとaria-labelledbyはHTMLが本来持っているロールを上書きできる強力なARIA属性であることは注意する。
「アクセシブルな名前」が禁止されているロール
<span>要素などが当てはまる。span要素はgenericロールを持っており、genericロールはアクセシブルな名前が禁止になっている。したがって次のように「アクセシブルな名前」を上書きすることもできない。
<span aria-label="編集"></span>
スクリーンリーダーで編集が読まれることはない。
プロパティとステート
「aria-」で始まる属性を介して、要素の性質もしくは状態を変更するもの。分類されているが同じものと考えてよい。プロパティとひとくくりで扱われることもある。
ARIA属性に論理属性はない
Reactではjsxに論理値を渡しても解釈してくれるのでReact以外では注意。
プロパティに影響を与えるHTMLの属性
要素の性質(DOMプロパティ)がARIAのプロパティに影響を与える。暗黙のプロパティを持っていると考えるとよい。
cssで「アクセシブルな名前」が変わる可能性がある。
アクセシビリティツリーはCSSも使って作成される。display:noneとかにすると読み上げられなくなる。