Transcript Document

Web Standards & Accessibility
simple, affordable
access
to web technologies
for all
© 2001-2005 Knowbility, Inc. All rights reserved
Web Standards & Accessibility
•
•
•
•
•
•
•
What are Web Standards?
Accessibility terms / history
Listening to a web page
508 Standard – 5000 foot view
Comparing Standards
Accessibility testing tools
How To Learn More…
© 2001-2005 All rights reserved. Knowbility, Inc
2
What are Web Standards?
© 2001-2005 Knowbility, Inc. All rights reserved
Web Standards
W3C - www.w3.org
Web Standards Project www.webstandards.org
•
•
•
•
•
XHTML
XML
CSS
DOM
JavaScript (ECMAScript 262)
Goals:
• Web for Everyone
• Web on Everything
• Effective/Efficient Web Development – web content, web applications, web
authoring tools, user agents (browsers, media players, assistive technology)
© 2001-2005 All rights reserved. Knowbility, Inc
4
Accessibility terms and history
© 2001-2005 All rights reserved. Knowbility, Inc
5
Points to take away
• Good design is accessible design
• Goal is to support full participation for all who
want it. Universal Access.
• Separate is not equal: text-only is a last resort
• Accessibility improves usability
© 2001-2005 All rights reserved. Knowbility, Inc
6
What is Accessibility?
• A user experience
• The ability of a user with a disability to obtain the
same information and perform the same tasks
as any other user.
• Generally creating a better user experience for
all.
True Test:
Can people with disabilities use your web
page?
© 2001-2005 All rights reserved. Knowbility, Inc
7
Types of Disability
•
•
•
•
•
Cognitive/Learning
Auditory
Visual – blind, low vision, color blind
Motor/Physical
Speech
© 2001-2005 All rights reserved. Knowbility, Inc
8
Quasi-Disabilities
These conditions create similar experience
• Slow Internet Connection
• Old Browser
• Missing Plug-ins
• No Speakers
• Small Display
• Eyes Busy/Hands Busy
• Noisy Environment
© 2001-2005 All rights reserved. Knowbility, Inc
9
Why is this important?
• More than 50 million Americans – 750 million
worldwide – have disabilities.
• Numbers increasing as population ages.
• $1 trillion in aggregate annual income.
• Emerging best business practices.
• Federal mandates.
© 2001-2005 All rights reserved. Knowbility, Inc
10
Accessibility in law and policy
• Americans with Disability Act
• Section 508 of the Rehabilitation Act
• Texas Administrative Code
• Chapter 206 State Web Sites
• Texas HB 2819 mandates accessible information
technology at state agencies
• University of Texas at Web Accessibility Policy
www.utexas.edu/web/guidelines/accessibility.html
© 2001-2005 All rights reserved. Knowbility, Inc
11
Section 508
• Requires Federal Agencies to make information
technology accessible
• 16 objective measurable standards for web
accessibility
• Many non-federal organizations are adopting
Section 508 as their own standard.
• Effective date: June 21, 2001
www.access-board.gov/sec508/guide/1194.22.htm
© 2001-2005 All rights reserved. Knowbility, Inc
12
Accessibility Standards
Two sets of Standards:
• Section 508 Standards (United States)
• Web Content Accessibility Guidelines, WCAG 1.0
(international)
© 2001-2005 All rights reserved. Knowbility, Inc
13
Brief Look at WCAG
www.w3.org/wai
Developed by consensual process
– Comprehensive: Includes over 60 checkpoints
– Widely accepted: European Union, Canada,
Australia have adopted WCAG.
Published in May 1999 (old and about to be replaced by
2.0 anticipated by end of 2005)
Priority 1: Critical
Priority 2: Moderately important
Priority 3: Useful but not essential
© 2001-2005 All rights reserved. Knowbility, Inc
14
Brief Look at Section 508
www.access-board.gov/sec508/guide/1194.22.htm
Legally applies only to federal agencies:
– Shorter: 508 has 16 checkpoints, WCAG over 60
– Experience: 508 based on WCAG’s most critical
accessibility checkpoints.
– Measurable: 508 standards developed to be
objective and measurable.
© 2001-2005 All rights reserved. Knowbility, Inc
15
Assistive Technology
• ANY device (not necessarily electronic) that
allows someone with a disability to perform daily
tasks.
• Technology has enormous potential to level the
playing field for those with disabilities.
• Accessibility is the key to realizing that potential.
© 2001-2005 All rights reserved. Knowbility, Inc
16
Web Assistive Technology
Alternative Keyboard, Alternative Mouse, Slo-Mo Software,
Refreshable Braille Display, Screen Magnifier, Screen
Reader…
• Examples of Screen Magnifiers/Screen Readers:
• Zoom Text by AI Squared - screen magnifying software
that makes computers accessible/friendly to low-vision
users. www.aisquared.com
• JAWS by Freedom Scientific – popular screen reading
software. Uses internal speech synthesizer and
computer’s sound card to read info from computer screen
aloud. www.freedomscientific.com
• Home Page Reader by IBM – a web access tool for blind
and low vision users. www.ibm.com/able/
This technology works with very little help from web
developers!
© 2001-2005 All rights reserved. Knowbility, Inc
17
Experiencing a Screen Reader
Listening to www.utexas.edu
Find the link to the Library
•Links on page (tab to move from link to link)
•Link Lists – alpha and page order (Insert F7)
© 2001-2005 All rights reserved. Knowbility, Inc
18
508 Standard – a 5000 foot view
508 Standard – 1 foot view
www.jimthatcher.com/webcourse1.htm
© 2001-2005 All rights reserved. Knowbility, Inc
19
Section 508
a)
b)
c)
d)
e)
f)
g)
h)
i)
j)
k)
l)
m)
n)
o)
p)
Alt Text
Synchronized alternatives for multimedia
Color
Use CSS
Server-side image maps
Client-side image maps
Simple tables
Complex tables
Frames
Flickering
Text only version
Scripting
Applets
Forms
Skip Navigation
Timed Response
© 2001-2005 All rights reserved. Knowbility, Inc
20
508 a) Alt Text
(a) A text equivalent for every non-text element
shall be provided (e.g., via "alt", "longdesc", or
in element content).
The Issue:
• Think about listening to your web page
• That is why text equivalents must be provided
for images and animations
Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.
© 2001-2005 All rights reserved. Knowbility, Inc
21
508 b) Synchronized Alternatives for Multimedia
(b) Equivalent alternatives for any multimedia presentation
shall be synchronized with the presentation.
The issue is:
•
Audio files and the audio part of multimedia content
need to be made accessible to people who are deaf.
•
Information in the video part of multimedia content
needs to be accessible to people who are blind.
Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.
© 2001-2005 All rights reserved. Knowbility, Inc
22
508 c) Color and Contrast
(c) Web pages shall be designed so that all information
conveyed with color is also available without color, for
example from context or markup.
The Issue: information conveyed by color is lost for people
who are color blind
•
Whenever color carries information, make sure that
other parts of the page convey the same information.
•
Be sure there is adequate contrast between text and
background.
Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.
© 2001-2005 All rights reserved. Knowbility, Inc
23
508 d) Use CSS
(d) Documents shall be organized so they are readable
without requiring an associated style sheet.
The issue:
•
Style sheets are an asset to accessibility but they are
ignored by assistive technology so it is important not
to convey information with style sheets
•
Sometimes individuals use local style sheets for
enhanced font size and color
Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.
© 2001-2005 All rights reserved. Knowbility, Inc
24
508 (e, f) Image Maps
(e) Redundant text links shall be provided for each active region of a
server-side image map.
(f) Client-side image maps shall be provided instead of server-side
image maps except where the regions cannot be defined with an
available geometric shape.
The issue:
•
Server side maps require the use of a mouse. Many disabled
users cannot use a mouse.
Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.
© 2001-2005 All rights reserved. Knowbility, Inc
25
508 (g & h) Tables
(g) Row and column headers shall be identified for data
tables.
(h) Markup shall be used to associate data cells and
header cells for data tables that have two or more
logical levels of row or column headers.
The issue:
•
•
Data tables are designed for viewing; column and row
headers can be discerned while reading data.
Accommodation is needed so that screen readers will
announce headings as the user navigates a table.
Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.
© 2001-2005 All rights reserved. Knowbility, Inc
26
508 i) Frames
(i) Frames shall be titled with text that facilitates
frame identification and navigation.
The Issue:
• Frames are presented to users of assistive
technology as lists of pages. This requires that
meaningful text be available for those lists.
Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.
© 2001-2005 All rights reserved. Knowbility, Inc
27
508 j) Flickering
(j) Pages shall be designed to avoid causing the
screen to flicker with a frequency greater than
2 Hz and lower than 55 Hz.
The issue is:
• Flicker in the range 2Hz to 55Hz may cause
seizures in people with photosensitive
epilepsy.
Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.
© 2001-2005 All rights reserved. Knowbility, Inc
28
508 k) Text-Only Version
(k) A text-only page, with equivalent information or
functionality, shall be provided to make a web
site comply with the provisions of this part, when
compliance cannot be accomplished in any
other way. The content of the text-only page
shall be updated whenever the primary page
changes.
LAST RESORT
© 2001-2005 All rights reserved. Knowbility, Inc
29
508 l) Scripts
(l) When pages utilize scripting languages to display
content, or to create interface elements, the
information provided by the script shall be identified
with functional text that can be read by assistive
technology.
The issue:
•
Content created with scripts may be inaccessible,
especially to people using screen readers and/or
unable to use the mouse.
Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5.
© 2001-2005 All rights reserved. Knowbility, Inc
30
508 m) Applets
(m) When a web page requires that an applet, plug-in or
other application be present on the client system to
interpret page content, the page must provide a link to
a plug-in or applet that complies with §1194.21(a)
through (l).
The issue:
•
Software associated with a web page must be
accessible.
Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.
© 2001-2005 All rights reserved. Knowbility, Inc
31
508 n) Forms
(n) When electronic forms are designed to be completed
on-line, the form shall allow people using assistive
technology to access the information, field elements,
and functionality required for completion and
submission of the form, including all directions and
cues.
The issue:
•
“Tell me what this form control is for!”
•
People using screen readers need to be told the
purpose of an edit field or check box.
Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7
© 2001-2005 All rights reserved. Knowbility, Inc
32
508 o) Skip Navigation
(o) A method shall be provided that permits users
to skip repetitive navigation links.
The issue:
• Navigation links often precede the main
content on every page. People listening to the
page have to listen to those links on every
page making the main content difficult to find
Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8
© 2001-2005 All rights reserved. Knowbility, Inc
33
508 (p) Timed Response
(p) When a timed response is required, the user
shall be alerted and given sufficient time to
indicate more time is required.
The issue:
• A person with a disability may not be able to
read, move around, or fill in a Web form within
the prescribed amount of time.
Related Guidelines: 508 §1194.22(p)
© 2001-2005 All rights reserved. Knowbility, Inc
34
Comparing Standards
and looking forward…
© 2001-2003 Knowbility, Inc. All rights reserved
WCAG 1.0, 508 or WCAG 2.0?
• WCAG 1.0 – May 5, 1999
• 508 – effective June 21, 2001
• WCAG 2.0 – target date December 2005
© 2001-2005 All rights reserved. Knowbility, Inc
36
WCAG 1.0 P1 vs 508
WCAG 1.0 (Priority 1)
Compare
508
1.1 Alt text
Very similar a) Alt text (just doesn’t specify all the
non-text element types)
1.2 Server-Side Image
Maps
Same
e) Server-Side Image Maps
1.3 Auditory Description
Not in 508
508 encourages audio descriptions within the
synchronized alternatives, not as a separate
track
1.4 Synchronized
multimedia
Same
b) Synchronized multimedia
2.1 Color
Same
c) Color
4.1 Natural Language
Not in 508
Not many AT support language change markup
© 2001-2005 All rights reserved. Knowbility, Inc
37
WCAG 1.0 P1 vs 508 continued…
WCAG 1.0 (Priority 1)
Compare
508
5.1 Table Headers
Same
g) Simple Tables
5.2 Complex Tables
Same
h) Complex Tables
6.1 Style Sheets
Same
h) Style Sheets
6.2 Dynamic Content
Not in 508
Deemed unclear. Just a backup to other
checkpoints
6.3 Scripting
WCAG
more
restrictive
l) Scripting & m) applets
© 2001-2005 All rights reserved. Knowbility, Inc
38
WCAG 1.0 P1 vs 508 continued…
WCAG 1.0 (Priority 1)
Compare
508
7.1 Flicker
508 More
specific
j) Flicker
9.1 Client Side Image Map
Same
f) Client Side Image Map
11.4 Text only – last resort
Same
k) Text only – last resort
12.1 Frames
Same
i) Frames
14.1 Clear Language
Not in 508
Subjective. Deemed to difficult to enforce.
For a detailed comparison of WCAG 1.0 to 508 see
http://www.jimthatcher.com/sidebyside.htm
© 2001-2005 All rights reserved. Knowbility, Inc
39
WCAG 2.0 Design Principles
• Content must be perceivable
• Interface elements in the content must be
operable
• Content and controls must be understandable
• Content must be robust enough to work with
current and future technologies
© 2001-2005 All rights reserved. Knowbility, Inc
40
WCAG 2.0 Working Draft (June 2005)
1 Perceivable
1.1 Provide text alternatives for all non-text content
1.2 Provide synchronized alternatives for multimedia
1.3 Ensure that information, functionality, and structure can be
separated from presentation
1.4 Make it easy to distinguish foreground information from
background images or sounds
2 Operable
2.1 Make all functionality operable via a keyboard interface
2.2 Allow users to control time limits on their reading or interaction
2.3 Allow users to avoid content that could cause seizures due to
photosensitivity
2.4 Provide mechanisms to help users find content, orient
themselves with it, and navigate through it
© 2001-2005 All rights reserved. Knowbility, Inc
41
WCAG 2.0 Working Draft (June 2005)
3 Understandable
3.1 Make text content readable and understandable
3.2 Make the placement and functionality of content
predictable
4 Robust
4.1 Use technologies according to specification
4.2 Ensure that user interfaces are accessible or
provide an accessible alternative(s)
© 2001-2005 All rights reserved. Knowbility, Inc
42
Accessibility testing
© 2001-2005 All rights reserved. Knowbility, Inc
43
Accessibility Testing tools
• Accessibility Validators – Page by Page
• Listening to Your Pages
• Screenreaders/Talking Browsers
• Accessibility Reports
• Practical Testing Plan
© 2001-2005 All rights reserved. Knowbility, Inc
44
Accessibility Validators
Page by Page
•
•
•
•
WebXact
The Wave
Web Developer for Firefox (extension)
Accessibility Toolbar for IE
Accessibility Tools can only automatedly test
approximately 27% of the issues.
Accessibility Testing requires human brain power!
© 2001-2005 All rights reserved. Knowbility, Inc
45
3 Free Accessibility Validators
Tool
+
-
WebXact
*New tool from the folks at
Watchfire (replaces bobby)
*Excellent resource
•Doesn’t have visual info you
used to get from Bobby
Wave
•Good for seeing “reading
order” & alt text
•Report not as intuitive
•Doesn’t explain how to solve
problems
Great tool that combines many
accessibility validators and
simulations
•Beta version (occasional bug)
•Only available for PC/IE
Accessibility Toolbar
© 2001-2005 All rights reserved. Knowbility, Inc
46
Evaluation of Free
Accessibility Testing Tools
www.webaim.org/techniques/articles/freetools/
Articles has links
to all the free
accessibility testing tools
© 2001-2005 All rights reserved. Knowbility, Inc
47
Testing a Site
• http://www.geocaching.com
•
•
•
•
WebXact
Wave
Web Developer in Firefox
Accessibility Toolbar in IE
© 2001-2005 All rights reserved. Knowbility, Inc
48
Listening to Your Site
The real test – can users with disabilities actually
use your site?
Two examples of assistive technology
•JAWS by Freedom Scientific – popular screen
reading software. Uses internal speech synthesizer
and computer’s sound card to read info from computer
screen aloud. www.freedomscientific.com
•Home Page Reader by IBM – a web access tool for
blind and low vision users. www.ibm.com/able/
© 2001-2005 All rights reserved. Knowbility, Inc
49
Demo of Home Page Reader
• Home Page Reader – a talking browser
• Listen to UT Home Page
• Link Lists (control + L)
• Skip to Main
• Listen to Dreamworks
• http://www.dreamworks.com/
© 2001-2005 All rights reserved. Knowbility, Inc
50
Demo of JAWS
• JAWS – a true screenreader for PCs
• reads IE, Word, Excel, Powerpoint, Desktop…
• Listen to UT Home Page
• Links on page (tab to move from link to link)
• Link Lists – alpha and page order (Insert F7)
• Listen to Dreamworks
• http://www.dreamworks.com/
© 2001-2005 All rights reserved. Knowbility, Inc
51
LIFT Machine
• Tests entire sites for accessibility
• Builds accessibility reports
•
•
•
•
•
•
Results by checkpoints
Checkpoints expanded
Edit Preferences
Create Reports
Resources – How to fix
Previews of pages for debugging
© 2001-2005 All rights reserved. Knowbility, Inc
52
Review LIFT Report
• www.geocaching.com
• http://lol.usablenet.com/lm/index.jsp
© 2001-2005 All rights reserved. Knowbility, Inc
53
Tools for Prioritizing
Accessibility Errors
• LIFT –
www.usablenet.com
• WebXM –
www.watchfire.com/products/webxm/
• Step508 http://www.section508.gov/index.cfm?fuseaction=content&
id=155
© 2001-2005 All rights reserved. Knowbility, Inc
54
Watchfire WebXM
•
•
•
•
•
•
http://webq.austin.utexas.edu/webxm/
austin\gsims
Dashboard – Site Health
Favorites - Reports
ITS Accessibility
Section 508 Issues
© 2001-2005 All rights reserved. Knowbility, Inc
55
A Practical Plan
1. Test with your browser
•
•
•
•
Turn off images
Don’t use the mouse
Increase font size
Change window size
2. Run online Accessibility Tests on representative
pages
•
use more than one tool, example: Watchfire & Wave
3. Listen to your pages
•
Home Page Reader or JAWS
4. Run a LIFT or WebXM Report
5. Hands on Accessibility Testing
© 2001-2005 All rights reserved. Knowbility, Inc
56
Next Steps
What accessibility actions do you plan to take next?
What resources do you need now?
jimthatcher.com
knowbility.org
www.utexas.edu/learn/accessibility/
© 2001-2003 Knowbility, Inc. All rights reserved