要約

装飾的な画像がユーザーに表示されないようにします。

テクニック

例

例 — 空のalt属性

alt属性が空の場合、画像にはユーザー向けの情報が含まれていないことを示します。

<img
    src="graphics/gothic-border.png"
    alt=""/>
例 - ARIA ロールのpresentationを持つ空のalt属性

空のalt属性は、ロールのpresentationによって補完され、画像にユーザー向けの情報が含まれていないことを示します。

<img
    src="graphics/gothic-border.png"
    role="presentation"
    alt=""/>
例 — ARIA ロールのpresentation

コンテンツ製作者は空のalt属性の代わりに presentationロールを使用できますが、この方法は十分にサポートされていません。

<img
    src="graphics/gothic-border.png"
    role="presentation"/>

解説

出版物のすべての画像に、テキストを理解するための重要な情報が含まれているわけではありません。新しい章の始まりを強調するために装飾的な趣向が使われている場合もありますが、こうした画像の形や形式はテキストの理解とは無関係です。同様に、教科書には、新しいセクションの始まりに、ページを視覚的に埋めることだけを目的とした装飾的な写真が含まれていることがあります。

画像が純粋に装飾的なものである場合は、そのalt属性を空のままにしておく必要があります。これにより、画像の存在を通知しないように支援技術に指示し、説明のない画像が表示されている理由を理解しようとするユーザーの負担を軽減します。

装飾画像がアナウンスされないようにするために、プロパティpresentationを持つ ARIA role属性を追加できます。この方法は、編集者が空のalt属性を持つすべての画像をチェックして装飾用であることを確認するために、一部の出版社で使用されています。

注記

画像が純粋に装飾的なものである場合は ARIA ロールを追加するのがベストプラクティスですが、WCAG への準拠には必須ではありません。

ARIA 1.1 では、 presentationよりもnoneロールが優先されますが、これは十分にサポートされていません。ARIA 1.1 仕様では、 presentation単独で使用するか、 noneのフォールバックとして使用することを推奨しています。

関連リンク