Library tutorials & articles
Accessibility for Web Developers
Guideline 3
Guideline 3: Use markup and style sheets and do so properly
Using markup incorrectly has an adverse affect on the usability of your pages. For example, using tables for layout rather than tabular data can cause accessibility issues for some visitors. It's important to use markup elements for their intended purpose, rather than presentation. Developers should separate content from presentation, ensuring the content is marked up correctly, and the presentation elements are provided through style sheets.
This guideline has 7 checkpoints, each with an importance of Level "AA" (should be satisfied for a site to be considered accessible).
3.1 When an appropriate markup language exists, use markup rather than images to convey information
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. You should avoid using images to represent text. Instead, you should markup the text with style sheets, to ensure the content is still available for visitors unable to see images. If an appropriate markup language exists, you should use markup to display the content rather than images. For example, if you want to display a mathematical equation, use MathML to markup the equation rather than display the equation as an image.
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>3</mn>
<mo>&invisibletimes;</mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
3.2 Create documents that validate to published formal grammars
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. All documents should be validated against a published formal grammar. This involves specifying a DOCTYPE for the Document Type Definition (DTD), and ensuring the elements and attributes follow the legal structure defined in the DTD. The following example shows the minimum content required for an XHTML 1.1 document.
minimal.html
< !DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Your Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<p>Body content written in here</p>
</body>
</html>
You should use validation services to ensure that your documents conform to the specifications. The W3C provides an HTML validation service, and a CSS validation service.
3.3 Use style sheets to control layout and presentation
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Content should be separated from presentation,
and style sheets provide an excellent means of achieving this. Style Sheets
are the enabling factor that can ensure your site looks professional, and is
accessible at the same time. Avoid using deprecated elements such as <center> and <font> to
style your pages, and use style sheets instead.
div.newsItem
{
font: normal 1em/1.3em Verdana, helvetica, sans-serif;
text-align: center;
background-color: #fff;
color: #000;
}
The following are some excellent tutorials that illustrate how to layout pages in pure CSS.
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. Units of Measurement such as picas (pc), points (pt), inches (in), centimetres (cm), and millimetres (mm) are absolute units. These measurements are always the same, perhaps with the exception of boys describing their manhood to girls. As they're absolute sizes, the visitor cannot resize them should the text be too small. Specifying your units in relative sizes allows the visitor to adjust the size. For example, if you specify your font size in em (the font height of an element) or percentages, visitors will be able to adjust the size of the text.
body
{
font: normal 1em/1.3em Verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}
3.5 Use header elements to convey document structure and use them according to specification
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Header elements should be used correctly
to show the semantic structure of your page. All pages should use <h1> for
the title, and subsequent header elements should be used to show subheadings.
Never use header elements purely for display purposes, such as increasing the
size of text, as this destroys the semantics of the document. Assistive technologies
such as screen readers determine the structure of the document by the headers
provided.
3.6 Mark up lists and list items properly
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. The list elements <dl>, <ul>,
and <ol> should only be used for lists, and not for formatting
effects such as indenting the content. Whilst visual user agents can show the
structure of nested lists from their indentation, information can be lost on
non-visual visitors. Developers should include contextual clues with nested
lists, in order to aid the visitor's understanding of the structure.
3.7 Mark up quotations
This checkpoint is a priority 2 checkpoint. It should be satisfied for your
site to be considered accessible. Quotations should be marked up using the <q> element,
or the <blockquote> element.
The <q> element is an inline element.
<q>Keep it simple!</q>
The <blockquote> element is a block element, useful for
large quotes.
<blockquote cite="http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-quotes">
<p>
Do not use quotation markup for formatting effects such as
indentation. [Priority 2]
</p>
</blockquote>
As with all other elements, never use quotation elements for formatting effects, such as indenting content.
I'm available for contract work. Please visit Juicify for details.
Related articles
Related discussion
-
Read eMails from Outlook express using ASP
by kumaravelu (1 replies)
-
Help to Call ASP function from onclick event in HTML to pass an array
by vka (0 replies)
-
Binary Studio | software development outsourcing Ukraine
by shane124 (4 replies)
-
$200 Website Design and Development
by manypeopledesign (1 replies)
-
Dallas Interactive Marketing & Internet SEO SEM October Meetup
by dsafmx (4 replies)
Related podcasts
-
Episode 15 Bug Review
In this episode Matthew and Federico sit down to talk about some interesting bugs and lessons learned that our team has run across while testing ASP.NET. This is a different type of show that we are experimenting where the bugs take center stage.News *Silverlight 3 is releasedBugs Showca...
My question is related to implementing Accessibility when using a datagrid, a datalist, XML, and/or a database. All the info has been advocated in many circles and I would like to comply using ASP.NET and XML.NET.
In many cases we are writing our ASP.net code to give access to data that is already in place and has been used for a considerable amount of time. The biggest problem is that many databases and XML files are already set in place and we cannot change the data ( or the powers that be are unwilling to do so). Likewise we are not in a position to add columns to the information in support of addressing Accessibility issues (for ex. a column for dynamic insertion of an ALT tag to explain images stored inside of the database, addition of supportive information (summary, caption, and scope) when tabular data is dynamically built from an XML data file as in
<table width="90%" border="0" cellpadding="4" summary="this summary">
<caption>
this caption
</caption>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
AND / OR a dynamically built link that usually would be <a href="http://www.here.com" target="_blank">go here</a>
but really should be constructed as the code below for Accessibility reasons
<a href="http://www.here.com" tabindex="3" title="A location to enjoy" accesskey="1" target="_blank">go here</a>
So what can we do to increase Accessibility in these instances beyond adding to the XML or the database?
Another issues to address would be in dynamic paging of a datagrid where the use of numeric or alpha characters are used to paginate through the data.
This thread is for discussions of Accessibility for Web Developers.