digital media access group

...excellent accessibility research and consultancy

skip to main page content.

•  home  
• services  
• resources  
• research  
• about us  
• site map

home >  

CSS-related Accessibility Problems

By Nicola McIlroy, published 22nd March 2004.

In the majority of cases, use of CSS should improve accessibility through improvements to presentation and layout; however, misuse can result in some significant accessibility problems.

The main accessibility problem caused by CSS occurs when style sheets are used incorrectly along with non-semantic HTML elements as a substitute for proper structured markup [1]. This causes a number of accessibility issues:

• Headings, lists, paragraphs, quotes, and inline elements such as strong and em should not be replaced with non-semantic elements like div, span or centre used with id attributes such as "heading1" to identify the element. Although this uses CSS to style the text to look like headings, lists, paragraphs, or inline elements, it is not correctly marked up as such [1].
  
  For an example of the <span> tag being used to style text to appear like a heading, see http://www.mcu.org.uk/articles/cssaccessproblems.
  
  People accessing the internet by visual means alone can get a quick overview of the content of a page just by looking at the headings. People browsing the web using text-to-speech devices may also be able to navigate from heading to heading if the device can detect headings - but without appropriate markup this cannot be achieved.
  
  Speech enabled browsers can also use explicit verbal intonation when they encounter text enclosed between HTML header tags (<h1> </h1>). This instructs the program to pause before and after a heading, and read it more slowly than the rest of the text. This helps to makes the document much clearer to understand [2].
  
  
  
• Inappropriate markup reduces the effectiveness of search engine indexing software. Many search engines and spiders (Altavista, Google, etc.) give extra weight and importance to the text found inside HTML heading sections.3  Descriptive headings can improve a page's showing in search engine indexing. To find out more visit http://www.globalsecurity.org/cyber/seo.htm.

Use of CSS elements that cannot be overridden by a user's own personal style sheet can cause accessibility and usability problems. Declaration of style sheet properties as !important, may prevent the user from making essential changes to that the display of Web pages.

A downside to CSS is cross browser and cross platform support, particularly for CSS positional properties such as 'float'. CSS-based pages may look terrible in some older browsers, such as version 4 of the Netscape browser, where information may actually be obscured or missing. This is why the WCAG specifies that web pages must be accessible when styles aren't available or when they are turned off [4]. Lack of support amongst older browsers should not prevent developers using CSS to improve accessibility - instead the key is to make sure that information can be accessed in these older browsers, even if pages may not look too pretty [3].

And using CSS still requires you to be careful when specifying text and background colours, to avoid low-contrast or problematic colour schemes. Using CSS to alter the appearance of text can introduce specific usability problems - we've seen sites that use CSS hover properties for hyperlinks that result in the link text 'disappearing' due to a complete lack of contrast with the background, or links where the text size changes unexpectedly when the mouse pointer is moved over them!

Conclusion

The introduction of Cascading Style Sheets to control formatting and display can certainly enhance the accessibility and usability of web pages, but only when accessibility and usability are properly considered during design.. Correct implementation of CSS depends on proper application of structurally sound HTML.

For design tips on what to do and what not to do when using CSS, take a look at these sites:

• W3C Note - Accessibility features of CSS (http://www.w3.org/TR/CSS-access)
• W3C - Cascading Style Sheets ( http://www.w3.org/Style/CSS/)
• W3C CSS Techniques for Web Content Accessibility Guidelines 1.0 ( http://www.w3.org/TR/WCAG10-CSS-TECHS/)
• CSS layout techniques for Fun and Profit (http://glish.com/css/)
• Digital Media Access Group Why Using CSS Improves Accessibility - (http://www.dmag.org.uk/resources/design_articles/csstoimprove.asp)
• CSS Does not Guarantee Accessibility: http://diveintomark.org/archives/2002/02/17/css_does_not_guarantee_accessibility

References

1. MCU - CSS accessibility problems: is markupdead? ( http://www.mcu.org.uk/articles/cssaccessproblems)
2. Re: CSS accessibility problems: is markupdead? (http://lists.w3.org/Archives/Public/w3c/w3cwai-ig/2002AprJun/0410.html
3. Alabama Technologies - (http://www.alabamatechnologies.com/resources/css-03.asp)
4. Web Content Accessibility Guidelines (WCAG): Checkpoint 6.1 Organise documents so that they may be read without style sheets.