1. Laurie Harrison and Laurel Williams Academic Computing, Education Commons, OISE November 30, 2006 Introduction to Web Accessibility Are you reaching the widest possible audience?

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

3. n University of Toronto must prepare and publish annual accessibility plans for the Ontarian’s With Disabilities Act n …plus new Bill 118 According to the ODA…

4. According to the Provost’s Office…

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

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

7. Is Deaf, Deafened or Hard of Hearing...

8. Has a Learning Disability...

9. Blind

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

11. Screen Magnification Software... enlarges portions of the Web page allows learners with limited vision to access Web-based materials

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

13. Screen Readers... software allows a voice synthesizer to read text from Web pages can tab through links, use menus for other functions

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

15. Alternative Keyboards & Pointers... keyboards offer larger or smaller target areas may incorporate mouse emulation for navigation, onscreen keyboards

16. Voice Recognition... user speaks into a microphone to navigate software applications, surf the web mouse control may incorporate a numbering system

17. Choose Colours With Care

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

19. Forms Associate labels explicitly with their controls. 

20. Example: Form HTML Code Example. Personal information First name: Last name:...more personal information... Medical History...medical history information...

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

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

23. Accessible Media Formats Images  ALT or description Video components  captions Audio components  transcript

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

25. 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??

26. Follow Standards Use HTML standards http://www.w3.org/ http://www.w3.org/ Use WAI checklist at: http://www.w3.org/TR/WCAG10/full- checklist.html http://www.w3.org/TR/WCAG10/full- checklist.html Use CSS if possible http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/

27. Great Resource: WebAim (Web Accessibility in Mind) http://www.webaim.org/

28. Evaluation Should be part of QA process before going “public” Validate code using W3C validator http://validator.w3.org/ http://validator.w3.org/ ATRC Web Accessibility Checker http://checker.atrc.utoronto.ca/ WebExact from Watchfire: http://webxact.watchfire.com

30. What About… PDF files? Flash? Other…?

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

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

33. Example: Flash Site http://www.library.utoronto.ca/east

34. Tables For data tables, identify row and column headers. http://www.w3.org/TR/WCAG10- HTML-TECHS/#identifying-table- rows-columns

35. Table: Example NameCupsType of CoffeeSugar? Glen Jones1EspressoNo Carol Rolheiser3DecafYes

36. Contact Info Laurie Harrison lharrison@oise.utoronto.ca Laurel Williams Laurel.williams@utoronto.ca Notes”: home.oise.utoronto.ca/~lharrison/accessibility/index.html