Transcript Row and column headers shall be identified for data tables

IBM Research
Ensuring an Accessible Web
Presence –
Give Your Website an Accessibility
Makeover
Shannon Rapuano, IBM Accessibility Center
[email protected]
Don Barrett, Department of Education
[email protected]
IDEAS Conference, November 2003
© 2002 IBM Corporation
Agenda
Web Accessibility Overview
Makeover techniques to fix four Web Accessibility issues
•
Frames
•
Images
•
Data tables
•
Forms
“Before and “After” Web Sites - listening with IBM Home Page Reader
Testing Strategies
References
© 2002 IBM Corporation
Web Accessibility Overview
Inaccessible Web sites impact many users with different disabilities
Vision: Most impacted due to graphical nature of the Web
•
Images, image maps, image links, animations
•
Use of color, font size, non-scrollable windows
•
Navigation (frames, links, JavaScript, Java)
•
Data tables
•
Filling out forms
Hearing: Growing issues due to increase in audio and multimedia content
•
Audio and multimedia training
•
On-line Web meetings
Mobility: Complex Web page navigation designed for mouse users
•
Frame navigation
•
Navigating link lists
•
JavaScript mouse events
© 2002 IBM Corporation
Web Accessibility Issues
Four common accessibility issues with Web sites
Web Feature
Accessibility Issue
Frames
Screen readers read Web pages sequentially
If Web sites that use Frames do not use meaningful Frame titles,
users cannot easily move to the content they want to read
Images
Screen readers cannot read images without text equivalents
If null alt text is used for important links, they are skipped and the
site is not accessible – even though it may pass an accessibility
checker
Data Tables
Screen readers cannot read row and column headings if they have
not been coded properly by the Web developer
Missing header labels make the table impossible to understand
Forms
Screen readers may not be able to read text labels on form
elements if they have not been coded properly by the Web developer
© 2002 IBM Corporation
Frames
Frames shall be titled w/ text that facilitates frame identification &
navigation
Provide a meaningful title attribute for each FRAME element
•
Meaningful titles aid navigation of the Web site (e.g. “Main Content”, “Navigation”,”Logo”)
•
IBM HPR Frame list uses Page Title, Frame title attribute, Frame name attribute
•
JAWS Frame list uses Frame title attribute, Frame name attribute, Page Title
•
Most accessibility checkers check for the presence of the Frame title attribute (not if meaningful)
Incorrect coding for FRAME elements
<frameset> <frame src=“bp_left.html">
<frame name="top" src=“bp_header.html“>
<frame title="body_center" src=“maincontent.html"> </frameset>
Correct coding for FRAME elements
<frameset> <frame title=“Navigation” src=“bp_left.html">
<frame name=“top” title=“Logo” src=“bp_header.html">
<frame title=“Main Content” src=“maincontent.html"> </frameset>
© 2002 IBM Corporation
Images
Text equivalent for every non-text element shall be provided
Alternate text (alt text)
•
Use alt=“text description” to provide text equivalents for images, graphs, charts
•
Use null alt text (alt=“”) if images are unimportant or if they are redundant
•
Do not use alt=“” for image links unless they are redundant
•
Do not use alt=“ “ to implement null alt text
•
Do not use alt=“text link” or alt=“text graphic”
•
Accessibility checkers check for the presence of alt=“text” or alt=“”
Add alt text for all image links (input type=“image”)
<img src=“sam.gif”
alt=“picture of
Sam”>
Correct alt text for spacer images:
<img src= “spacer.gif” alt=“”>
Incorrect alt text:
<img src=“spacer.gif” alt=“spacer.gif”>
Correct alt text:
<input type=“image”
name=“Go” src=go.gif alt=“Go”>
Incorrect use of null alt text:
<input ytpe=“image”
Name=“Go” src=“go.gif alt=“”>
© 2002 IBM Corporation
Forms
Forms shall allow people using AT to access … functionality required for the
completion and submission of the form
Most form elements require explicit labels (e.g. text fields, checkboxes, radio
buttons) so they can be read by assistive technology
•
Associate text labels using the LABEL element and the for attribute
•
Proximity is not sufficient to help assistive technology “see” field labels
•
Most accessibility checkers check for the presence of the LABEL element
Incorrect coding of a text field for accessibility
•
Missing LABEL element: Search<br> <input name=“yourname”>
•
Missing id tag: <label for=“search”> Search</label> <br> <input name=“yourname”>
•
Incorrect id tag: <label for=“search”>Search</label> <br> <input name=“yourname” id=“mine”>
•
Implicit LABEL: <label>Search </label><br> <input name=“yourname”>
Correct coding of a text field for accessibility
<label for=“search”> Search</label><br> <input name=“yourname” id=“search”>
© 2002 IBM Corporation
Tables
Row and column headers must be defined for data tables
Row and column headers must be defined for row/column headers
•
Use the TH element to mark up heading cells
•
Use the scope attribute to identify row / column headings
•
Use the headers and id attribute to identify row / column headings on complex tables that
use rowspan or colspan
•
Accessibility checkers identify “possible” errors for tables since distinguishing between data
and layout tables is difficult
The CAPTION element can be used to associate a title with the table
•
<caption>Computer Science Job Openings - November 2003</caption>
The summary attribute can be used to provide additional information about the table
•
<table summary="Table that summarizes federal job openings by date">
© 2002 IBM Corporation
Data Tables Using Scope Attribute
Row and column headers shall be identified for data tables
Inaccessible table headers:
Accessible table headers using scope
<tr>
<td>Job Position</td> <td> Level</td>
<td>Location</td> <td>Agency</td></tr>
…….
<tr>
<td>Computer Scientist</td>
<td>GS-17</td>
<td>US-MS-Vicksburg</td>
<td>Army Research Lab</tr>
<tr><td>Army Corps of Engineers</td></tr>
<tr>
<td>US-MD-Prince George County</td>
<td>Army Research Lab</td></tr>
……
<tr>
<th scope=“col”>Job Position</th>
<th scope=“col”>Level</th> <th scope=“col”>Location</th>
<th scope=“col”>Agency</th></tr>
…..
<tr>
<th scope=“row”>Computer Scientist</th>
<th scope=“row”>GS-17</th>
<td>Army Lab</td>
<td>Army Research Lab</td></tr>
<tr> <td>Army Corps of Engineers</td></tr>
<tr>
<td>US-MD Prince George County</td>
<td>Army Research Lab</td></tr>
……
© 2002 IBM Corporation
Data Tables Using Headers and ID Attributes
Row and column headers shall be identified for data tables
Inaccessible table headers:
Accessible table headers using headers tag
<tr>
<td>Job Position</td> <td> Level</td>
<td>Location</td> <td>Agency</td></tr>
…….
<tr>
<td>Computer Scientist</td>
<td>GS-17</td>
<td>US-MS-Vicksburg</td>
<td>Army Research Lab</tr>
<tr><td>Army Corps of Engineers</td></tr>
<tr>
<td>US-MD-Prince George County</td>
<td>Army Research Lab</td></tr>
……
<tr>
<th id=“col1”>Job Position</th> <th id=“col2”>Level</th>
<th id=“col3”>Location</th> <th id=“col4”>Agency</th></tr>
…..
<tr>
<th headers=“col1” id=“compsci” >Computer Scientist</th>
<th headers=“col2” id=“gs17” >GS-17</th>
<td headers=“compsci gs17 col3”>US-MS-VicksBurg</td>
<td headers=“compsci gs17 col4”>Army Research
Lab</td></tr>
<tr>
<td headers=“compsci gs17 col4”>Army Corps of
Engineers</td></tr>
……
© 2002 IBM Corporation
Web Accessibility Techniques
Summary of accessibility techniques
Object
Accessibility Technique
Frames
Use the Frame title attribute to add meaningful name to your frame
Images
Use alt text for important images (alt=“your text”)
Use null alt text for unimportant or redundant images (alt=“”)
Data Tables
Use the TH element to identify row and column headers
Use headers and id attributes to identify row and column headers in
complex tables
Use the scope attribute on tables that don’t use rowspan or colspan
Forms
Use the LABEL element to associate text labels with form elements
© 2002 IBM Corporation
IBM Web Accessibility Checklist
IBM Web Accessibility Checklist includes detailed techniques
Section 508 Standards
Images
1.
Rationale
2.
Techniques
JavaScript
1.
Rationale
2.
Techniques
3.
Testing
Frames
1.
Rationale
2.
Techniques
3.
Testing
1.
Tools
2.
Tips
Test w/ HPR
1.
Setup
2.
How to
3.
Techniques
www.ibm.com/able/guidelines/index.html
© 2002 IBM Corporation
Web Accessibility Testing
Accessibility testing strategy
 No tool can test all Web standards automatically
 Verification requires use of automated checkers, assistive technology and manual checks
•First run an automated checking tool and fix any errors identified in reports
•Listen with assistive technology like HPR to ensure the site is accessible and usable
-Logon pages, templates, navigation
-Pages with data tables, forms and multimedia
•Verify keyboard access
-F6 to frames
-Tab to links and controls (e.g. form input fields)
-JavaScript keyboard access
•Additional manual checks for some standards
-JavaScript
-Color
-Multimedia
© 2002 IBM Corporation
Additional Resources
Additional references to learn more about Web accessibility
IBM Accessibility Center
•http://www.ibm.com/able/index.html
IBM Web Accessibility Checklist and Techniques
•http://www.ibm.com/able/guidelines/web/accessweb.html
IBM Home Page Reader
•Test instructions: http://www.ibm.com/able/guidelines/web/webhprtest.html
•Trial Download: http://www.ibm.com/able/solution_offerings/hpr.html
Guide to Section 508 Standards for Web Accessibility
•http://www.access-board.gov/sec508/guide/1194.22.htm
Web Accessibility Tutorial from Jim Thatcher
•http://www.jimthatcher.com/webcourse1.htm
© 2002 IBM Corporation