Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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