WAIC-TEST-0053-01
アイコンフォントに意味を付与するために role=”img” を使用
role=”img” が指定されたアイコンフォントは、フォントファミリーが上書きされても正しく表示されることの確認
1.3.1
ARIA24
<p><strong>アイコンフォントA</strong></p>
<p><span class="icon-star-bg"></span></p>
<p><strong>アイコンフォントB</strong></p>
<p><span class="icon icon-star-bg" role="img" aria-label="Favorite"></span></p>
.icon {
font-family: 'Material Icons Outlined';
}
.icon-star-bg::before {
content: 'star';
}
テストファイルを開き、「アイコンフォントA」と「アイコンフォントB」の表示内容の違いを確認する
アイコンフォントAでは「star」、アイコンフォントBでは「★」が表示される
なし
テストファイルを開き、矢印キーを使って移動し、どのように通知されるかを確認する
テストファイルを開いた状態で矢印キーを押し、「アイコンフォントA」と通知されるまで移動する
「アイコンフォントA」と通知された次に、下矢印キーを押し「star」と通知される
テストファイルを開いた状態で矢印キーを押し、「アイコンフォントB」と通知されるまで移動する
「アイコンフォントB」と通知された次に、下矢印キーを押し「画像Favorite」と通知される
なし
role属性、aria-label属性