Guideline 6
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>