Transcript Screen readers read frame titles.

Accessibility Web Coding
Techniques
©2006 IBM Corporation
Learning objectives.
By the end of this training session, you should be able to:
Identify standards and guidelines that govern accessibility.
Explain checklist items from accessibility guidelines.
Locate accessibility resources.
©2006 IBM Corporation
Accessibility laws and regulations
©2006 IBM Corporation
Standards and legislation appearing worldwide.
Canada
Canadian Human Rights Act
Ontarians with Disabilities Act – 2001
Common Look & Feel Web guidelines – 2001
United States
Section 508 of Rehabilitation Act requires federal
agencies to purchase electronic and information
technology that is accessible to people with disabilities.
States are enacting similar legislation.
Europe
 Many countries have enacted legislation or national standards:
 UK – Web accessibility, 2002
 Germany – Barrier Free Decree, 2002
 Italy – ICT accessibility & government procurement, 2004
 Switzerland – Public sector Web accessibility, 2004
 European Union – Procurement of accessible I T, 2004
 Spain – Accessibility for computer platforms, 1998
 Ireland – I T accessibility guidelines, 2002
 Netherlands – Web accessibility, 2003
 Sweden – Guidelines for computer accessibility, 1998
China
Law of the PRC on the Protection of
Disabled Persons – Provisions on
employment, public services, transportation,
and legal sanctions, 1991
Japan
 JIS standards
Litigation and legal inquiries triggered by legislation in the
United States
State of Arkansas: New state accounting system built on SAP technology is
inaccessible to blind employees.
Commonwealth of Pennsylvania: Web portal inaccessible to blind. SAP software
is the source of the problem; IBM is providing integration services.
Metro Atlanta Mass Transit: Web site schedule and services inaccessible.
Southwest Airline: Reservations and ticketing are inaccessible.
Connecticut: Attorney General’s office investigates Web-based tax filing services.
Bank of America: inaccessible Web sites and A TMs.
America Online: Software incompatible with screen readers.
Australia / New Zealand
 Disability Discrimination Act passed – 1996
 Australian Bankers’ Association endorsed e-
commerce standards – 2000
 Australian Communications Industry Forum's
(ACIF) Guidelines – 2001
©2006 IBM Corporation
Accessibility standards are not all the same.
US
Section
508
W3C/Web Accessibility Initiative (WAI)
Accessibility
Guidelines
©2006 IBM Corporation
W3C/WAI is for the Web only;
Section 508 covers all electronic and information technology.
Section 508
W3C Web Accessibility
Initiative
Software
1194.21 Software applications and
operating systems
ATAG: Authoring tools
UAAG: User agent
Web Content
1194.22 Internet and intranet content and
applications
WCAG: Web content
Printers, Copiers, Kiosks, etc.
1194.25 Self-contained closed products
Computer systems
1194.26 Desktop and portable computers
Documentation
1194.41 Information, documentation, and
support
Telecommunications Products
1194.23 Telecommunications products
Video & Multimedia Products
1194.24 Video and multimedia products
Functional Performance
Criteria
1194.31 Functional performance criteria
©2006 IBM Corporation
508 Web guidelines are different from W3C WCAG priority 1s.
Identical
(Declared in 508
preamble)
508 Web Accessibility part
Section 1194.22 Paragraphs
Web Content Accessibility Guidelines (WCAG 1.0)
Priority 1 & 2s
a. Alternatives for non-text
b. Multimedia
1.1 p1 Alternatives for non-text elements
1.4 p1 Synchronized captions and descriptions
1.3 p1 Provide auditory description of video
2.1 p1 Color independent
6.1 p1 Style sheets not required
1.2 p1 Server-side image map
9.1 p1 Client-side image map
5.1 p1 Column and row headings
5.2 p1 Complex tables
12.1 p1 Titles for frame
7.1 p1 Avoid flicker
11.4 p1 Text-only if necessary
6.2 p1 Update dynamic content equivalents
c. Color independent
d. Style sheets not required
e. Server-side image map
f. Client-side image map
g. Column and row headings
h. Complex tables
i. Titles for frames
j. Avoid flicker
k. Text-only if necessary
Different
Additional W3C
Priority 1s and 2s
l. Accessible JavaScript OK
m. Applets, plug-ins, and other OK if
508 software compliant
n. Electronic forms
6.3 p1 Turning off scripts required (p2 otherwise)
6.3 p1 Turning off applets/plug-ins required (p2 otherwise)
o. Skip navigation links
p. Timed responses
13.6 p3 Group and provide method to skip
10.2 p2 Position labels on forms
12.4 p2 Explicitly label form controls
4.1 p1 Identify changes in language (rare access issue)
14.1 p1 Clearest and simplest language appropriate for site
(subjective)
and an additional 28 priority 2s
©2006 IBM Corporation
Most additional WCAG priority 2 requirements increase
usability; many are solved by browser + assistive technology.
There are 23 additional priority 2 requirements shown on the next two charts. Section 508 Web Accessibility Section 1194.22. Paragraphs a
through p do NOT map to any of these W3C WCAG priority 2s.
Web Content Accessibility Guidelines (WCAG
1.0) Priority 2's
Impact to developer
Workaround supported in A T or
browsers
2.2 Background and foreground contrast
M
Yes
3.1 Use markup when appropriate (i.e., SMIL)
H
3.2 Validate markup
L
Yes
3.3 Use style sheets to control layout/presentation
H
Yes
3.4 Use relative sizes
H
Yes
3.5 Use heading levels in document structure
M
Yes
3.6 Use list markup correctly
M
3.7 Use quotation correctly
L
5.3 Don't use layout tables that don't linearize
H
5.4 Don't use table markup in layout tables
L
7.2 Avoid blinking
M
Yes
7.3 Avoid moving content
M
Yes
7.4 Don't auto refresh
M
Yes
7.5 Don't auto redirect
M
Yes
Yes
©2006 IBM Corporation
Most additional WCAG priority 2 requirements increase usability;
many are solved by browser + assistive technology.
Web Content Accessibility Guidelines (WCAG 1.0)
Priority 2's
Impact to
developer
Workaround supported in A T or
browsers
10.1 Don't spawn windows without notifying user
M
Yes
11.1 Use W3C technologies
H
Yes
11.2 Avoid deprecated W3C features
M
Yes
12.2 Describe purpose of frames
M
12.3 Divide information into groups
H
13.1 Clearly identify target of link
M
13.2 Add metadata
L
13.3 Add site map and TOC
L
13.4 Use consistent navigation
M
Yes
©2006 IBM Corporation
Text equivalents for images, audio, and multimedia are key for Web checklist.
IBM Web Accessibility Checklist:
http://www-03.ibm.com/able/guidelines/web/accessweb.html
Text equivalents




Accessible interfaces
 Scripts must be keyboard accessible.
 Applets and plug-ins must meet software (or Java TM) accessibility checklist.
 Forms must be usable with assistive technology.
Skip navigation
 Provide a method for allowing the user to skip over navigation links to the main content.
Frames
 Provide a title for each frame element and frame page. Provide accessible source for
each frame.
Tables
 Use TH to mark up row and column header in data tables. Associate data cells with
header cells in complex data tables.
CSS (Cascading Style Sheets)
 Pages should be readable without requiring associated style sheets.
Color and Contrast
 Ensure all information conveyed with color is also conveyed in the absence of color.
Blinking, Flickering
 Avoid causing content to blink, move, or flicker.
Timed Responses
 Functions that have a time limit on the user's response must provide a way for the user
to ask for more time.
Text-only Page
 If accessibility cannot be achieved any other way, provide a text-only version of the
page.
Images and animations
Image maps
Graphs and charts
Audio and multimedia
©2006 IBM Corporation
Software requirements drive the way that code is implemented.
IBM Software Checklist:
http://www-03.ibm.com/able/guidelines/software/accesssoftware.html
Keyboard Access
Provide keyboard equivalents for all actions.
Do not interfere with keyboard accessibility features built into the operating systems.
Object
Information
Provide visual keyboard focus programmatically exposed to assistive technology.
Provide semantic information about user interface objects, including text for images.
Associate labels with controls, objects, icons, and images. Use images consistently.
Electronic forms must be usable with assistive technology.
Sounds &
Multimedia
Provide an option to display a visual cue for all audio alerts.
Provide accessible alternatives to significant audio and video.
Provide an option to adjust the volume.
Display
Provide text through standard system function calls or through an API that supports interaction with
assistive technology.
Use color as an enhancement, not as the only way to convey information.
Support system settings for high contrast for all user interface controls and client area content.
When color customization is supported, provide a variety of color selections capable of producing a
range of contrast levels.
Inherit system settings for font, font size, and color for all user interface controls.
Provide an option to display animation in a non-animated presentation mode.
Timing
Provide an option to adjust the response times on timed instructions or allow the instructions to
persist.
Avoid the use of blinking text, objects, or other elements.
©2006 IBM Corporation
Documentation and support services are also covered; testing is required.
Documentation
Provide documentation in an accessible format.
Provide documentation on all accessibility features, including
keyboard access.
Support
Support services must accommodate the communication
needs of end users with disabilities.
Test
Verify accessibility using available tools:
- Assessment tools
- Assistive technology
- Manual verification for some items
©2006 IBM Corporation
A closer look at some Web coding techniques – based on WCAG &
Section 508 guidelines
©2006 IBM Corporation
Common Web accessibility issues.
Web feature
Accessibility issue
Images
 Screen readers cannot read images without text equivalents.
 If null alt text is used for important links, the links are skipped and
the site is not accessible – even though it might pass an
accessibility checker.
Navigation
 Screen readers read Web pages sequentially.
 If Web sites that use frames do not have meaningful frame titles,
users cannot easily move to the content they want to read.
 If Web sites do not use frames, users must listen to all navigation
links unless a “skip to main” link has been added.
Data tables
 Screen readers cannot read row and column headings if the
headings have not been coded properly by the Web developer.
 Missing header labels make the table impossible to understand.
Forms
 Screen readers cannot read text labels on form elements if the
labels have not been coded properly by the Web developer.
©2006 IBM Corporation
Provide a text equivalent for every non-text element.
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 redundant.
•
Do not use alt=“” for image links unless the links are redundant.
•
Do not use alt=“ ” to implement null alt text.
•
Accessibility checkers check for the presence of alt=“text” or alt=“”.
Add alt text for all image links (input type=“image”).
Correct alt text for spacer images:
<img src= “spacer.gif” alt=“”>
<img src=“sam.gif”
alt=“Sam”>
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=“”>
©2006 IBM Corporation
Provide a method to skip repetitive navigation links.
Provide a way to skip over navigation links to quickly get to main content.
•
Screen readers read Web pages sequentially, so users have to listen to all navigation links on the
page before they hear the main content.
•
A “skip to main” link enables screen reader users to skip navigation links on every page.
Correct coding for skip link using an image link:
<a href="#navskip">
<img src="http://spacer.gif.gif" alt="skip to main content" width="10" height="33" border="0">
</a>
…
<a name="navskip"></a>
<p>This is the main content on the page.</p>
Skip navigation links cannot be tested using checking tools. You must listen
to the Web page with assistive technology to hear the link and verify that it
works.
©2006 IBM Corporation
Give frames names that facilitate frame identification and navigation.
Provide a meaningful title attribute for each FRAME element.
•
Meaningful titles (for example, “Main Content”, “Navigation”, or ”Logo”) aid navigation of the Web
site.
•
Accessibility checkers check for the existence of the Frame title attribute; they do not check
whether the title is meaningful.
Correct coding for FRAME elements:
<frame title=“Navigation” src=“bp_left.html">
<frame title=“Logo” name=“top” src=“bp_header.html">
<frame title=“Main Content” src=“maincontent.html">
Incorrect coding for FRAME elements:
<frame src=“bp_left.html">
<frame name="top" src=“bp_header.html“>
<frame title="body_center" src=“maincontent.html">
©2006 IBM Corporation
Screen readers read frame titles.
 Use the screen reader command to list the frames on the page.
 Select the frame you want to read.
 Accessible frame titles:
 Inaccessible frame titles:
©2006 IBM Corporation
Use forms to allow people using A T to access the functionality required to
complete and submit the form.
Most form elements (for example, text fields, checkboxes, and radio
buttons) require explicit labels so the elements 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.
•
Accessibility checkers check for the presence of the LABEL element.
Correct coding of a text field for accessibility:
•
<label for=“search”> Search</label><br> <input name=“yourname” id=“search”>
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”>
©2006 IBM Corporation
Screen readers read form labels.
 Locator feature – tells where am I?
Text entry
Labeled Search for
Form 1
At 28% of page
 List of links.
 Controls reading with arrow keys.
Search for [Text]
 Read title attribute.
©2006 IBM Corporation
Define row and column headers for data tables.
Row and column headers must be defined so they can be spoken.
•
Use the TH element to mark up heading cells.
•
Use the scope attribute to identify row or column headings.
•
Use the headers and id attribute to identify row or column headings on complex tables that
use rowspan or colspan.
•
Accessibility checkers identify “possible” errors for tables because distinguishing between
data and layout tables is difficult.
The CAPTION element associates a title with the table.*
•
<caption>Computer Science Job Openings - November 2005</caption>
The summary attribute provides additional information about the table.*
•
<table summary="Table that summarizes federal job openings by date">
*Recommended technique, not required by Section 508 guidelines.
©2006 IBM Corporation
Identify row and column headers using the scope attribute.
Inaccessible table headers
Accessible table headers using scope
<tr>
<td>&nbsp;</td>
<td>Percentage with any disability</td>
<td>Number with any disability</td></tr>
<tr>
<td>Population 5-15 years</td>
<td>5.8</td>
<td>2,614,919</td></tr>
<tr>
<td>Population 16-64 years</td>
<td>18.6</td>
<td>33,153,211</td></tr>
……
<tr>
<td>&nbsp;</td>
<th scope=“col”>Percentage with any disability</th>
<th scope=“col”>Number with any disability</th></tr>
<tr>
<th scope=“row”>Population 5-15 years</th>
<td>5.8</td>
<td>2,614,919</td></tr>
<tr>
<th scope=“row”>Population 16-64 years</th>
<td>18.6</td>
<td>33,153,211</td></tr>
……
©2006 IBM Corporation
Identify row and column headers using headers / id attributes.
Inaccessible table headers:
<table summary=“Job openings by position
caption=“Technical Job Openings as of Nov 1, 2003”>
<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</td></tr>
<tr><td>Army Corps of Engineers</td></tr>
<tr>
<td>US-MD-Prince George County</td>
<td>Army Research Lab</td></tr>
……
Accessible table headers using headers tag
<table summary=“Job openings by position
caption=“Technical Job Openings as of Nov 1, 2003”>
<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>
……
©2006 IBM Corporation
Screen readers read table headers.
 Table Jump reading
•
Reads the CAPTION element, which gives your table a title.
•
Reads the summary attribute of the TABLE element, which describes the overall structure of
a table.
 Table Navigation reading
•
Reads table headers.
•
Use TH to identify row and column headers for simple data tables. Use the scope attribute
on TH cells, if needed, to further clarify header and data cell relationships.
•
Use the headers attribute on data cells and the id attribute on header cells to identify
headers for complex data tables.
©2006 IBM Corporation
Listening to table headers with a screen reader.
 Listening to the table without headers – response varies based on A T used:
Matriculated Students. College of Education. 523
or
Matriculated Students. Undergraduate. 523
or
Matriculated Students. College of Education. Undergraduate. 523
 Listening to the table with headers – consistent and correct results:
Matriculated Students. In state. College of Education. Undergraduate. 523
©2006 IBM Corporation
Summary of Web accessibility techniques.
Web feature
Accessibility technique
Images
Use alt text for important images (alt=“your text”).
Use null alt text for unimportant or redundant images (alt=“”).
Navigation
Use a visible or invisible link to skip to main content.
Use the frame title attribute to add a meaningful name to your frame.
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.
©2006 IBM Corporation
Additional resources for learning about accessibility.
IBM Human Ability and Accessibility Center
•http://www.ibm.com/able
IBM Human Ability and Accessibility Checklists and Techniques
•http://www.ibm.com/able/guidelines
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 Electronic and Information Technology
•http://www.access-board.gov/sec508/guide/
Web accessibility tutorials
•http://www.jimthatcher.com/webcourse1.htm
•http://www.webaim.org
•http://www.section508.gov
©2006 IBM Corporation