ウェブアクセシビリティ４つの原則 ④堅牢とWAI-ARIA

こんにちは！kanappleです。
アクセシビリティ4つの原則の前回の続きです。

1. 知覚可能
2. 操作可能
3. 理解可能
4. 堅牢

今回は堅牢と、それに必要なWAI-ARIAについてです。

---

---

4. 堅牢（Robust）

堅牢（けんろう）とは、壊れにくいということです。
堅牢の原則とは、「支援技術を含む多種多様なユーザーエージェントによって確実に解釈されることができるほど十分に堅牢でなければならない」とされています。
つまり、どんな環境でも壊れずに正確に表示できるコンテンツにしなければならないということです。

堅牢にはどのように対応すれば良いか、レベルA、レベルAAに対応したガイドラインについて、実装例を交えて説明します。

4.1 互換性

このガイドラインは、現在のユーザーエージェントだけでなく、将来のものともコンテンツをできる限り互換性を持たせるということです。

使用できるブラウザーが限られたり、将来使えなくなるかもしれないようなコンテンツにしないようにしましょう。

・マークアップを検証する

例）マークアップしたHTML
W3Cの検証ツールを使用し、HTMLがvalid状態になっていることを確認します。
そうすることで、ブラウザやスクリーンリーダーに正確に解析されるようになります。

・名前、役割、値を設定する

例）HTML構造やフォームなど
様々なユーザーエージェントがそのコンポーネントを正確に解釈できるよう、名前（name）、役割（role）、値（value）を設定しましょう。
この達成基準にはWAI-ARIAの理解も必要になります。

WAI-ARIA

WAI-ARIA（ウェイ・アリア）とは、アクセシビリティ向上の目的でW3Cによって定められら仕様で、要素に追加の意味を提供できる属性を定義しています。
WAI-ARIAを使うことで、スクリーンリーダーなどの支援技術を通じて、適切な情報を伝えられるようになります。

この仕様は主に3つの機能があります。

・ロール（Role）

これは、要素が何か、何をするかの「役割」を定義します。
多くの場合はランドマークロールであり、主にHTML構造要素の役割を明確にします。
role=“navigation”、（<nav>）、role="complementary" (<aside>) 、role="banner”、role="search”、role="tablist”、role="tabpanel”等があります。

・プロパティ（Property）

これは要素に追加の意図や意味論を与え、「性質」を定義します。
例えば、aria-required="true" とすると、フォーム入力が有効となるために値を入力しなければならないことを定義し、aria-labelledby="label" は、要素に ID を追加することで、ページ内の他のどの要素からもラベルとして参照することを可能にします。

・状態（State）

これは要素の「状態」を定義します。
例えば、aria-disabled="true" は、フォーム入力が現在 disabled であることをスクリーンリーダーに対して伝えます。

WAI-ARIAを使う時

・道しるべ / ランドマーク

HTMLの意味論を再現するランドマークとして使います。
例えば、role=“navigation”とすると、<nav>と同様に読み上げることができるので、フレームワークの仕様で<div>しか使えない時などに役立ちます。

・動的なコンテンツの更新

スクリーンリーダーは絶えず更新されるコンテンツが得意ではない傾向があります。
例えばaria-liveを使うことで、サーバーから新しいコンテンツを取得しDOMを更新した場合に、スクリーンリーダーでそれを伝えることができます。

・キーボードアクセシビリティの向上

キーボードのアクセシビリティを最初から持つHTML要素（リンク、ボタン、フォームなど）がありますが、 JavaScript を使ってそれ以外の要素に同じような作用をさせる場合、キーボードでの操作ができません。
その場合、tabindexを使うことでaタグやbuttonタグのようにタブキーによるフォーカス移動をさせることができます。
tabindex=“0”とすると、文章のソース内の順序でフォーカスを持たせることができます。

・意味論的ではないコントロールのアクセシビリティ

複雑なUI機能を構成していたり、コントロールがjavascriptによって変更されている場合、アクセシビリティの提供が困難になります。
button、listbox、tablist といったロールの組み合わせ、もしくは aria-required や aria-posinset などのプロパティを提供することで、 ARIAは足りないものを補うことができます。
例えば、開閉メニューにはaria-expanded="false”、aria-expanded=“true”を使い、値をjavascriptで変更することで、挙動や状態を理解しやすいコードになります。

WAI-ARIA使用上の注意

WAI-ARIAは必要な場合のみ使用しましょう。
HTML要素や属性に必要とする意味があるなら、role属性やaria属性を追加せずにネイティブのHTML要素を使います。
aria-labelは、見て情報を得る方とスクリーンリーダーを利用する方に同じ情報を与える目的で使用します。
不要なaria属性は、スクリーンリーダーの読み上げを冗長にしてしまいます。

まとめ

・堅牢の原則とは、ウェブコンテンツが壊れずに様々な環境でも問題なく使えるということ
・ブラウザやスクリーンリーダーに正確に解析されるように、必ずマークアップを検証する
・コンポーネントを解釈できるようWAI-ARIAを用いる
・WAI-ARIAは必要な場所でのみ使う

以上でウェブアクセシビリティ４つの原則の記事は終わりになります。
まずは実装例のレベルA、AAに対応していきましょう！

---