2

サイトを WCAG に準拠させる一環として、カルーセル用の再生/一時停止ボタンを追加しています。ここでは、スクリーン リーダーが別の方法で読み上げています。

<div id="imageCarouselPlayBtn" class="cblt-button imageCarouselPlayBtn" tabindex ="0">
    &#9658;
</div>
<div id="imageCarouselPauseBtn" class="cblt-button imageCarouselPauseBtn" tabindex ="0">
    &#8214;
</div>`

この場合、スクリーン リーダーは一時停止ボタンを2 本の垂直線として読み取り、再生ボタンのグループを読み取ります。代わりにスプライト画像を使用すると、再生/一時停止ボタンの両方のグループとして読み取られます。両方にイメージタグを使用する代わりに、この問題の良い解決策はありますか?

4

1 に答える 1

2

WAI-ARIA のaria-label属性を使用できます:

オブジェクトの認識可能な名前をユーザーに提供します。

また、再生/一時停止ボタンの代わりにbutton/を使用しない理由はありますか? ボタンを使用すると、マークアップは次のようになります。inputdiv

<button type="button" aria-label="Play">►&lt;/button>
<button type="button" aria-label="Pause">‖&lt;/button>
于 2013-12-17T11:41:58.000 に答える