テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
画像
画像はスクリーンリーダーのような支援技術を使うユーザーにもアクセス可能である必要があります。以下では、適切な実装例とよくある間違いの双方を含む、画像アクセシビリティのさまざまな手法を示します。
<img> 要素
img 要素は、アクセシブルにするために適切な代替テキスト（alt）が必要です。
alt テキスト付きの画像
説明的な代替テキストを持つ適切な実装例です。これは画像をアクセシブルにする正しい方法です。
alt と title を併用した画像
alt と title の両方を指定した例です。title はツールチップとして表示されます。ツールチップを使った情報の提示は、ユーザーがその存在に気付けなかったり、そもそも表示できなかったりと問題がつきものです。
alt 属性のない画像
❌ alt が無いのは問題です。スクリーンリーダーはファイル名を読みあげたり、単に「画像」と読み上げたりして、意味のある内容が伝わりません。
title のみで alt が無い画像
❌ 代替テキストは alt 属性によって指定するべきです。
装飾目的で空の alt を持つ画像
⚠️ 空の alt はユーザーに伝えるべき情報がない画像であることを表現します。本当にユーザーに伝えるべき情報がないのかを、慎重に判断する必要があります。
空の alt と title を併用した装飾画像
空の alt で装飾画像としてマークしているため、支援技術が無視することがあります。ツールチップが表示されることで、マウスのユーザーにだけ情報が伝わる状況であり、不適切です。
aria-hidden を用いた画像
aria-hidden で支援技術から非表示にする方法です。装飾画像には空の alt の方が一般的です。
<svg> 要素
最近はしばしばアイコンなどに使用されています。SVG は title 要素、aria-label、role 属性などの手法でアクセシブルにできます。
title 要素を持つ SVG
️⚠️ ️title 要素によりスクリーンリーダーへアクセシブルネームを提供できます。標準的な手法ですが、一部のスクリーンリーダーやブラウザでのサポートが不十分な場合があります。role を img に設定する方が望ましいです。
title 要素と role=img を持つ SVG
✅ title 要素によりアクセシブルネームを提供し、role=img により画像として扱うことを明示しています。図形が画像であることが明確になります。
title 要素のない SVG
❌ 要素や属性による名前付けの無い SVG。これが図形であることすらスクリーンリーダーのユーザーにはわかりません。
aria-hidden を持つ SVG
支援技術から隠す装飾的な図形に使用します。ユーザーに情報を伝えない場合に適します。
aria-label を持つ SVG
⚠️ ️aria-label により title 要素を用いずにアクセシブルネームを提供できます。一部のスクリーンリーダーやブラウザでのサポートが不十分な場合があります。role を img に設定する方が望ましいです。
role=img と aria-label を持つ SVG
✅ 明示的に画像として扱い、aria-label で名前を提供します。図形が画像であることが明確になります。
role=presentation を持つ SVG
装飾として扱い、意味付けを取り除きます。
role="img"
img 以外の要素を画像として伝えるには role="img" を使用します。aria-label や aria-labelledby などでアクセシブルネームを付与しなければなりません。
role="img" と aria-label
✅ role='img' と説明的な aria-label の適切な使用例です。文字ベースのグラフィックや絵文字などに有用です。
role="img" かつ aria-label なし
❌ アクセシブルネームがありません。スクリーンリーダーは「画像」とだけ読み上げるかもしれせんし、テキストアート内の記号をそのまま読み上げるかもしれません。