アクセシビリティ

アクセシビリティとは#

アクセシビリティとはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。サイトの訪問者の中には目の不自由な方、マウスでの操作が困難な方など多種多様な方がいます。そういった方々にとっても快適に閲覧できるサイトにするためにアクセシビリティを高める必要があります。

アクセシビリティについては MDN に詳細がまとまっているので参考にしてください。

代表的なアクセシビリティ対策#

Imageタグにaltをつける#

たとえば視覚障碍者の方は画像を認識することができません。重要なアクションが画像リンクになっていた場合、ユーザーにそれをクリックすべきだということが伝わりません。そこで img タグには alt という属性が用意されています。ここに画像の説明を入力することで、スクリーンリーダーと呼ばれるテキスト読み上げ機能がそれを読み上げてくれます。

たとえば割引キャンペーンの申し込みバナーのリンクがあるとします。その場合どのようにマークアップするのが正解でしょう。

<a href=""><img src="..."></a>

<a href=""><imt src="..." alt="20% OFFキャンペーン申し込みはこちら！"></a>

上記のように alt にバナーに含まれるテキストを入力することでスクリーンリーダーがテキストを読み上げてくれるようになります。

スクリーンリーダー専用クラスで説明する#

Bootstrap や Tailwind CSS などの代表的なCSSフレームワークには通常不可視でありつつ、スクリーンリーダーの読み上げには検知させることのできる特殊なクラスが用意されています。たとえばサイドメニューの開閉ボタンがハンバーガーアイコンになっていた場合、そのボタンに対する説明がテキストとして存在していないと、視覚障碍者はそれがなんのボタンなのか理解できません。

<button><MenuIcon /></button>

<button><MenuIcon /><span class="sr-only">メニューを開閉</span></button>

上記はTailwind CSSの例です。Tailwind CSSに用意されている sr-only というクラスを使うと通常では画面に表示されなくなります。ただしマークアップ上はテキストが存在するのでスクリーンリーダーはボタンの説明を読み上げることができます。

WAI-ARIA#

WAI-ARIAはHTML属性によってHTMLタグに役割や状態を付与できる機能です。WAI-ARIAは特に複雑化するUIの役割や状態をスクリーンリーダーをはじめとするアクセシビリティ補助ツールに正しく伝えるために生まれました。

たとえばサイドナビゲーションや、その開閉状態を明示したり、タブ切り替えにおいては今どのタブが選択されているのか？を丁寧に指定することで、スクリーンリーダーなどがその状態を正しく閲覧者に伝えることができます。

WAI-ARIAに設定できる値はかなり多くその設定もJavaScriptとの連携が欠かせないため、WAI-ARIAを完璧に実装するのは骨の折れる作業です。もちろん本来的には完璧な実装を目指すべきですが、現実的に対応を検討すべきは以下のシーンでしょう。

• 予算や工数に余裕がある場合
• 公的なサイト
• 多種多様かつ多くのアクセスが想定されるサイト

WAI-ARIAの具体的な指定方法やその解説はMDNを参照してください。