2.5 Use style sheets to control layout and presentation
WAI Checkpoint 3.3
Full WAI text: "Use style sheets to control layout and presentation."
Style sheets are used to define the presentation aspects of a web page, such as the fonts, sizes and colours used for text, headings and hyperlinks and the positioning of elements on the page. As far as possible, these should be used in place of hard coding element properties in the HTML.
Using style sheets separates structure and presentation which brings several benefits, including improved accessibility, manageability, and portability.
Structure relates to the logical organisation of content. For example, an online form for a mortgage application might be broken up into logical sections such as personal information, employment details, house details, and so on. This logical structure will be the same for all users, but can be presented in many different ways, depending on the users' different needs and preferences. For example, in a detailed multiple-column graphical presentation making use of subtle colour cues, a single column using large text in high-contrast colours or as synthesized speech.
Accessibility is improved because users can choose between different styles and may even override the defined style sheets with their own. These could include larger font sizes or different colour schemes to improve legibility. Separating presentation and structure facilitates device independence, making it is easier to tailor the presentation to different browsers or user agents. Using style sheets also reduces the file size of web pages and speeds up download time, which is helpful for user who may be working with a slow connection. Style sheets help management and maintenance by allowing rapid changes to the visual appearance of a website. With style sheets, if there is a requirement to alter the presentation of a site, it can be done once, at the style sheet level, rather than on each separate page at the element level.
Directions and Techniques
Separate structure and presentation at the design stage
Design the structure of documents or web pages before thinking about how they will be presented to the user. Read the WAI guidance on separating structure and presentation
Use the accessibility features of Cascading Style Sheets (CSS)
Cascading Style Sheets provide many accessibility features. Refer to http://www.w3.org/TR/CSS-access for detailed technical explanations and examples of CSS accessibility features.
Use text and style sheets to control presentation, rather than relying on images
Layout, positioning, layering, and alignment can be done through style sheets. Using text instead of images makes the information on a web page available to a greater number of users (with speech synthesizers, Braille displays, graphical displays, etc.). If the presentation of the text is controlled with style sheets, the designer can still control the visual appearance using style sheet techniques such as floats and absolute positioning.
Use the proper HTML elements to mark up emphasis
Use the EM and STRONG elements to indicate structural emphasis. This may then be rendered in a variety of ways (font style changes, speech inflection changes, etc.) by browsers, screen readers and other user agents. These elements should be used in favour of the B and I elements. See the WAI recommended techniques for marking up text emphasis
Refer to the WAI recommended techniques for this guideline
See the WAI recommended techniques for using style sheets to control layout and presentation
How you could check for this:
Test with the W3C CSS validator
Available from http://jigsaw.w3.org/css-validator/