WEBアクセシビリティの事例を分かりやすく解説

WEBアクセシビリティとは

WEBアクセシビリティとは、年齢、障害の有無、利用する端末環境にかかわらず、すべての人が快適にウェブサイトを利用できることを目指す考え方です。

視覚・聴覚・運動機能など、さまざまな特性を持つユーザーにも配慮することで、より多くの人に情報が届くウェブサイトを作ることができます。

具体的な事例

ここからは、実際にアクセシビリティを意識した具体的な事例をご紹介します。

記事を作成するときに「どんな点に注意すればいいのか？」を、良い例と悪い例を交えながらわかりやすく解説していきます。

コントラスト比

文字と背景の色のコントラストが十分でないと、視覚に制限のある方や、屋外など光の強い環境では文字が読みにくくなります。

アクセシビリティ対応では、一定以上のコントラスト比を確保することが求められています。
読みやすさを意識した配色設計が重要です。

悪い例

良い例

日付・時間・通貨の表記方法

日付や時間、通貨などを表記する際は、誰にとっても一目で理解できる形式を使うことが大切です。

たとえば日付の場合、元号・曜日まで記載すると、読み上げソフトを利用するユーザーにも正しく情報が伝わりやすくなります。

悪い例

• 2025/4/28（読み上げ例：よんぶんの にせんにじゅうご にじゅうはち）
• 2025.4.28（読み上げ例：にせんにじゅうご てん よん てん にじゅうはち）
• （土）（読み上げ例：つち）
• 15:30（読み上げ例：じゅうご さんじゅう)
• ¥1,500（読み上げ例：えんまーく せんごひゃく)

良い例

• 令和7年4月28日（月曜日）（読み上げ例：れいわ ななねん しがつ にじゅうはちにち げつようび）
• 午後3時30分（読み上げ例：ごご さんじ さんじゅっぷん)
• 1,500円（読み上げ例：せんごひゃく えん）

単語内に不要なスペースは入れない

単語の途中にスペースが入っていると、スクリーンリーダーなどの読み上げ機能では単語が正しく認識されないことがあります。

正しい意味を伝えるためにも、単語内には不要なスペースを挟まないようにしましょう。

悪い例

• 【時 間】（読み上げ例：とき あいだ)
• 【開 催 場 所】（読み上げ例：かい さい ば ところ）

良い例

• 時間（読み上げ例：じかん)
• 開催場所（読み上げ例：かいさいばしょ）

リンク情報を掲載する場合

リンクを設置する際には、リンク先の内容がわかるテキストを設定することが大切です。

「こちら」や「詳しくはこちら」といったあいまいな表現だけでは、リンク先が何か理解できない場合があります。

リンクテキストは具体的に記載しましょう。

悪い例

ホームページ制作に関するお問い合わせはこちら

良い例

ホームページ制作に関するお問い合わせフォーム

ファイルを掲載する場合

ファイルをダウンロードさせる場合は、リンクテキストにファイル形式（PDF、Excelなど）やファイルサイズ（例：2MB）を明記するのが親切です。

事前に情報を伝えることで、ユーザーが安心してダウンロードできるようになります。

悪い例

良い例

まとめ

WEBアクセシビリティは、一部の特別なユーザーだけのためではなく、すべての人が快適にウェブを利用できる社会を目指すために必要な考え方です。

ちょっとした工夫や配慮を積み重ねることで、誰にとってもわかりやすく、使いやすいサイトが作れます。