アクセシビリティのベストプラクティス
アクセシビリティのベストプラクティス
以下、a11yはアクセシビリティを指します。
題材：IPA万博 LIFE2050
上記サイトにおいては、下記に列挙した以外にも幅広くa11y対応をしていますが、主要なものをピックアップして、記載しておきました。
カラーコントラストを厳守する
これはa11yの基本中の基本。AA準拠の場合、24px以上または18px以上太字であれば3:1、それ以外は4.5:1という基準になる。
背景画像やグラデーションの場合、一般的なチェックツールではコントラストの判定ができないため、手動でのチェックになる。
濃くした状態が、およそ4.5:1という最低基準のコントラストをクリアした色。このあたりはデザインを作成する時点でクリアしているのが望ましい。
参考：コントラスト (最低限):達成基準 1.4.3 を理解する
- https://design.digital.go.jp/foundations/color/accessibility/#:~:text=1.4.3%20%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%B9%E3%83%88%EF%BC%88%E6%9C%80%E4%BD%8E%E9%99%90%EF%BC%89%EF%BC%88%E3%83%AC%E3%83%99%E3%83%ABAA%EF%BC%89
- https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
ランドマークの重要性
スクリーンリーダー使用時には、ランドマークを設定されていればそこに移動しやすい。メニューなど頻繁にアクセスするので、適切にhtmlタグを使いましょう。（header/nav/main/footer など）。
それがないとページ内の要素を１つずつ移動していくことになってしまう。
スクリーンリーダーの工夫
不可視（screen reader only）クラスを設定して、読み上げのみに対応したテキストを挿入する。
例えば、言語切り替え。
見た目的には「JP / EN」だけでスタイリッシュだが、読み上げ時にはこれでは何かさっぱり分からない。
- 不可視のテキストで「言語を切り替えるには、以下のボタンを使用してください」と挿入
- ボタンのaria-labelには「日本語に切り替える（現在選択中）」と明示する
ALTを手抜きしない
メインビジュアルなどをきちんと説明する。
「今回のイベントのキービジュアル。校舎を背にして、主演はしもとあいの左右に子供4人が笑顔で並んでいる。」
固有名詞は読み上げが難しいので、ひらがな・カタカナで記述しましょう。
「主演、はしもとあい、演出、せきかずあき、音楽、あらたひかる（ウォンク）、特別出演、アイディー、イーヴィー、ドードー」
日付は読み上げられる形式で記述しよう。これは本文中のテキストでも同様です。
良い例）2025年8月27日（水曜日）10時00分
「2025年8月26日火曜日から30日土曜日まで」
言語にも配慮した書き方にします。Pavilionなどが発音できない場合はVoiceOver用にカタカナで記述しておきます。
「LIFE 2050 Pavilion 生きたい場所で、生きられる未来へ」
→「ライフ 2050 パビリオン、生きたい場所で、生きられる未来へ」
キーボード操作の担保
ページ全体をキーボードだけで操作できるように。タブでの移動、Escで閉じるなどの操作を実装する。
特にモーダル要素の場合はモーダルが開いている時は、モーダル内でタブ移動がループするようにする（モーダルトラップ）。またEscで閉じれるようにしておく。このあたりを実装しておかないと、背景の要素にフォーカスしたままでモーダル内が読めないなどの事態に陥ってしまう。
小技として、上記の例のようにモーダルの最初の要素にタブフォーカスを当てるのですが、そのままだとモーダルを開いた瞬間に、その要素の位置までスクロールしてしまうため、下記のオプションを付与します。
focusableElements.current[0].focus({ preventScroll: true })
（おまけ）チェックツールの活用
MiChecker, WAVE, lighthouse, axe-coreなど数多くのツールがあり、案件に合わせて使い分ける。多くの案件ではWCAG AA準拠という基準が目安になると思われるが、一部の日本語サイトでは、JIS規格のAA準拠というガイドラインが設定されていることがある。内容はWCAGの基準に、いくつか日本語特有のa11yを追記したものではあるが、この場合はMiCheckerなど国内製のチェックツールの方が向いているかもしれません。
下記はaxe-coreを用いた、監査スクリプトの例。ローカルサーバーを立てた状態で実行する。監査結果のログがファイルに出力される。