要約

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

テクニック

解説

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

出版物はもはやこのようにレイアウトされなくなり、今では主要な新しいセクションは、新しいページの先頭に大きな文字で見出しを付けて配置し強調表示されます。

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

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

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

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