| home / authoring / design / usability / accessibility / 2 |    [previous][next] |
|
|
|
Making Your Web Site More Accessible
There are several things that can be done to make a Web site more accessible. Some are relatively simple; others require a little work.
The first thing you need to do is validate your site's HTML and CSS code. Both can be validated using the W3C's validators. For the HTML code, visit http://validator.w3.org/. To check your CSS style sheet, go to: http://jigsaw.w3.org/css-validator/. Both validators will check your file either online or on your local hard drive. A list of other validation sites is available on our Web site.
Once the HTML and CSS code is valid, you'll need to check to see if the page meets accessibility guidelines. A good site to use is Bobby, a service of Watchfire. Here you can check your page against both the Web Content Accessibility and the U.S. Section 508 guidelines.
Chances are that you've had some accessibility errors on the page. Common ones
include failure to provide alternative text for images (alt="Lorem
ipsum dolor"), failure to provide a summary for tables
(summary="This table gives some statistics about fruit flies: average
height and weight, and percentage with red eyes.">), and use of deprecated HTML code
(basefont, center,
font). Many of these are easy to fix by just using proper
coding techniques. Additional help can be found on the "Evaluation, Repair, and
Transformation Tools for Web Content Accessibility" page, furnished by the
W3C.
Cascading Style Sheets
Using Cascading Style Sheets (CSS) will help to make your site more accessible. The use of CSS separates the presentation of the document from its structure. This makes it much easier to control the layout of the page, the alignment of the text, fonts, character spacing, etc. By controlling the page layout through CSS, it eliminates the need for excessive HTML coding, which many times results from attempting to control the layout through the HTML code itself. CSS is also used to control audio output through the use of aural style sheets. Aside from the obvious use for those who are blind, aural style sheets can also be used for in-car listening, home audio systems, and in business. CSS also allows the user to override the site's style sheets and use their own, which, in many cases (i.e., color blindness) enables the user to remain on the Web site for a longer period of time. The W3C provides information about using CSS for accessibility: "Accessibility Features of CSS".
Navigation
Navigation can be one of the main problems in accessing your site, even for
someone without a disability. If you look on most computer program text menus
(like in your browser, at the top), you will see an underlined letter in each
command. In Windows Internet Explorer, if you hold down the [ALT]
key and press the underlined letter and the press [ENTER], you
activate that menu command. In a Mozilla-based browser, it would be
[ALT] + the underlined letter; on a Macintosh, using Safari, press
[CTRL] + the underlined letter. The W3C introduced the
accesskey attribute to enable the creation of the same type of
effect on Web site menus.
By just adding the accesskey attribute to your links, the process
itself will work: <a href="/articles/"
accesskey="a">articles</a>. However, it doesn't really stand
out and your user won't know that it's there. One method of making it stand out
is through the use of CSS. An example of this can be found on the Ontario
Ministry of Energy Web
site. (My thanks to Stuart Robertson for
the code below.)
First, the link itself must be set up:
<a href="http://www.designmeme.com/" accesskey="h"><em>H</em>ome</a>
Next, the code is further enhanced in the style sheet:
a {
text-decoration: none;
}
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
The finished product:
 |
Another method, using JavaScript, accesses the Document Object Model (DOM) to automatically insert the underline (my thanks to Richard Rutter for the code below. A complete explanation can be found on his Web site).
The CSS code must be established, either in the style sheet (the preferred method) or included on the page itself.
#navbar A {
text-decoration:none;
}
#navbar A SPAN {
text-decoration:underline;
}
Next, the JavaScript is inserted in the head of the document:
<script type="text/javascript">
<!--
function underline() {
var nav = document.getElementById('navbar');
var navlinks = nav.getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
var accesskey = navlinks[i].getAttribute('accesskey');
if (accesskey) {
var link = navlinks[i];
var linktext = link.childNodes[0].nodeValue;
var keypos = linktext.indexOf(accesskey);
var firstportion = linktext.substring(0,keypos);
var keyportion = linktext.substring(keypos,keypos+1);
var lastportion = linktext.substring(keypos+1,linktext.length);
link.childNodes[0].nodeValue = firstportion;
var s = document.createElement("span");
var span = link.appendChild(s);
var keyt = document.createTextNode(keyportion);
span.appendChild(keyt);
var lastt = document.createTextNode(lastportion);
link.appendChild(lastt);
}
}
}
window.onload = function() {
underline();
}
-->
</script>
And finally, in the navigation menu itself.
<div id="navbar">
<a href="/articles/" accesskey="a">articles</a> ::
<a href="/views/" accesskey="v">views</a> ::
<a href="/news/" accesskey="n">news</a> ::
<a href="/links.htm" accesskey="l">links</a> ::
<a href="/links.htm" accesskey="b">about</a>
</div>
And ... presto!
|
| home / authoring / design / usability / accessibility / 2 | [previous][next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: July 12, 2004
URL: http://webreference.com/authoring/design/usability/accessibility/2
