Embed Size (px)
Citation preview
Laurie Harrison and Laurel Williams
Academic Computing, Education Commons, OISE
November 30, 2006
Introduction to Web AccessibilityAre you reaching the widest possible
audience?
What audience
• 3,400,000 adult Canadians with disabilities– 17% of this group have vision difficulty– 32% have hearing difficulty– 48% have mobility issues
• 450,000 million adults report having learning disabilities
2001 Census Statistics
University of Toronto must prepare and publish annual accessibility plans for the Ontarian’s With Disabilities Act
…plus new Bill 118
According to the ODA…
According to the Provost’s Office…
Today’s “e-Student”
Web access critical for all online resources and services:
• Course home pages• Learning Management System(s)• Library resources and databases• Registration and administration• Student Services• Official Communication
WebAIM
www.webaim.org
What does the web look like to someone who ...
Is Deaf, Deafened or Hard of Hearing...
Has a Learning Disability...
Blind
Varied User Preferences…
• Adaptive software and hardware
• Modification of display - personal preference• Environmental factors – noise, lighting• Handheld and other alternative access devices
... and other needs
Screen Magnification Software...
• enlarges portions of the Web page
• allows learners with limited vision to access Web-based materials
Possible Barriers
• Bitmap text that is enlarged often becomes pixelated and difficult to read
• Real text is much easier to read
• Anything that moves may be problematic.
Screen Readers...
• software allows a voice synthesizer to read text from Web pages
• can tab through links, use menus for other functions
Possible Barriers
• Missing ALT on images or image maps• Moving or scrolling content• Incorrect labels / forms• Lengthy navigation link lists• Tables with no headers• Link text that is not meaningful
Alternative Keyboards & Pointers...
• keyboards offer larger or smaller target areas
• may incorporate mouse emulation for navigation, onscreen keyboards
Voice Recognition...
• user speaks into a microphone to navigate software applications, surf the web
• mouse control may incorporate a numbering system
Choose Colours With Care
Optimize Navigation
• Include outlines at the beginning of long documents • Label and structure lists carefully• Avoid using “click here” or “more” as link text• Use consistent terminology
To go to Student Services at OISE/UT click here.
Student Services at OISE/UT
vs.
Forms
• Associate labels explicitly with their controls.
Example: Form HTML Code
Example.<FORM action="http://example.com/adduser" method="post"> <FIELDSET> <LEGEND>Personal information</LEGEND> <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname" tabindex="2"> ...more personal information... </FIELDSET>
<FIELDSET> <LEGEND>Medical History</LEGEND> ...medical history information... </FIELDSET> </FORM>
Scripts
• Ensure that input does not assume use of a mouse.
• Pages must be usable when scripts, are turned off or not supported… or provide equivalent information on an accessible page.
keyboard access = access for all users
• Rollovers generally cannot be accessed without use of a mouse resulting in hidden content for some users
• If used, provide an alternative method for accessing links, such as a equivalent links on second level page or site map
Example: Javascript
Accessible Media Formats
• Images ALT or description
• Video components captions
• Audio components transcript
Summary: General Principles
• The web is an information medium, not a visual medium
• Do not assume all users have the same preferences for access, input and output
• Facilitate alternative rendering of auditory and visual content
WAI Guidelines
• Guidelines are available from the W3C’s Web Accessibility Initiative at:
http://www.w3.org/TR/WCAG10/
• Web Content Accessibility Guidelines 1.0
…new version 2.0 available in draft
• Priority level 1, 2 or 3??
Follow Standards
• Use HTML standardshttp://www.w3.org/
• Use WAI checklist at:http://www.w3.org/TR/WCAG10/full-checklist.html
• Use CSS if possiblehttp://www.w3.org/Style/CSS/
Great Resource: WebAim (Web Accessibility in Mind)
http://www.webaim.org/
Evaluation
Should be part of QA process before going “public”
• Validate code using W3C validatorhttp://validator.w3.org/
• ATRC Web Accessibility Checkerhttp://checker.atrc.utoronto.ca/
• WebExact from Watchfire:http://webxact.watchfire.com
What About…
• PDF files?• Flash?• Other…?
What About PDF files?
• Navigability with screen readers depends on how it was created - need most recent version of Adobe Acrobat
• Can include enhanced keyboard shortcuts, support for high-contrast viewing, and the ability to zoom in and reflow text on the screen, navigation, titles on images
• New features may be accessed using only the most recent screen readers
access.adobe.com
About Flash
• Avoid strobe or flashing effects
• Provide an option for users to turn ON audio or instructions on how to disable audio
• Provide shortcut keys
• Design for device independence - avoid interactive elements within your Flash movie that require the use of the mouse. ie drag-and-drop and double click.
• Give the user control over important content changes.
Note: WAI guidelines recommend providing accessible alternatives to Flash
Example: Flash Site
• http://www.library.utoronto.ca/east
Tables
• For data tables, identify row and column headers.
http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
Table: Example
Name Cups Type of Coffee Sugar?
Glen Jones 1 Espresso No
Carol Rolheiser 3 Decaf Yes
Contact Info
Laurie Harrison
Laurel Williams
Notes”:home.oise.utoronto.ca/~lharrison/accessibility/index.html
