はじめに

インクルーシブに続き、今一度アクセシビリティについてちゃんと考えてみました。

アクセシビリティとは

Webサービスにおけるアクセシビリティとは、情報やサービスへのアクセスのしやすさのこととされています。

高齢者や障害者などを含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい>場所など）においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。[IT用語辞典バイナリ]

Webサービスでのアクセシビリティに関しては結構前から話題にあがっていて、1999年にはW3C(World Wide Web Consortium)より『Web Content Accessibility Guidelines 1.0』というアクセシビリティに関する指針が発表されています。

WAI-ARIAとは

『Web Accessibility Initiative - Accessible Rich Internet Applications』の頭文字をとったもので、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。

WAI [Web Accessibility Initiative]

W3Cの一部であるWeb Accessibility Initiative(WAI)という、Webアクセシビリティを向上することを目的としている団体・組織の名称です。
上記でも出てきた『Web Content Accessibility Guidelines』もWAIによって公開されているものです。

ARIA [Accessible Rich Internet Applications]

WAIによって公開されている、仕様書です。
アクセス可能なリッチなWebアプリケーションを作成するための考え方からコーディング方法まで記載されています。

WAI-ARIAを意識して実装してみよう！

role属性

HTML5より正式に採用された『role属性』には、コンテンツの役割を正確にブラウザに伝えることができます。

<li role="menuitem">Open file…</li>

上記のようにrole属性に"menuitem"を記述することでこのリストはメニューのリストアイテムだという意味の補助付けができます。
※ <li>には暗黙のセマンティックとしてrole="listitem"が内包されているので、listitemは記述しない。

↓暗黙のARIAセマンティックスについて
ARIA in HTML 日本語訳

また、セマンティックを持たない要素への意味付けとしてdevやpへ詳細を付与することもできます。

<p role="alert" class="error">入力内容はエラーです。</p>

aria属性

『aria-〇〇="true/false"』は状態や性質などの詳細な情報を付与することができます。

<li role="menuitemcheckbox" aria-checked="true">
　　　　Sort by Last Modified
</li>

上記ではメニュー項目がチェックされる（true）、チェックされない（false）かどうかを示します。

参考

MDN web docs moz://a
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

注意点

WAI-ARIAを学ぶと片っ端から取り入れたくなりますが、全部に取り入れればいいという訳ではありません。
セマンティック要素で賄える部分は要素を正しく使うべきですし、多すぎる情報は時に複雑化を促します。
WAI-ARIAはアクセシビリティなコーディングをするための補助的な存在なのです。