Designing Accessible College Web Pages

1. Designing Accessible College Web Pages By Rachel Kessel, Project Manager for WAOL at CIS & Kayeri Akweks, Manager of Online Student Services, SBCTC Summer 2005 Presentation at the YVCC Distance Learning Seminar Creating accessible web pages ensures that ALL persons who visit your web sitehave the SAME information available.

2. Student Access: Barriers and Assistance Technologies

3. Visually impaired/low vision students use screen enlargement technology. Consistent layout Logical organization of material Make life much easier for this population.

4. Screen Magnifiers • Screen magnification systems enlarge portions of the screen to provide easier access for learners with limited vision. • May be accompanied by audio output to assist in accessing the information and navigation through the course material.

5. Students who are blind tend to rely on screen reading technology.

6. Screen Readers • This software, used by learners who are blind, allows web page text to be read out by a voice synthesizer. • A web site is navigated using keyboard access only. For example, Tab moves the focus sequentially through the hyperlinks on a given page, while up and down arrows are used to review drop down menus.

7. Screen readers read text, however, they: pronounce words phonetically without comprehension of the meaning of words, sentences or graphical layouts do not read content in order, all links on a page are read first, followed by static content. do not read color, layout, pictures, movies, sound files, animations, etc. take time and effort to learn how to use provide students with a limited amount of web-based course material, or no ability to participate in class discussions because they are held in a Java-applet chat room

8. Students with limited upper-body mobility

9. Use alternative/non-traditional computer input device technology, such as: large trackballs sip-and-puff devices head-controlled mouse and other adaptive technologies

10. Alternative Technologies • Alternative keyboards - These keyboards offer larger or smaller target areas for users with loss of gross or fine motor control. They may feature mouse emulation mode so that the arrow keys or numeric keypad of the same keyboard are used for mouse movements. http://www.ergosci.com/keyboards.html http://www.utoronto.ca/atrc/reference/tech/altkey.html • On-screen keyboards - This software provides an image of a keyboard on the monitor, which can then be accessed using a switch, trackball or other pointing device. Features may include scanning, dwell selection and word prediction for text. Input occurs using alternative input methods to select on-screen keys or buttons. • Voice recognition - The user speaks into a microphone to navigate web pages or input text. Voice commands may be used to execute customized macro sequences for specific frequent tasks. http://www.voicerecognition.com/ • Text-to-speech - Users with print processing impairments will often use text-to-speech technology to select blocks of text which are then read back to them by a voice synthesizer. The creation of audible speech output from computer readable text reinforces the visual reading process, or may be the preferred modality.

11. Screen Magnifiers • ZoomText Demo • http://www.aisquared.com/Products/zt9/Z9FreeTrial.cfm • Microsoft XP Screen Magnifier Tutorial • http://www.microsoft.com/enable/aging/scan2_large.aspx

12. THE LAW for Public Institutions • ADA Title II - the regulation requires that a public entity, such as a community college, take appropriate steps to ensure that communications with persons with disabilities are as effective as communications with others.

13. THE LAW for Public Institutions Section 504 Of The Rehabilitation Act* Title 29, Chapter 31 • There needs to be assistive technology/ies to help those with disabilities access information. • Electronic information needs to be put into an accessible form so assistive technologies will work.

14. THE LAW for Public Institutions Section 508 of The Rehabilitation Act of 1973 • In 1998, an amendment was signed into law requiring that electronic and information technology – including websites and online courses – developed or purchased by the U.S. federal government be accessible by people with disabilities. (Referred to as "Section 508," this was passed as part of the WorkForce Rehabilitation Act of 1973.)

15. Washington State LAW for Public Institutions Applicable to everyone • 1. What is a disability? The rules of the Washington State Law Against Discrimination (RCW 49.60) define a disability as any abnormal sensory, mental or physical condition that: • Is medically cognizable or diagnosable • Exists as a record or history • Is perceived to exist • 2. Is the federal law different? Yes. The biggest difference is that federal law requires the medical condition to be permanent or long lasting. Federal law also requires the disability to have an impact on a major life function. State law covers medical conditions that are temporary or have short duration. State law also applies to permanent or long-term conditions. • http://www.hum.wa.gov/generalInfo/faq_disability.htm

16. World Wide Web Consortium (W3C) • Agency that leads the way to set the standards for Accessibility Implementation • Goals include making the web accessible to all • Developing a set of guidelines explaining how to make web content more accessible to people with disabilities, and, as a result, to all users.

17. World Wide Web Consortium User Considerations • May not be able to see, hear, move, or process some types of information easily or at all • May have difficulty reading or comprehending text • May not have or be able to use a keyboard or mouse • May have a text-only screen, a small screen, or a slow Internet connection

18. W3C User Considerations • May not speak or understand fluently the language in which the document is written • May be in a situation in which their eyes, ears, or hands are busy, or there is an interference (e.g., driving to work, working in a loud environment, etc.) • May have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

19. Universal Design • Accessible, intuitive, simplified. • Useable design does what a user expects it to do • Navigation, design and content that are as easy to find and use as possible. • If something is easier for someone with a disability to use, chances are it’s easier for everyone to use • Universal design keeps in mind the way people really use the web • Scan rather than read • Change settings according to personal taste • We don’t all have blazing fast connections, updated browser versions, all the latest multi-media plug-ins, etc.

20. Universal Accessibility Definitions Anyone can visit a particular web site, with any kind of web browsing technology, and access material and interact with the site without difficulty. Gives users a better chance of understanding the content presented on a site, as well as successfully navigating throughout the site. Includes mechanisms and strategies that accommodate the needs of the broadest range of users of computers and telecommunications equipment, regardless of age or disability.

21. Amounts of Information Text Equivalents Color Content Navigation Tables Formatted Click Effort Low to No Simple Tests for Universal Design

22. Amounts of Information Per Screen • Not too much information on a page. Large volumes of information is confusing to most people, specially if the arrangement seems arbitrary. • Online users tend to scan rather than read. Design for effective scanning. Organize and present content in scan-friendly formats, such as bullet lists & step charts.People read fastest at 100 character column width. Studies show that users prefer a 55 character column width.

23. Text Equivalents • The most common non-text elements are images. • Use the alt attribute to describe the function of each visual. • Ensure that image “Alt” tags make sense when read out loud. If the image is associated with an action, include that action in the tag

24. Using Color • When deciding on a color palette, make sure there is adequate contrast. (lights & darks) • Don’t rely on color alone to get a message across. i.e. “Fields in red are required” or “Click the green button to continue” • Think in terms of low vision and color blindness.

25. Using Color

26. Content • Do not use highly technical, vague, very long sentences. These are likely to be misinterpreted by many. • Include the format and size in links to files that may open slowly or require plug-ins (.pdf, .swf, etc.)

27. Navigation • Navigation of a web page should not be cumbersome or confusing. • If you cannot get around the screen easily using only your tab key, then you probably have either an inaccessible or non-user-friendly site. • Label navigation using terminology that users expect. • i.e. Large, not Venti • Avoid “What should we call the exit” discussions during design phase.

28. Tables Formatted • Screen readers may not properly process data within improperly formatted text elements. • Requires proper formatting to be read from left to right. Make line-by-line reading sensible. • Summarize the section’s significance.

29. Tables Formatted Does your content make sense when read exactly as it is displayed? For example this… Would be read by some screen readers like this…

30. Data Tables • For accessible data, use <th> (table header) element instead of <td> (table data) for the header cells: • This allows a screen reader to tell the user which header each data cell is related to. • Use the <scope> attribute to tie a header to either a column or a row. • The <caption> element provides a brief description of a table. • A sighted person can easily glance at a table, see what it contains and decide if they want to study it further. A person using a screen reader can’t do that unless we add a summary attribute to the table element. • Great how-to article: • http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

31. Bugs Bunny Shorts <table summary=“Bugs Bunny short titles, with director name theatrical air date"> <caption>Bugs Bunny Shorts</caption> <tr> <th scope=“col”>Title</th> <th scope=“col”>Director</th> <th scope=“col”>Air Date</th> </tr> <tr> <th scope=“row”>Bully For Bugs</th> <td>1000</td> <td>1947</td> </tr>

32. Click Effort • Does it require excess navigation to move from one page or section to another. • A good measurement of is to ask yourself, "Is the page I am on worth the effort it took to get here?"

33. Low to No • Insist that the site does not use too many features. • LOW to NO animations, frames, pop-up windows, mouse-overs, pull down menus or blinking links.

34. Universal Design Review • 1. Images and graphical buttonsProvide text equivalents for visuals and ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped. • 2. Graphs and chartsSummarize the content of each graph and chart or use the "longdesc" attribute to link to the description or data. • 3. MultimediaProvide captions or transcripts of important audio content. Provide text or audio descriptions of important video content. • 4. TablesFor tabular data, use the <CAPTION> element and/or the summary attribute. For tables with complex row and column headers, use the headers attribute on cells. • 5. FramesProvide a title for each frame and frame page so that users can track frames by title.

35. Universal Design Review • 6. Hypertext linksUse descriptive link text, not just "click here." Ensure that each link makes sense when it is read out of context. When providing links to large files for download, report the file size on the page. This is helpful alert to those with slower Internet connections. • 7. Image mapsUse client-side image maps to provide accessible text for image map hot spots. If you use server-side maps, provide equivalent text links. • 8. Scripts, applets, and plug-insWhere possible, provide alternate content for scripts, applets, and plug-ins so important information is not lost when those features are unsupported or turned off. • 9. FormsAssociate labels with form elements. • 10. Correct HTML mark-upDo not use structural markup (headings, lists, etc.) for visual presentation effects.

36. Universal Design Review • 11. Cascading style sheetsControl presentation and layout with style sheets (CSS) rather than presentation elements and attributes. But ensure that the page can be read/navigated with the style sheet turned off. • 12. Skip to main contentProvide methods for skipping over navigation links to get to main content of page. • 13. Activation of page elementsMake sure that all elements on a page can be activated by a variety of means and not just by clicking with a mouse (i.e. keyboard shortcuts). • 14. ColorDo not use color alone to transmit information. • 15. Check accessibilityCheck the accessibility using available tools, such as IBM Home Page Reader and Bobby.

37. BREAK TIME15 minutesPlease return at 2:15

38. Making YOUR College Web Pages Accessible

39. The Three EEE's Make sure your sites are: • Engaging • Equitable • Effective from a simplistic approach.

40. Customize Your Course Appearance • Make choices that make your course look unique, but don’t let creativity overshadow usability. • Ensure High Contrast of Colors • DO NOT use background images that obscures text.

41. Images & Alt Tags • Remember to use the “ALT” attribute to describe a function or characteristic of any image content • Keep ALT text simple/understandable • Include action in ALT text • For bullets use “ ” or “*” <a href="../coursecatalog/default.asp"><img src="missing.gif"></a> <a href="../coursecatalog/default.asp"><img src="missing.gif" alt="Click here for class schedule"></a>

42. Animations • DO NOT use animations that are unnecessary – they drive ADD people crazy. …everyone else also finds them distracting

43. No LONG Text Pages • Summarize • Use lists • Supporting text may be included within content pages or as a link to a file

44. Multimedia Effects • Provide alternative formats for those students that cannot use movies, sounds, or enhancements • Include a description of the effect in a text box and directions for alternative formats

45. Hypertext Links • Use text titles that make sense – even out of context • Read out loud as you are titling • Make them CONCISE, not wordy • Warn users if they are clicking something that will take a long time to open/download. • Provide users a way to skip over long lists of links • Skip navigation link • < a href="#content">skip navigation</a> • An anchor is placed before the start of the main content: • <a name="content"></a>Classes begin… • Invisible .gif with code in ALT tag that can be used by screen-readers to skip navigation image link: • <a href="#content"><img src="skipnav_image.gif" alt="Skip Navigation Links"></a>

46. Page Organization • Use consistent page structure • Include outlines at the beginning of long documents • Use ordered lists • Use white space generously

47. Frames • Title all pages and all frames • If you can’t avoid frames, manage your pages with break lines • Provide orientation cues whenever possible to assist those who are not accessing visual information • Test ALL framed pages

48. Quizzes • Multiple choice, matching, and true-false quizzes may present access difficulties for some users. • Provide learners with introductory information to orient them to the functionality of the quizzes. • To ensure access for all users, it is recommended that non-interactive text versions of the self tests be developed as an alternative.

49. White Board & Chat • Advise users of potential barriers to accessibility in an "orientation" or "accessibility information" page. • Use alternatives, such as using e-mail, in order to include all students.

50. Validating Your Work • Check your HTML pages by validating with one of several automatic tools available online. • By using validation methods in the early stages of design, problems can be noted before you are well into course construction. • Accessibility issues identified early are easier to correct and avoid.