Mark-up and style sheets
Access barriers
Guidelines for overcoming access barriers
Activity
Access barriers
- Mark-up that is not done according to specification will not be recognised by specialised software and technologies that have been designed to understand how a page is organised to navigate through it.
- Presentation mark-up in place of structural mark-up makes it difficult for pages to be rendered intelligently to other devices (for example, using the FONT SIZE= tag to indicate a heading instead of using cascading style sheets (CSS)).
Back to top
Guidelines for overcoming access barriers
- Understand the difference between structural elements and design elements of your website. For example, H1 and STRONG provide structure and FONT and B determine how the structure will be presented. More information on separating structure from presentation
- Control layout and presentation by using cascading style sheets. For example, use the CSS 'font' property instead of the HTML FONT element to control font styles. CSS EXAMPLE 2
- Ensure that your documents still make sense without style sheets, for cases where style sheets have been turned off or are not supported. CSS can be easily turned on or off using the Web Accessibility Toolbar for Internet Explorer or the Web Developer Extension for Firefox
- Don't use images to convey information that could be conveyed using mark-up. For example, use MathML to mark up mathematical equations and use cascading style sheets to format headings. MARK-UP EXAMPLE 4
- Use relative units in mark-up language attribute values and style sheet property values instead of absolute units. This allows the user to increase (or decrease) the font sizes on a page through their browser control bar for easier reading. MARK-UP EXAMPLE 5
- Use header elements to convey the structure of a document. For example, in HTML use H2 to indicate a subsection of H1. Do not use headers merely to style text. Header elements should be used for structure only. MARK-UP EXAMPLE 6
- Mark up all the lists and list items properly. Ensure that ordered lists (OL), unordered lists (UL) and definition lists (DL) are nested correctly. MARK-UP EXAMPLE 7
- Mark up quotations properly. Avoid quotation mark-up for formatting effects such as indentation. For example, in HTML use the BLOCKQUOTE element to mark up long quotations. MARK-UP EXAMPLE 8
Back to top
Activity
Use the checklist below to assess any accessibility barriers that your website may present as a result of using mark-up and cascading style sheets. If you have ticked 'no' for any item, go back to the Guidelines for how to overcome this barrier.
Using mark-up and cascading style sheets
Cascading style sheets have been used to control layout and presentation.
Mark-up has been used to convey information rather than images.
Documents still make sense without style sheets.
Relative (as opposed to absolute) units have been used in mark-up language attribute values and style sheet property values.
Header elements have been used to convey document structure.
Correctly marked-up lists and list items in HTML have been used.
Quotations have been correctly marked up in HTML.
Back to top
