Understanding Accessibility
by Vivienne Trulock
Guideline 3. Use markup and style sheets and do so properly.
This guideline’s purpose is to ensure that as much content as possible is provided without resorting to images. This ensures that screen readers can parse the document to the greatest extent.
There are 7 specific checkpoints in Guideline 3, all at priority 2.
| No. | Checkpoint | Priority | How to check | Disability Accommodated |
|---|---|---|---|---|
| 3.1 | When an appropriate markup language exists, use markup rather than images to convey information | .Priority 2 | . Manual check for 3.1 | Blind |
| 3.2 | Create documents that validate to published formal grammars | .Priority 2 | .Manual check for 3.2 | Blind |
| 3.3 | Use style sheets to control layout and presentation | .Priority 2 | .Manual check for 3.3 | Blind Partially Sighted Colour Blind |
| 3.4 | Use relative rather than absolute units in markup language attribute values and style sheet property values | .Priority 2 | .WebXact Automatic check | Partially Sighted Mobility Impaired |
| 3.5 | Use header elements to convey document structure and use them according to specification | .Priority 2 | .WebXact Automatic check, Manual check for 3.5 |
Blind Cognitive |
| 3.6 | Mark up lists and list items properly | .Priority 2 | . Manual check for 3.6 |
Blind |
| 3.7 | Mark up quotations. Do not use quotation markup for formatting effects such as indentation | .Priority 2 | . Manual check for 3.7 | Blind |
Checkpoint 3.1 - When an appropriate markup language exists, use markup rather than images to convey information
How do I do it?
Simply use style sheets where ever possible in favour of images. For example, buttons can be made using CSS which look identical to standard images buttons but are accessible, because they use a background image and text, rather than just one image.
Use a markup language like MathML to markup formula, rather than creating images.
Make properly coded HTML tables rather than images with a visual table.
How do I check that it meets the WCAG criteria?
Pages can be checked by opening the associated image file and viewing the images as thumbnails. Pages with images which contain elements which could be marked up with style sheets (such as those which simply contain text and a background colour) should be marked as failing the check as this is simple to achieve with style sheets.
Pages with images which contain formula will also fail the check as this should be marked up using the MathML markup language.
Checkpoint 3.2 - Create documents that validate to published formal grammars
How do I do it?
Documents must comply with formal grammar specifications, otherwise some assistive technologies or legacy systems will be unable to render them correctly.
Formal grammar specifications are available from the w3c: CSS1 specification, CSS2 specification, HTML 4.01 specification, XHTML specification, MathML specification. The CSS3 specification is still under construction.
How do I check that it meets the WCAG criteria?
To ascertain the validity of the page grammar, the pages can be checked at html validator (for HTML and XHTML), css validator (for CSS1 and CSS2).
Pages which fail any applicable test will be deemed to have failed the check. Where XHTML files fail the check and the associated css files cannot be assessed, the css file can be tested separately using the ‘validate css by file upload’ option.
Checkpoint 3.3 - Use style sheets to control layout and presentation
Style sheets are promoted as they can be turned off by the user using the accessibility options available in many browsers, as follows:
- Internet Explorer: Tools > Internet Options > Accessibility options
- Netscape: View > Page Style > No Style
- Firefox: View > Page Style > No Style
This can be useful for some dyslexic individuals who find it easier to read using various colour schemes, and for colour blind individuals who may find it difficult to see page elements using the given colours.
How do I do it?
Use en embedded or external style sheet to control your page layout and presentation. Many css tutorial web sites are available to help you learn this skill.
How do I check that it meets the WCAG criteria?
This check is purely to ascertain whether style sheets were used, not whether they are grammatically correct. Pages which have neither a linked or embedded style sheet (as verified by testing in guideline 3.2) will fail the check. Sites using frames should have a style sheet on or linked from each framed page.
Checkpoint 3.4 - Use relative rather than absolute units in markup language attribute values and style sheet property values
How do I do it?
Use percentages or ems rather than pixels (see line-height below) and use relative font sizes such as small or large (see font-size below).
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666666;
font-size: small;
}
How do I check that it meets the WCAG criteria?
WebXact claims to validate this checkpoint, however I believe it only checks the HTML and not the CSS stylesheet. To check your HTML, run your page through webXact's accessibility checker.
Checkpoint 3.5 - Use header elements to convey document structure and use them according to specification
Header elements should be marked up correctly to facilitate page scanning by screen reader users. Use header elements to convey document structure.
How do I do it?
Some people believe that there should be only one level 1 <h1> header on the page. Other believe that you can have more than one. Whichever you choose, apply it consistently across pages. In any case, <h1> should be the first header on the page when the HTML code is viewed.
Subsequent headers should follow a logical order. <H2> should be used to denote a subset of <H1>
And <H3> should denote a subset of <H2>.
Each header should be preceded by a header one level up from it, except when starting a new section. For example, the ordering of <H1><H2><H3><H3><H2><H3> is ok, but <H1><H3><H2><H4> is not. In particular, do not use headers for font effects.
How do I check that it meets the WCAG criteria?
webXact's accessibility checker can verify that headers may not be used correctly, but asks you to check them manually too.
Dreamweaver’s Edit > Find tool, using the search string ‘<H’, can be used to identify all the page headers.
Pages which have words or phrases marked up with header tags which clearly are not headers (not followed directly by a paragraph or another header) will fail the check.
Checkpoint 3.6 - Mark up lists and list items properly
How do I do it?
Listed elements should be text based and have a context, which can be navigational, explanatory, etc. List tags should not be used for formatting effects, as this can confuse screen reader users.
Use <UL>, <OL> and <LI> for lists.
<li>To promote accessible design</li>
<li>To enable website designers to receive feedback on their web sites from real users, disabled and otherwise</li>
<li>To create a forum where the user population can give voice to their opinions and complaints regarding the accessibility and usability of particular web sites</li>
</ul>
Style with style sheets
font: small/150% Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
text-align: justify;
list-style: circle;
}
How do I check that it meets the WCAG criteria?
Elements which are listed and not text based or contextualised are deemed not to be correctly marked up. For example, the <LI> tag should not be applied to non-list items such as a vertical or horizontal line used to visually space out a list. Pages which use list markup incorrectly will be deemed to have failed the check.
Checkpoint 3.7 - Mark up quotations. Do not use quotation markup for formatting effects such as indentation
The use of <Q> and <BLOCKQUOTE> to markup quotations, facilitates assistive technologies to render the page correctly.
How do I do it?
Short quotations of 10 words or less should use the <Q> tag for markup. Long quotations of 11 words or more should use the <BLOCKQUOTE> tag.
<Q> tags automatically put in the quotes for you, so you don't have to.
Blockquotes naturally indent longer quotes
How do I check that it meets the WCAG criteria?
Where quotations are visible on the page, the code should be checked for both <Q> and <BLOCKQUOTE> in Dreamweaver or Notepad using the Edit > Find command and the search strings '<Q>' and '<BLOCKQUOTE>'.
Quotations not using either tag will fail. Quotations using the wrong tag for its length will fail.
Text enclosed with quotes which does not have a source referenced is not deemed a quotation. It is to be regarded as emphasis and will fail this check.
