Summary

Drop caps are problematic for multiple user groups and are not easy to render consistently while simultaneously being made accessible.

Techniques

Explanation

Drop caps were traditionally used to highlight new sections of a document. Latin manuscripts, for example, did not include breaks when a new section began, so drop caps provided a visual signal for users skimming the text.

Publications are no longer formatted this way, as major new sections are now typically highlighted by being placed at the start of a new page with a larger face heading.

Decorative drop caps are still sometimes found in publications, however, to give them an extra flourish, but the stylized letters no longer serve a functional purpose. This extra formatting unfortunately impedes the ability of some users to read the text. Some examples include:

For these reasons, the best advice is to avoid using drop caps.

In practice, however, avoiding drop caps entirely is not possible. The following sections review some of the most common practices for formatting drop caps accessibly.

CSS ::first-letter pseudo-element

The CSS ::first-letter pseudo-element is currently the best option for formatting drop caps in an accessible way.

For example, given the following example markup for a new chapter:

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

The letter "L" could be styled as a drop cap using the following CSS selector to get the first letter of the first p element in each section marked as a chapter:

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

The following is an example of how this markup would display:

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.

Because the markup of the drop cap is done using only CSS, there is no impact on the ability of assistive technologies to voice the first word. In addition, it may be possible for users to change the text formatting in their reading systems if the enlarged letter makes reading difficult.

The one drawback of this approach is that it does not always result in consistent formatting of the drop cap. The reliance on floating the letter and adjusting the line height results in differences in the alignment of the drop cap across reading systems and browsers.

CSS initial-letter property

The CSS initial-letter property has the potential to fix the formatting problems that result from trying to create a drop cap using the first-letter selector with floats and line heights. The value of the property defines how many lines of text high to make the selected text.

For example, to create a drop cap two lines high, only the following CSS is needed:

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

(Note that to create a raised cap, you would use initial-letter: 2 1)

The problem with this approach is that there is currently only partial support for the property. Until support becomes more widespread, the other alternatives should be used.

Images

The HTML img tag is sometimes used to format drop caps as in the following example:

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

The use of an img tag interferes with the ability of screen readers to properly render the text, however. In this case, a screen reader would announce "Image Cee all me Ishmael".

A similar pattern is to use span tag to format the drop cap:

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

A CSS background image is often applied to ensure the formatting of the letter. This practice is no better than using an img tag, however, as it also results in the first letter being pronounced separately from the rest of the world.

ARIA

Using ARIA attributes and hidden content is sometimes proposed as a workaround to the problem of using an img or span tag on the first letter. See the article Accessible Drop Caps, for example.

The problem with this approach, is that on top of relying on support for ARIA attributes in EPUB Reading Systems, which is poor, it also relies on being able to hide content, which is also not well supported.

As a result, although the approach seems like it could be accessible, it may result in content duplication both visually and for users of assistive technologies. It is better left for purely web-based publications.

Related Links