要約

ドロップキャップは複数のユーザーグループにとって問題があり、アクセシビリティを確保しながら一貫してレンダリングするのは簡単ではありません。

テクニック

解説

ドロップキャップは、従来、文書の新しいセクションを強調するために使用されていました。たとえば、ラテン語の写本では、新しいセクションの開始時に区切りがなかったため、ドロップキャップは、テキストをざっと読むユーザーに視覚的な合図を提供しました。

出版物はもはやこのようにフォーマットされなくなり、主要な新しいセクションは通常、新しいページの先頭に大きな見出しを付けて配置することで強調表示されるようになりました。

装飾的なドロップキャップは、出版物に華やかさを加えるために今でも時々使用されていますが、様式化された文字はもはや機能的な目的を果たしません。残念ながら、この余分な書式設定により、一部のユーザーはテキストを読めなくなります。たとえば、次のような例があります。

これらの理由から、ドロップキャップの使用を避けるのが最善のアドバイスです。

ただし、実際にはドロップキャップを完全に回避することはできません。次のセクションでは、ドロップキャップをアクセシビリティ対応にフォーマットするための最も一般的な方法をいくつか確認します。

CSS ::first-letter疑似要素

CSS ::first-letter疑似要素は現在、ドロップ キャップをアクセシブルな方法でフォーマットするための最適なオプションです。

たとえば、新しい章の次のマークアップ例があるとします。

<section role="doc-chapter" id="c01">
   <h2>Chapter 1</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit …</p>
   …
</section>

次の CSS セレクターを使用して文字「L」をドロップキャップとしてスタイル設定し、章としてマークされた各セクションの最初のp要素の最初の文字を取得できます。

section[@role='doc-chapter'] p:first-child::first-letter {
   float: left;
   font-size: 3em;
   line-height: 1;
   padding-right: 0.1em;
}

このマークアップの表示例を次に示します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ドロップキャップのマークアップは CSS のみを使用して行われるため、最初の単語を音声化する支援技術の機能には影響がありません。また、文字が拡大されて読みにくくなる場合は、ユーザーがリーディングシステムでテキストの書式を変更できる可能性があります。

このアプローチの唯一の欠点は、ドロップキャップの書式設定が常に一定ではないことです。文字をフローティングして行の高さを調整することに依存するため、リーディングシステムやブラウザーによってドロップキャップの配置が異なります。

CSS initial-letterプロパティ

CSS のinitial-letterプロパティは、フロートと行の高さを持つfirst-letterセレクターを使用してドロップキャップを作成しようとしたときに発生する書式設定の問題を修正する可能性があります。このプロパティの値は、選択したテキストを何行の高さにするかを定義します。

たとえば、2 行の高さのドロップキャップを作成するには、次の CSS のみが必要です。

section[@role='doc-chapter'] p:first-child {
	initial-letter: 2;
}

（レーズドキャップを作成するには、 initial-letter: 2 1を使用します）

このアプローチの問題点は、現時点ではプロパティのサポートが部分的にしか行われていないことです。サポートが広まるまでは、他の代替手段を使用する必要があります。

画像

HTML imgタグは、次の例のようにドロップキャップをフォーマットするために使用されることがあります。

<img src="images/caps/a.jpg" alt="C"/>all me Ishmael …

ただし、 imgタグを使用すると、スクリーンリーダーがテキストを適切にレンダリングできなくなります。この場合、スクリーンリーダーは「Image Cee all me Ishmael」と読み上げます。

同様のパターンとして、ドロップキャップをフォーマットするためにspanタグを使用する方法があります。

<span class="dropcap">C</span>all me Ishmael …

文字の書式設定を確実にするために、CSS 背景画像がよく適用されます。ただし、この方法はimgタグを使用するのと変わりません。最初の文字が他の文字とは別に発音されてしまうからです。

ARIA

最初の文字にimgまたはspanタグを使用する際の問題の回避策として、ARIA 属性と非表示コンテンツの使用が提案されることがあります。たとえば、 「Accessible Drop Caps」の記事を参照してください。

このアプローチの問題点は、EPUB リーディングシステムの ARIA 属性のサポートに依存しているだけでなく（サポートが不十分）、コンテンツを非表示にする機能（これもサポートが不十分）にも依存している点です。

結局、このアプローチはアクセシブルなように見えますが、視覚的にも支援技術のユーザーにとってもコンテンツの重複が生じる可能性があります。純粋に Web ベースの出版物にのみ使用するのがよいでしょう。

Related Links