- 遵守度
- MUST
- 自動チェック
- 一部可能
- 対象
- 画像
- フェーズ
- フロントエンド実装
チェックの内容
画像が情報をもっている場合、要素は画像としてアクセシブルな名前をもっているか確認します。
- DevToolsからアクセシビリティツリーに公開されていることを確認します
- スクリーンリーダーで「画像」とアクセシブルな名前が読み上げられることを確認します
アクセシブルな名前の実装
アクセシブルな名前は以下などの方法にて実装されます。どの方法が使われているかを確認する必要がある場合は参考にしてください。
img
要素のalt
属性area
要素のalt
属性input[type=image]
要素のalt
属性svg
要素とtitle
要素- その他の要素
aria-label
属性(ARIA Roleによっては無効なので注意)aria-labelledby
属性(ARIA Roleによっては無効なので注意)
- 背景画像など場合
- 内包するVisibilityHiddenな要素
- 疑似要素
content
プロパティcontent
プロパティの代替テキスト値
制作時の注意点
[WIP]書きかけ