Benefits of CSS styling and layouts
Using an external Cascading Style Sheet (CSS) to separate the structure and presentation of your web site can greatly improve its accessibility to many people:
- Good use of CSS goes hand in hand with improved structural coding of your HTML pages. HTML elements are used for their correct purpose and not for their default style attributes; code is cleaner and more easily maintained. The W3C have identified using CSS as a priority 2 checkpoint of the Web Content Accessibility Guidelines.
- Text-only browsers and screen readers benefit as they can take advantage from this enhanced structural information to improving within-page browsing. For example, a screen reader can allow direct navigation between page headings, but only if HTML heading elements (e.g. H1) are used. If text is marked up to resemble headings, this potential benefit is lost. The same goes for table headings, the absence of which can mean a data table becomes almost incomprehensible when heard using a screen reader.
- People who experience readability problems caused by the appearance of a page can choose to view it without the style sheet or, if they know what to do, replace it with their own user-defined style sheet. You will have to ensure that this is possible; don't stop your styles from being overridden by declaring them as ‘!!important’ and ensure that all font sizes are relative, not fixed.
- Many people with visual impairments may be unaware of user-defined style sheets. However, using CSS allows you with relative ease to provide alternative styles of the same page content, addressing some common readability problems. For example, in addition to the 'default' style, you could offer a 'larger text size' option, or a 'light text on dark background' option. Doing this by no means meets the needs of all visual impairments, but is a relatively low-effort attempt at providing clear and obvious accessibility features.
- Media-specific style sheets can be linked to a site to cater for differences in its presentation in various browsers. A separate style sheet can be linked to determine how the page might sound in a text-to-speech device and a print style sheet to display the content appropriately for printer-optimised versions of a page. For example, you may want to use CSS to change the flow of information of a page in a non-graphic environment - navigation bars appearing at the end of pages (or not at all).
Of course, it's still extremely important to ensure that your site is just as accessible and easily used when styles are turned off. This is in fact a higher priority WCAG than the one that requires you to use CSS!
CSS are resource and time-savers too. As the CSS file is only downloaded once and all pages in the site use the same file, your site will be quicker to download and use. One CSS file allows a site-wide change to be made to one file; the change is then applied to every page referencing that CSS file.
