Large initial letter (Drop Caps)

Sometimes 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;
}