Transcript Implementing Web-Based Distance Education:

Introduction to Web Accessibility
Are you reaching the widest possible
audience?
Laurie Harrison and Laurel Williams
Academic Computing, Education Commons, OISE
November 30, 2006
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
According to the ODA…

University of Toronto must prepare and
publish annual accessibility plans for the
Ontarian’s With Disabilities Act

…plus new Bill 118
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.
vs.
Student Services at OISE/UT
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
Example: Javascript
• 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
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 standards
http://www.w3.org/
• Use WAI checklist at:
http://www.w3.org/TR/WCAG10/fullchecklist.html
• Use CSS if possible
http://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 validator
http://validator.w3.org/
• ATRC Web Accessibility Checker
http://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/WCAG10HTML-TECHS/#identifying-tablerows-columns
Table: Example
Name
Cups
Type of Coffee
Sugar?
Glen Jones
1
Espresso
No
Carol Rolheiser
3
Decaf
Yes
Contact Info
Laurie Harrison
[email protected]
Laurel Williams
[email protected]
Notes”:
home.oise.utoronto.ca/~lharrison/accessibility/index.html