2.5 Use style sheets to control layout and presentation
Contents
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.
Rationale
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.
See the WAI recommended techniques for using text instead of images, CSS layout, positioning, layering and alignment and CSS text formatting and 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/
Guidelines for Web Accessibility - Priority 2- 2.1 Ensure that images have sufficient contrast for people with colour deficient vision
- 2.2 Avoid causing content to blink
- 2.3 Avoid movement in content
- 2.4 Ensure that dynamic content is accessible or provide an alternative presentation or page
- 2.5 Use style sheets to control layout and presentation
- 2.6 Use relative rather than absolute units
- 2.7 Use header elements to convey structure
- 2.8 Break up large blocks of information where appropriate
- 2.9 Ensure that information laid out using tables make sense when linearised, or provide an alternative equivalent
- 2.10 Do not use structural mark-up to format information laid out using tables
- 2.11 Describe the purpose of frames and how they relate to each other if it is not obvious by their titles alone
- 2.12 Clearly identify the target of each link
- 2.13 Provide information about pages and sites in metadata
- 2.14 Provide information about the general layout of a site
- 2.15 Use navigation mechanisms consistently
- 2.16 Associate labels explicitly with their controls
- 2.17 Properly position the labels of form controls
- 2.18 Ensure that user interfaces are device-independent
- 2.19 Use logical event handlers in scripts
- 2.20 Use input device-independent event handlers in scripts and applets
- 2.21 Ensure that scripts and applets are accessible
- 2.22 When an appropriate markup language exists, use markup rather than images to convey information
- 2.23 Create documents that validate to published formal grammars
- 2.24 Mark up lists and list items using the proper HTML tags
- 2.25 Use quotation mark-up for quotations, but not for formatting
- 2.26 Where possible, use appropriate W3C technologies of the latest supported versions
- 2.27 Avoid deprecated features of W3C technologies
- 2.28 Do not periodically auto-refresh pages
- 2.29 Do not use mark-up to redirect pages automatically
- 2.30 Do not generate pop-ups or other windows and do not change the current window without informing the user
