Introduction to Web Accessibility
Are you reaching the widest possible audience?

Summary Notes for Presentation by:

Laurie Harrison and Laurel Williams
Academic Computing, Education Commons, OISE
November 30, 2006

[ Powerpoint Version ]



Who is your 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 plan for the Ontarian’s With Disabilities Act

Screenshot of Accessibility Plan Web Site


According to the Vice-Provost (Students)

Principles for the University of Toronto web space collection

"There are eleven principles that guide the development, addition and amendments of the web space collection."

Among them:

"Adapt the Interface: We must be cognizant and respectful of the diversity and complexity of the adaptive, cognitive and affective challenges faced by readers. To that end, all pages in the web space collection must achieve a minimum WCAG 2[1] compliance, work with electronic screen reader software such as JAWS® for Windows and follow industry guidelines for usability..."

Screenshot of Web Space Guidelines Web Site


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


What does the web look like to someone who ...

Screenshot of Wizard of Oz Video Clip with captions

.Screenshot of simulation of experience of learning disability - issues with text

black box


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

------------------------------------------- [ top ]

Adaptive Technology

Screen Magnification Software...

• enlarges portions of the Web page
• allows learners with limited vision to access Web-based materials

Screenshot of Zoomtext Interface

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

Screenshot of JAWS start up

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

Screenshot of pointing devices


Voice Recognition...

• user speaks into a microphone to navigate software applications, surf the web
• mouse control may incorporate a numbering system

Screenshot of person with headset

------------------------------------------- [ top ]


Choose Colours With Care

When systems allow you to set your own colour choices or if you are involved in design decisions:

-choose high contrast combinations
-consider those who may be colour blind!

Screenshot of Blackboard interface showing high and low contrast settings


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

Screenshot of examples of good and bad link text



• Associate labels explicitly with their controls.

Screenshot of correct and incorrect labelling of forms

Example: Form HTML Code

<FORM action="" method="post">
<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...

<LEGEND>Medical History</LEGEND>
...medical history information...



• 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.

Screenshot of WebAim Web Site


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

------------------------------------------- [ top ]


WAI Guidelines

• Guidelines are available from the W3C’s Web Accessibility Initiative at:

• Web Content Accessibility Guidelines 1.0
…new version 2.0 available in draft

• Priority level 1, 2 or 3??


Follow Standards

• Use HTML standards

• Use WAI checklist at:

• Use CSS if possible


Great Resource

for examples of how-to techniques and general information

: Screenshot of WebAim Web Site

WebAim (Web Accessibility in Mind)



Should be part of QA process before going “public”

• Validate code using W3C validator

• ATRC Web Accessibility Checker

• WebExact from Watchfire:

------------------------------------------- [ top ]

Contact Info
Laurie Harrison

Laurel Williams