Accessibility Recipes/Dropcaps

From DPWiki
Jump to navigation Jump to search

Dropcaps are a decorative feature of many of our books. If done carefully, they can be accessible as well. There are two kinds: the ones that are simply a big letter, and the ones that are an image of the letter. Surprisingly, the image kind are easier.

The Image Kind

What to do and how?

The basic idea is that we include both the image and the letter at the start of the word, but we hide the letter firstly by positioning it underneath the image and secondly by making it the colour of the background.

In the CSS:

img.cap { float:left;
        margin: 0 0.5em 0 0;
        position:relative; }
p.cap_1 { text-indent: -1.4em; }
div.drop p:first-letter { color:Window; }
div.drop p { margin-bottom:0; }

This assumes that you want the first line tight against the image but the 3 or 4 lines below to have a gap. That's how some books do it, but if yours doesn't, just alter the margins a bit. More importantly, -1.4em works well for wide letters, like W; you may need extra classes p.cap_2 etc for narrower letters. "Window" is a system colour to match whatever background the user has as default. You could use white, but be aware that the user's background might not be white even though the background colour of your image probably is. Hopefully it won't be seen anyway, because the letter will be neatly tucked under the image. The colour is just an extra precaution.

In the HTML

<div class="drop">
<img src="images/cap_w.png" alt="W" width="102" height="100" class="cap" />
<p class="cap_1">What on earth....
... are we doing here?</p>

So the image is outside the paragraph, but the image and the entire first paragraph are enclosed in a div. The image does have "W" as its alt, on the grounds that it is better to risk redundant information than absent information.

While you are experimenting and adjusting the lengths, you may find it helpful to put "red" in place of "Window", so that any protrusion of the letter at the edge of the image is visible. The idea is that the image should just cover it exactly, but because this is font-dependent, and because it's possible that the user could enlarge the text so vast that the W was even bigger than the image (so protruded out the bottom!) we camouflage it as well. If you find the rest of the word looks uncomfortably close to the picture, you could edit the image to add an extra sliver of white along its right edge.



Obviously there's nothing specifically about drop-caps in the W3C's Guidelines. But relevant parts are:

  • WCAG 1, Checkpoint 1.1 Provide a text equivalent for every non-text element (Priority 1).
  • Draft WCAG 2, Success criterion 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, braille, speech, symbols or simpler language (Level A)
  • WCAG 1, Checkpoint 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. (Priority 1)
  • Draft WCAG 2, Success criterion 1.3 Create content that can be presented in different ways (for example spoken aloud, simpler layout, etc.) without losing information or structure (Level A).

Who benefits?

Screenreader users: The big problem to avoid is that any kind of tag put around the first letter of the text will cause a screenreader to break up the word—for instance <span>W</span>hat would be read out as "W Hat". So we need to cover and/or camouflage it without putting a tag around it. With the above, users will hear

Image: W. What on earth....

It would be nice to use empty alt, but then visual users with images turned off but CSS on wouldn't get the letter at all.

Plucker users? Probably. The "obvious method" of a mere image with alt="W" followed by the rest of the word messes up PG's automatic Plucker conversion.


For the scenario we normally cater best for, namely sighted users browsing with both images and CSS turned on, everything's fine. There are compromises elsewhere:

  • Users with images OFF but CSS ON will see the W from the alt followed by the part word. Depending on browser they may appear joined, or the W might be in a large square space.
  • Users with images ON but CSS OFF will see the image on a line of its own, above the paragraph that starts with the full word.
  • Users with images OFF and CSS OFF get both the W from the alt (possibly in a big empty square) and the whole word.
  • Speech rendering gives the W from the alt followed by the whole word.

These should be weighed up when looking at other possible solutions that have been tried (not just the obvious alt-then-part-word method but also the background-image method: turning off background images is common, especially when printing). It is probably better that some users get the letter twice than some do not get it at all.


  • Try all four combinations in your browser: CSS on or not × Images on or not.
  • Listen in a screenreader.

Further Reading

The Large Ordinary Letter Kind

What to do and how?

Again we need to avoid putting a tag around the first letter if we can, by using the CSS first-letter pseudo-element. In the CSS, something like:

p.cap:first-letter { float: left; clear: left; 
    margin: 0 0.1em 0 0;
    line-height: 1.2em; font-size: 250%; }

And in the HTML, simply

<p class="cap">Once upon a time...

Simple! At least if you're lucky, that's all you'll need.

The Quotes Problem

If you're unlucky, you may have some of these dropcaps that are preceded by a quote mark. Now, the spec says

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), and "other" (Po) punctuation classes), that precedes the first letter should be included.

So if that opening quote is a " or a ', your CSS style should apply to both the quote mark and the first actual letter. Which is what you want, although you might prefer the quote mark a bit smaller. Unfortunately (and inexplicably!) the nice curly &ldquo; and &lsquo; are in the (Pi) Unicode class, so this rule doesn't apply. You'll get a giant curly quote followed by a small letter.

Here are some possible ways out.

  • Use the straight quote, not the curly one. Many PPers use straight quotes all the time, many others feel that they are ugly. Your choice.
  • Handle the quoted ones by putting the styles onto a <span> around the quote and first letter. Will break the word in screenreaders, unfortunately (unless you're extremely lucky and all the examples with a quoted dropcap happen to be one-letter words!)
  • Use the :before pseudo-element to generate the quote mark, thus tricking the :first-letter into enlarging the right thing. Very tricky, not well supported at all.
  • Remove the quote from the paragraph in question, and put it in a paragraph of its own just above, using some kludgey CSS to try to shove it down to where it should be.

Some browsers (i.e. IE9) also have a problem with identifying » as not being a letter. In that case, replace the letter in your code by the appropriate HTML code (in that case: &raquo;), and the browsers will understand (tested with FF7, IE9, Opera11 and Chrome15).



  • WCAG 1, Checkpoint 11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported. (Priority 2)
  • Draft WCAG 2, Success criterion 1.3 Create content that can be presented in different ways (for example spoken aloud, simpler layout, etc.) without losing information or structure (Level A).

Who benefits?

Again, screenreader users (and Plucker users).


None unless you run into the quotes problem.


No real need to test for this. Listening to your document is always good.

Further Reading