運用時のウェブアクセシビリティの取り組み

サイトの更新、管理を行う際に、利用者が情報を見つけやすく、操作しやすい状態を保つための手順とヒントをまとめています。
ページを公開・更新するときは、次の観点を確認すると改善につなげやすくなります。

ページタイトルを明確にする

他のページとの重複を避け、ページの内容が分かる簡潔なタイトルを付けます。

コンテンツの見出しを明確にする

見出しは簡潔で明瞭な言葉を選び、h1からh6のタグを文書構造に沿って使用します。

ブラウザの拡張機能等を利用して見出しの順序をチェックできます。
HeadingsMap（Chrome拡張）

正確なHTMLタグを使用する

タグの閉じ忘れや不要なタグの混入がないか確認します。

ブラウザの拡張機能等を利用してタグの閉じ忘れをチェックできます。
HTMLエラーチェッカー（Chrome拡張）

読み上げに配慮した構造にする

見た目の順序とHTML上の順序がずれないよう、コンテンツを自然な流れで配置します。

コンテンツの表記を統一する

同じ機能や同じ情報には同じ言葉を使い、利用者が迷わないようにします。

改行を適切に使用する

文章や見出し内の連続した改行は控えます。
余白を作る目的の改行は、音声読み上げで不自然に伝わる場合があるため、CSSで調整します。

単語内の空白文字の使用を避ける

単語は『日　時』のように単語内で空白を入れず、『日時』と表記します。
文字間を広げたい場合は、空白文字ではなくCSSで調整します。

曖昧なリンク表記を避ける

リンク先は具体的な名称を使用し、「こちら」などの曖昧な表記は避けます。
リンク先名に悩む場合は遷移先のページタイトルを使うと分かりやすくなります。

リンク切れを避ける

リンク切れがあると利用者が必要な情報にたどり着けないため、公開前後に確認します。

装飾文字は適切に使用する

装飾文字は使えますが、意味を伝える唯一の方法にはしないようにします。重要な情報はテキストでも伝えます。

脚注を明確に表記する

脚注は「※1」のような記号や数字だけでなく、「脚注1」など脚注であることを示します。
本文側の参照箇所と脚注本文の対応も分かるようにします。

画像の代替テキストを設定する

意味のある画像には、内容や役割が分かる代替テキストを設定します。「画像です。」のような説明は避け、必要な情報を簡潔に書きます。
装飾目的の画像は空のalt属性（alt=""）にし、画像内の文字は可能な限りHTMLテキストとしても提供します。

ブラウザの拡張機能等を利用してaltをチェックできます。
Alt & Meta viewer（Chrome拡張）

色のコントラストを適切に設定する

本文などの通常サイズの文字は、目安としてコントラスト比4.5:1以上を確保します。ロゴや装飾文字など、基準の対象外となるものは個別に判断します。

コントラスト比はチェックツールを使用して測ることができます。
Contrast Checker（色のコントラスト）

アクセシビリティチェックを実施する

自動チェックだけでは見つからない問題もあるため、ツール確認に加えて、キーボード操作や主要な導線の確認も行います。

ブラウザの拡張機能等を利用して簡易的にアクセシビリティのチェックができます。
axe DevTools（Chrome拡張）

目次へ戻る