Guideline 6: Ensure that pages featuring new technologies transform gracefully
Developers are encouraged to embrace new technologies, but should consider that visitors may not necessarily have access to some or all of the features. Visitors may be using older browsers, or may choose to switch certain features off. If style sheets are unsupported, are your pages still usable?
This guideline has 5 checkpoints, ranging in importance from Level "A" (essential for the site to be accessible), to Level "AA" (should be addressed for the site to be considered accessible).
6.1
Organize documents so they may be read without style sheets
This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. Style sheets are the enabling factor for separating content from presentation, and also provide a mechanism that is far easier to maintain than a table-based design. When you use style sheets, you should also ensure that the content is readable when the style sheet isn't used. Consider the following style sheet, used to float some content to the right of the page.
example.css
#extrainfo
{
float: right;
width: 175px;
border: #663 3px double;
padding: 5px;
margin: 5px;
background: #fff;
color: #000;
}
The following HTML document may use the style as follows.
example.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>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import "example.css";</style>
</head>
<body>
<div id="extrainfo">
Something for the weekend.
</div>
<p xml:lang="la">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
If style sheets are not supported, the content for "extrainfo" will be displayed first, followed by the rest of the content. This arrangement is fine if the content for "extrainfo" should be read before the rest of the content. If the other content should be read first, the code should be re-arranged so that visitors who are not using style sheets see the content in the correct order.
6.2
Ensure that equivalents for dynamic content are updated when the dynamic content
changes
This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. Information that is updated in real-time is dynamic content. News tickers are quite common, whereby information is continually scrolled across the screen. If the content contains links, visitors with limited mobility may have difficulty clicking on a moving link. Moving content can also be difficult for visitors with poor eyesight, or reading difficulties. You should provide a text only version of dynamic content. In the case of a news ticker, you could present the whole of the news as text should the ticker not be used.
The object element allows you to embed content so that if the object is not supported, the embedded content is used. This can be nested several times, to provide alternatives. For example, if you have an applet, you may consider providing a movie as an alternative should the applet not be supported. You could then provide embedded text, should neither the applet nor the movie be supported.
<object classid="java:News.class" width="500" height="300">
<object data="news.mpeg" type="video/mpeg">
<ul>
<li><a href="news1.html">News
1</a>.</li>
<li><a href="news2.html">News
2</a>.</li>
<li><a href="news3.html">News
3</a>.</li>
</ul>
</object>
</object>
If you use frames to deliver content, then the value for the "src" attribute of the frame should be an HTML document. This allows you to markup the content on that page correctly. If you provide some other value for the source, for example an image, then you won't be able to provide the appropriate markup for the image. Using HTML documents for the source allows you to ensure the dynamic page is accessible.
6.3
Ensure that pages are usable when scripts, applets, or other programmatic objects
are turned off or not supported
This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. You should ensure that your content is still available should scripts or objects not be supported. You should provide an equivalent alternative for any scripts that you use. DHTML is a popular technique to enhance functionality by combining JavaScript, CSS, and HTML to deliver dynamic pages. Typical applications of DHTML are pop-up menus, headline faders, colour mixers, etc. These scripts must be available to visitors who do not have JavaScript enabled. The noscript element may be used to provide alternatives for client-side scripts.
<script type="text/javascript" src="/menu.js"></script>
<noscript>
<ul>
<li><a href="page1.html">Page 1</a>.</li>
<li><a href="page2.html">Page 2</a>.</li>
<li><a href="page3.html">Page 3</a>.</li>
</ul>
</noscript>
6.4 For scripts and applets, ensure that event handlers are input device-independent
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. An event handler is a hook to a script. Programming and scripting languages allow you to specify events you would like to catch, and then associate code for the action to take when that event occurs. HTML has a series of built-in event handler triggers.
- onload
- onunload
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onfocus
- onblur
- onkeypress
- onkeydown
- onkeyup
- onsubmit
- onreset
- onselect
- onchange
These events can be categorised into application-level event triggers, and interaction-level event triggers. An application-level trigger (such as onsubmit) is device independent. As a rule, you should use application-level event triggers for your code. Interaction-level event triggers require some input by the user. In circumstances where user interaction is required, you should ensure that the event handlers aren't dependent on a particular input device, such as a mouse. A technique to achieve this is to provide a keyboard equivalent for a mouse event. Keyboard events tend to be friendly with assistive technologies, and can be voice activated.
The following example uses JavaScript to open a new window. If JavaScript isn't enabled, the page is opened in the current window. If JavaScript is enabled, then clicking on the link, or pressing a key when the element has focus will cause a new window to be launched.
<a href="somewhere.html"
onclick="window.open(this.href); return false;"
onkeypress="window.open(this.href); return false;">Somewhere</a>
(Opens in a new Window if JavaScript is enabled)
6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page
This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. Your pages should present dynamic information in an accessible manner. If you cannot provide accessible dynamic content, you should provide a means to navigate to a page where the same information is presented in an accessible format. You should avoid creating content on the fly using client-side scripting. A better alternative is server-side scripting (ASP, PHP, PERL, etc) for dynamic content, as it doesn't depend on the visitor's user agent.
The link element may be used to designate alternative documents. User agents that support the link attribute will load the alternative page automatically based on the user's browser type and preferences.
<link title="Text only version"
type="text/html"
rel="alternate"
media="aural, braille, tty"
href="http://www.domain.com/altdoc.html" />
If you use frames, you should provide an alternative through the noframes element. The alternative should provide access to equivalent information, not inform the visitor that they need a frames enabled browser to view the content.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Your Title</html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<frameset cols="30%, 70%" title="Your document title">
<frame src="navigation.html" title="Site navigation" />
<frame src="main.html" title="Main content area" />
<noframes>
<body>
<p>
<a href="navigation.html">Table of Contents</a>.
<!-- Any other content required added here -->
</p>
</body>
</noframes>
</frameset>
</html>
Comments