HTML changes needed for
508
Compliance
Following will be the HTML changes that will be
required in any web page for making it “508 compliant”. This will be used by
JAWS to read out the controls specifically and also to announce the activity
done on the control by the users of the web page.
1. Text Inputs
<label
for="name">Name:</label>
<input id="name"
type="text" name="textfield" />
To make sure JAWS application reads
the textbox, we need to add the label tag with “for" attribute.
2. Textarea
<label
for="address">Enter your address:</label><br />
<textarea id="address"
name="addresstext"></textarea>
To make sure JAWS application reads
the textarea, we need to add the label tag with “for" attribute.
3. Checkboxes
<input id="ham"
type="checkbox" name="toppings" value="ham" />
<label
for="ham">Ham</label><br />
<input id="pepperoni"
type="checkbox" name="toppings" value="pepperoni"
/>
<label
for="pepperoni">Pepperoni</label><br
/>
To make sure JAWS application reads
the checkboxes, we need to add the label tag with “for" attribute.
4. Radio Button
<input id="overnight"
type="radio" name="shipping" value="overnight"
/>
<label
for="overnight">Overnight</label><br />
<input id="twoday"
type="radio" name="shipping" value="twoday" />
<label
for="twoday">Two day</label><br />
To make sure JAWS application reads
the Radio Button, we need to add the label tag with “for" attribute.
5. Dropdown List
<label
for="favcity">Choose your favorite city?</label>
<select id="favcity"
name="select">
<option
value="1">Amsterdam</option>
<option
value="2">Buenos Aires</option>
<option
value="3">Delhi</option>
<option value="4">Hong
Kong</option>
</select>
To make sure JAWS application reads
the DropDown List, we need to add the label tag with “for" attribute.
6.
Buttons
<input
type="submit" name="submit" value="Submit Search"
/>
<input
type="reset" name="reset" value="Reset" />
The buttons will be accessible as long as you use a standard
button that has a descriptive value. The value attribute will be read by screen
readers when the button is accessed.
7.
Image Button
<input type="image"
name="submitbutton" alt="submit!"
src="submit.gif" />
To make sure JAWS application read
the image, we need to add the “alt” attribute.
8.
Skip Navigation
People
using screen readers are often forced to listen to a long list of navigation
links, sub-lists of links, corporate icons, site searches, and other elements
before ever arriving at the main content.
Provide a link at the top of the page
which jumps the user down to the main content.
9.
Designing for Color-blindness
When
designing web content for people who are color-blind you do NOT have to convert
all of your images to black and white or get rid of your images entirely.
Make sure that
colors are not your only method of conveying important information.
10.
Frames
The
proper frameset
doctype lets screen
readers(JAWS) and other browsers know that the document consists of multiple
frames.
Notice
the proper
doctype and descriptive,
yet brief frame titles in this example code of an accessible frame.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<head><title>A page that contains
frames</title></head><frameset cols="15%,
85%"><frame src="menu.html"
title="Navigation menu" name="menu"><frame
src="content1.html" title="Main
content"
name="content"><noframes><p>This frameset document
contains:</p><ul><li><a
href="menu.html">Page navigation</a></li><li><a
href="content1.html">Main content</a></li></ul></noframes></frameset></html>
11.
Making up of DataTables
In
order for a data table to be accessible, it must have the proper markup in the HTML. When the
proper HTML
markup is in place, users of screen readers(JAWS) can navigate through data
tables one cell at a time, and they will hear the column and row headers spoken
to them.
|
Shelly's
Daughters
|
||
|
Name
|
Age
|
Birthday
|
|
Jackie
|
5
|
April 5
|
|
Beth
|
8
|
January 14
|
<table border="1"
align="center"><caption>Shelly's
Daughters</caption><tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Birthday</th></tr><tr><th scope="row">Jackie</th><td>5</td><td>April
5</td></tr><tr><th scope="row">Beth</th><td>8</td><td>January
14</td></tr></table>
The
scope attribute tells
the browser and screen reader that everything under the column is related to the
header at the top, and everything to the right of the row header is related to
that header.
The header and id
attribute
Another
way to accomplish the same purpose is to use the
headers and id attributes. This
method is NOT recommended for simple tables.|
Shelly's
Daughters
|
|||
|
|
Name
|
Age
|
Birthday
|
|
by
birth
|
Jackie
|
5
|
April 5
|
|
Beth
|
8
|
January 14
|
|
|
by
marriage
|
Jenny
|
12
|
Feb 12
|
The
markup looks like this:
<table border="1"><caption>Shelly's
Daughters</caption><tr><td> </td><th
id="name">Name</th><th
id="age">Age</th><th id="birthday">Birthday</th></tr><tr><th rowspan="2" id="birth">by
birth</th><th id="jackie">Jackie</th
><td headers="birth
jackie age">5</td><td headers="birth
jackie birthday">April
5</td></tr><tr><th
id="beth">Beth</th><td
headers="birth beth age">8</td><td headers="birth
beth birthday">January
14</td></tr><tr><th id="step">by marriage</th><th id="jenny">Jenny</th><td headers
="step jenny age">12</td><td headers="step
jenny birthday">Feb
12</td></tr></table>
Again,
it should be emphasized that this method is more complex. It should be used
with tables of a more complex nature, where the
scope attribute will not
work.
No comments:
Post a Comment