Large initial letter (Drop Caps)

ometimes you will want to do something really different by using an illuminated character to start a paragraph. This can really make the section stand out for a sighted user, but the initial character (the letter 'S' in this example) is a graphic image. For this to work, and still be accessible to blind users we could import the image with HTML and provide an alt tag containing the letter "S", but this is untidy. A better solution is to hide the image of the letter "S" from screen readers by using a style sheet. We can then provide a normal letter "S" for screen readers to find and read out aloud to the listener.

The method used here is to define a class to hold the the illuminated letter as a background image. This will be ignored by screen readers. We then need to present the normal letter "S" to screen readers and text only browsers without showing it to visual users. We do this by wrapping the initial capital "S" in a span defined as "hidden".

First-Letter capability with CSS2

CSS version 2.0 allows designers to make use of a pseudo element that controls only the first letter of a paragraph. The problem is that not all browsers work with CSS2 so some users will only see a standard looking paragraph. However here is an example that is perfectly acessible.

Define a class in your style sheet that uses the first-letter pseudo element.

.newpara:first-letter {
font-size:300%;
float:left;
color:#0000FF;
}

 

Now visual users who have browsers that support CSS2 should see a large initial letter "N" coloured blue. Visual users who do not have CSS2 capability will see a normal capital N at the beginning of the paragraph. Users of assistive software will also get a normal letter "N" at the beginning of the paragraph because their software ignores the stylesheet.

There is another psuedo element in CSS2 called "first-line". This element formats the first sentence, or until a line break (br) is reached. Great care should be taken not to use this class when a heading (h2 to h6) is more appropriate. These pseudo elements are purely visual attributes and provide no structural information to assistive software, text-only browsers or search engines.