コーダー向けに、アクセシビリティに関して「はじめに知っていれば良いかもね」ということについて書きます。
実装の詳細については触れていません。
アクセシビリティ
「すべての人にとって利用可能な状態」や「そのための取り組み」のことです。
Accessibilityを省略して「a11y」と書かれることもあります。
アクセシビリティは、障害を持つ人だけのためではなく、すべての人のための取り組みです。
アクセシビリティに関するドキュメント
- WCAG: Web Content Accessibility Guidelines（ガイドライン）
- WAI-ARIA: Accessible Rich Internet Applications（技術仕様）
「WCAG」はWebコンテンツをアクセシブルにするための推奨事項などについて、「WAI-ARIA」はHTMLなどの実装について書かれています。
とても長くて、難しいので、私は少しずつ読み進めています。
キーボードだけですべてのコンテンツへアクセスできるか確認する
アクセシビリティのガイドラインである「WCAG」では、「すべての機能をキーボードから利用できるようにする」ことが求められています。
「タブキーでフォーカス移動」や、「エンターキーで開く・エスケープキーで閉じる」など、実際にキーボード操作のみでWebサイトのすべてのコンテンツにアクセスできるか確認してみましょう。
スクリーンリーダーなどの支援技術を使ってみる
支援技術とは、理由があって情報にアクセスしにくい人の助けになるような、ハードウェアとソフトウェアの総称です。
アクセシビリティに関しては、実際に支援技術を使ってみなければ分からないことがたくさんあります。
何がアクセシブルで、何がアクセシブルでないのかを体験してみてください。
実際に使ってみることで、「情報にアクセスはできるけど不親切だな」などの気付きもあると思います。
私はiPhoneに搭載されている「VoiceOver」というスクリーンリーダー（音声読み上げソフト）を使ってみました。
VoiceOverの使い方は以下を参考にしました。
- iPhoneユーザガイド（Apple）
- 視覚障害者Aチャンネル（YouTube）
私は使用したことがありませんが、Androidには「TalkBack」というスクリーンリーダーが搭載されているようです。
開発者ツールの設定（Chrome）
ChromeのDevToolsでアクセシビリティに関する情報を確認する方法についてです。
この機能を使えば、スクリーンリーダーなどの支援技術から、要素がどのように認識されているか確認しやすくなります。
ChromeのDevToolsを開いてから、以下の手順で設定します。
- 「Elements」タブを選択する
- 「Accessibility」タブを選択する
- 「Enable full-page accessibility tree」にチェックを入れる
- DevToolsを再読み込みする
DevToolsを再読み込みすると、Elementsタブを選択しているときに右上にアクセシビリティツリーとDOMツリーを切り替えるボタンが表示されるようになります。
ボタンを押してアクセシビリティツリーの表示に切り替えると、それぞれの要素がどのように認識されているかを確認できます。
例えば次のようなマークアップのボタンは、
<!-- 一部省略 -->
<button>
<img alt="ユーザーメニュー">
</button>
アクセシビリティツリーではこのように認識されています。
button要素にテキストは含まれていませんが、img要素のalt属性への指定により、この要素はbutton "ユーザーメニュー"と認識されています。
実際、スクリーンリーダーでも「ユーザーメニュー ボタン」と読み上げられます。
これらの情報はDOMツリー表示の状態でも、「Accessibility」タブから確認できます。
他にもroleやaria-属性などについても確認できます。
アクセシビリティ チェックツール（Chrome拡張）
チェックツールを使えば、Webサイトがアクセシブルになっているかを簡単に確認できます。
ここではChrome拡張として提供されているツールを2つ紹介します。
Lighthouse
「Lighthouse」はページのパフォーマンスチェックなどで使用したことがある方も多いかと思いますが、「Accessibility（ユーザー補助）」についてもチェックできます。
結果は別タブで表示されます。
axe DevTools
「axe DevTools」はChromeのDevToolsの中で結果を確認できます。
問題があった要素はElementsタブですぐに確認できるので便利です。
チェックツール使用時の注意点
チェックツールはあくまで機械的なチェックしかできません。
最後は、実際に目で見たり、スクリーンリーダーなどの支援技術を使用してページを確認してください。
実装の参考になるサンプル
「ARIA Authoring Practices Guide」の「Patterns」はとても参考になります。
コンポーネントごとに、実装についての詳細な解説がされており、実際に動作するサンプルやそのソースコードも公開されています。
おわりに
Webサイトのアクセシビリティを向上させるためには、デザイナーさんが作るアクセシブルなデザインだけでなく、コーダー側のアクセシビリティに関する知識・技術が必要不可欠です。
私自身、アクセシビリティ初心者ですが、今後は実装についての記事なども書けるように知識を深めていきたいです。