装飾目的の画像が無視できるようになっている
概要
この基準では、装飾目的の画像が代替テキストを持たないことを確認してください。装飾目的の画像は、スクリーンリーダーや他の支援技術によって無視できるようにします。
装飾目的の画像とは
装飾目的の画像は、コンテンツの雰囲気を演出する目的などで使われますが、内容の理解や操作には直接関係しません。例えば、背景に使われるテクスチャやイラスト、見出しやラベルのアイキャッチとして使われるアイコンなどがあります。これらはコンテンツを視覚的に演出しますが、情報の伝達には必須ではありません。
装飾目的の画像の例
- 装飾的な画像:
- 意味を持たない背景画像やボーダー画像など。
- ユーザーにとって意味がない画像:
- コンテンツの理解に直接寄与しない、ページの特定の部分に配置された装飾的なアイコン。
- テキストで十分な場合:
- 画像が含まれているが、同じ情報がテキストでも提供されている場合。
メリット
- 視覚障害のあるユーザー: スクリーンリーダーが不必要な情報を読み上げることなく、重要なコンテンツに集中できるようになります。
- すべてのユーザー: ページの読み込み時間が短縮され、ユーザーが必要な情報に素早くアクセスできるようになります。
- ウェブ開発者: ウェブページの保守が容易になります。
達成方法
-
alt属性を空にする:img要素のalt属性値が空の画像は視覚的には表示されますが、支援技術ではないものとして扱われます。 -
背景画像にする 装飾目的の画像は、CSSの
background-imageで表示します。背景画像なので本文コンテンツとして扱われることがありません。 -
aria-hidden属性を付与する:ラベルテキスト「編集」と、鉛筆アイコンを持つボタンでは、アイコンのsvg要素に
aria-hidden="true"が設定されています。aria-hidden=”true”の要素は支援技術によって無視されます。
テスト方法
- HTMLの確認:
- 画像の
alt属性が空になっている、aria-hidden="true"が付与されているなどで、画像が無視できるようになっているか確認します。
- 画像の
- スクリーンリーダーでのテスト:
- スクリーンリーダーを使ってページを閲覧し、装飾目的の画像が読み上げられないことを確認します。