Web Access Centre

Advanced CSS - Web Access Centre

Summary: Advanced CSS techniques and accessibility.

Rationale
Techniques
Testing tips
Further information
Website Accessibility Initiative compliance
Other pages about CSS

Rationale

Apart from the benefits of being able to concentrate on formatting and information structure separately, CSS offers some wonderful effects that simply aren’t available if your formatting is locked into the HTML code. This page will give you a few new ideas and hints and tips on some of the more advanced elements to accessible CSS.

The best CSS techniques enhance accessibility by enabling you to use structural markup where it should be used, but allow you to format it for more visual appeal. Navigation, for instance, should be a list of links, this provides screen reader users with valuable information, but maybe you really don’t want bullets appearing ahead of every navigation link.

Techniques

Style lists - Style lists for navigation so that a screen reader will announce the number of items in the list. This usefully lets the screen reader user know exactly how many options are in the navigation. Nested lists are also announced, indicating sub topics within the navigation

Although the default display for lists is vertically with the bullet or the number to the left of the text, CSS can be used to style this list in practically any way you choose. For example, to display a list horizontally without a bullet, all that is needed is to add the following code to your CSS file:

li {

display: inline;

list-style-type: none;padding-right: 20px;

}

From there, additional styling can be added using borders, background images and colours, and so on to suit the style of your site.

Text replacement techniques - These enable designers to use unusual fonts which may not be available as standard on the user’s computer. This allows web designers to create a particular look and feel to the site, but ensures that the text is still available and shown when CSS is not enabled.

Image replacement is the basic technique, which involves using CSS positioning to place an image of text where actual, rendered text would ordinarily be positioned. This can be done by either using z-index positioning to position the image directly above the text or by moving the text off screen.

Several ways of achieving this do exist, but at the time of writing, there appears to be only one technique which degrades successfully if either, or both, CSS and images are disabled or switched off. This is known as the Levin Alexander method, you will find a link to full information about it under the "Further Information" section later in this page.

However, this and every other image replacement method has inherent advantages and disadvantages. A useful comparison of several of these has been put together by Steve Clay, links to which can be found in the "Further information" section below.

In general, the main advantage to using image replacement is that it allows designers to use more specific fonts to maintain branding look and feel or a desired decorative appearance.

The largest drawback, however, particularly for screen magnification users, is that when viewed in a page with images and css both switched on, it will appear as an image of text which will not scale up in the way plain text does and may be difficult to read when magnified. We recommend, therefore, that use of this technique is sparing and carefully considered, and if applied, only used for the main heading on each page, which should be large enough to be magnified and remain readable.

The Flash replacement technique - This is also known as Scalable Inman Flash Replacement (sIFR) and uses JavaScript to detect the presence of flash, and if found, replaces defined elements with Flash objects which can display the same text in the designer's chosen font.

The advantage of sIFR over straightforward image replacement is that text scales up and down in accordance with the text size chosen in the user’s browser. It is also rendered more smoothly in Flash so stands up better to magnification. So if a user has their text size set to largest by default, the Flash text will be larger also. The text can also be resized, although this does require the page to be refreshed.

If Flash and/or JavaScript are not detected, the browser defaults to simple rendered text styled by CSS.

One word of warning, though, it is essential that you make the Flash as accessible as possible, and be aware that there may be an issue with Flash “trapping” screen readers within the Flash OBJECT. If this occurs, screen reader users who inadvertently tab into the Flash file, will be unable to get out again. As many screen reader users cannot use a mouse at all, they would not even have the option of clicking elsewhere on the page to get out of the Flash file, and may even have to close their browser to leave the page.

If you decide to make use of any image replacement methods, do remember that as much as it is important to have a good contrast in plain text and background colours, it is even more important if images of text are being used. Unlike colours in the CSS, the user has no control over colours in images, if they can’t read the text because the contrast is insufficient or because the colours chosen are difficult to distinguish for people with a colour deficiency, then your message will simply be lost.

Testing tips

Font sizes must be flexible i.e. em, %, smaller etc not pt or px. Text must not become overlapping or truncated when text is enlarged, images should be visible / readable when CSS is removed. If any of the text, link or background colours are defined, all of the other colours should also be defined.

Accessibility toolbar –CSS - Disable CSS. Toggles CSS off and on to ensure that the page makes sense without the CSS formatting and that text is replacing the images of text used. CSS - Show Style Sheet. This will show any linked CSS style sheets.
Browser - Tools - Internet Options - Accessibility check "Ignore colours on the page" to ensure that images are still readable. View - Source. Edit - Find "color" and "font" to ensure that formatting has been removed from the HTML pages.
Screen reader - Listen to the order of output – it should be logical and make sense.
Text browser - Ensure that the page reads in a logical order.

Further information

Levin Alexander method for image replacement of text - A full description of the technique can be found here
Ways that CSS can be used to style lists - Examples can be found on the Max Design Listamatic site.
List-O-Matic tool to generate navigation lists - Use the Accessify List-O-Matic tool to generate navigation lists to suit your own site.
Scaleable Inman Flash Replacement - Find out more about sIFR here.

Website Accessibility Initiative compliance

3.6 Mark up lists and list items properly. Priority 2
13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. Priority 3

Other pages about CSS

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41

Print Email