要約

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

テクニック

• 前景色と背景色の間に十分なコントラストを設けます。 [ 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のページ上でテキストが飛び回ってしまう可能性があります。たとえば、一つの段落がフォーカスを失うと、そのテキストサイズは縮小され、次の段落は拡大されるため、レイアウトが「移動」します。また、ページが最初にレンダリングされたときに表示されていたテキストが、新しいハイライトが適用されるとビューポートから押し出されてしまうかもしれません。

解説

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

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