要約

再生中のテキストのハイライトが、テキストの読み取りの邪魔にならないように気をつけます。

テクニック

• 前景色と背景色の間に十分なコントラストを提供します。 [ WCAG 1.4.3 - AAおよびWCAG 1.4.6 - AAA ]

例

.-epub-overlay-active {
   background-color: rgb(255,255,220);
}

.-epub-overlay-active {
   color: rgb(0,0,0);
   background-color: rgb(255,255,0);
}

よくある質問

背景の陰影のみを適用できますか?

いいえ、アクティブなテキストに任意の CSS プロパティを適用できますが、選択した内容が出版物のアクセシビリティに影響する可能性があることに注意してください。

また、メディアも考慮してください。フォント サイズを大きくすると、アクティブなテキストが目立ちやすくなるように思えるかもしれませんが、実際の結果では、EPUB のページ上でテキストが飛び回ってしまう可能性があります。たとえば、1 つの段落がフォーカスを失うと、そのテキストサイズは縮小され、次の段落は拡大されるため、レイアウトが「移動」します。また、ページが最初にレンダリングされたときに表示されていたテキストが、新しいハイライトが適用されるとビューポートから押し出される場合もあります。

解説

再生中にテキストが同期されている場合、どの部分がナレーションされているかがより明確になるようにスタイルを設定することもできます。

<meta property="media:active-class">
-epub-overlay-active
</meta>