Library tutorials & articles
Accessibility for Web Developers
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>
I'm available for contract work. Please visit Juicify for details.
Related articles
Related discussion
-
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)
-
Variable In Vb.Net
by chia (0 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.