Zenn
Open2

Webアクセシビリティのチェック方法を探る 🤝

CSS
HTML
#
wcag
アクセシビリティ
Y.Y.

チェックすべきこと

チェックツールなどを探す前に、何をどのように満たしていないといけないかを理解する。

デジタル庁「ウェブアクセシビリティ導入ガイドブック」の「3 ウェブアクセシビリティで達成すべきこと」より、重大、必須、個別対応になっている項目を自分なりに（分かりやすいように）書き出してみる。

ウェブアクセシビリティ導入ガイドブック
https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf

画像

  • 代替テキストがあるか
  • 装飾目的や意味を持たない画像がスクリーンリーダーから無視できるか（空の代替テキストを設定しているか）
  • 代替テキストがスクリーンリーダーの可読性を考慮してMAX80字を目安に設定されているか

動画

  • 音声を自動再生させることは避けているか
  • 自動再生させるのは3秒以内、それ以上の場合は一時停止かミュート機能をつけているか

配色

  • 文字色と背景色のコントラストが適切か

モーダル

  • キーボードのみの操作でモーダルから抜け出せるか（モーダル内に閉じるボタンがあるか）

点滅

  • アニメーションや映像などのコンテンツで、1秒に3回を超える点滅がないか

カルーセル

  • 自動で切り替わるカルーセルの場合、一時停止、非表示、停止の機能があるか

キーボード操作が可能か

  • キーボード操作時に、洗濯中の要素にフォーカスインジケータが表示されるか
  • キーボード操作時に、フォーカス・入力がキャンセルされないか
  • フォーカス・入力した瞬間に何かが勝手に動作しないか

閲覧や入力の操作に、制限時間を設けていないか（設ける場合、下記を満たしているか）

  • 制限時間があること、またそれを延長・解除できることを利用者に事前通知しているか
  • 入力フォームのセッション時間を利用者が延長するか無制限にできるか
  • ページ上のスクリプトで制御されている入力フォームの制限時間を利用者が延長できるか
  • 自動的に進むコンテンツを利用者が一時停止できるか

赤字・太字・下線・拡大など単一の表現のみで情報を伝えていないか

  • 赤字など、色の違いだけで情報を伝えていないか（フォームに「必須」ラベルをつけるなど、色以外の手がかりでも情報を伝える）
  • 太字、『右の写真』『丸いボタン』など、位置や形の違いだけで情報を伝えていないか

スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっているか

  • スクリーンリーダーは、HTMLのソースに記載されている順、視覚的には左上から右下に向かって読み上げる。この順序を考慮してコンテンツやサービスを設計しているか。
  • 文字感覚の調整に空白文字（スペース）を使っていないか
  • 申し込みボタンや決定ボタンの後に、同意事項などユーザーに読ませたい文章がきていないか。（ボタンが文章より前にきていると、何に同意するか分からない）

見出し要素だけで、セクションやブロックに含まれる要素が表現できているか

  • 大見出し、中見出し、小見出し…となるように見出しレベルを適切に設定しているか
  • 見出し要素が空になっていないか
  • 強調や文字を大きくするために見出し要素を使用していないか
  • 長い文章においては、スクリーンリーダーの見出し一覧機能を使って、読み飛ばしができるか（長い文章の途中に見出しが無いと、スクリーンリーダーで必要な部分だけ拾い読みすることが難しくなる）

文字と背景の間に十分なコントラスト比が保たれているか

  • 文字色と背景の間に、4.5:1以上のコントラスト比があるか

テキストの拡大縮小をしても情報が読み取れるか

  • ブラウザの文字拡大機能だけで文字サイズを200%まで変更できるか
  • コンテンツを 200%まで拡大したときに、文字が重なったり見切れたりしないか
  • 拡大縮小を無効にするmetaタグを使用していないか（<meta name="viewport" content="user-scalable=no">は使用しない）

文字や文字コード

  • 文字コードはUTF-8を使用しているか
  • PDFしたコピーした文字は、公開前に読み上げの確認を行なったか（PDFからコピーした文字は、見た目がそっくりな別の文字に置き換えられてしまう場合があり、スクリーンリーダーでは正確に読み上げられないことがある。）
  • 「*（アスタリスク）」「※（こめじるし）」などの記号がスクリーンリーダーで適切に読み上げられるか（必須項目の印に記号を使っている場合は「必須」など読み上げられる文字に変更、またはスクリーンリーダー用のテキストを設置することを検討する）
  • Webフォントを使ってアイコンや UIを表現しており、利用者がフォントの設定を変更した場合に異なる文字として表現されないか

ページの内容を示すタイトルが適切に表現されているか

  • 複数のページでタイトルが重複していないか

リンクが適切に表現されているか

  • リンクがどこへのリンクなのか、単体で、または前後の文脈から簡単に理解できるか（「詳しくはこちら」、だけだと分かりづらい → 「会社概要の詳細はこちらのページをご覧ください。」など）
  • リンク先が、PDFなのか外部ウィンドウを開くのか、事前に理解できるか（リンクテキストの近くにPDFアイコンや外部リンクアイコンを表示、または、リンクテキスト自体に「PDFファイル(1.2MB)」のような情報を含める）

ナビゲーションが一貫性を持っているか

  • ナビゲーション要素が、毎回同じ順序、表記で実装されている
  • ページによってグローバルナビゲーションの位置が異なっていないか

同じ機能には、同じラベルや説明がつけられているか

  • 同じ機能を複数のページで提供する場合、ボタンのアイコンとラベルがページによって異なっていないか