as_test

テスト ID

WAIC-TEST-0053-01

テストのタイトル

アイコンフォントに意味を付与するために role=”img” を使用

テストの目的

role=”img” が指定されたアイコンフォントは、フォントファミリーが上書きされても正しく表示されることの確認

テストの対象となる達成基準

1.3.1

関連する達成方法 (複数)

ARIA24

テストコード (テストファイルへのリンク)

WAIC-CODE-0053-01

テストコードのソース (抜粋)

<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では「★」が表示される

テスト実施時の注意点 (視覚閲覧環境)

なし

テスト手順 (音声閲覧環境)

テストファイルを開き、矢印キーを使って移動し、どのように通知されるかを確認する

テスト手順 1

テストファイルを開いた状態で矢印キーを押し、「アイコンフォントA」と通知されるまで移動する

期待される結果 1

「アイコンフォントA」と通知された次に、下矢印キーを押し「star」と通知される

テスト手順 2

テストファイルを開いた状態で矢印キーを押し、「アイコンフォントB」と通知されるまで移動する

期待される結果 2

「アイコンフォントB」と通知された次に、下矢印キーを押し「画像Favorite」と通知される

テスト実施時の注意点 (音声閲覧環境)

なし

関連する要素や属性

role属性、aria-label属性