Designing Accessible Web Applications Leslie M. Tierstein, STR LLC Hilary Benoit, W R Systems, Ltd.

Accessible Web Applications Overview Accessibility and disabilities Assistive devices Accessibility standards Developing accessible applications Software Accessible Web Apps

Accessibility Accessible: Something that can be used by persons with disabilities The software or device should be able to transform itself into a needed format The software or device should be compatible with access aids providing “Assistive Technology” Accessible Web Apps

Disabilities Accessible Web Apps

Assistive Technology (AT) Software or devices that transform a computer program into a form accessible to a person with disabilities Screen readers Screen magnifiers Speech synthesizers Voice input software Alternative keyboards Pointing devices Braille displays Accessible Web Apps

Accessibility Standards W3C Web Content Accessibility Guidelines 1.0 Web Accessibility Initiative (WAI) checkpoints Section 508 originally in the Rehabilitation Act of 1973 expanded and strengthened by the Rehabilitation Act Amendments of 1998 - paragraph 1194 effective for federal acquisitions as of June 21, 2001 Accessible Web Apps

Section 508 “Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.” Accessible Web Apps

Section 508–B Technical Standards 1194.21 - Software applications and operating systems (12 rules) 1194.22 - Web-based intranet and internet information and applications (16 rules) Both cover essentially the same areas of concern, with additional issues in 1194.22. Accessible Web Apps

Section 508 – Areas of Concern Graphics Multimedia Mouse vs. keyboard accessibility Data Tables Frames Animation Scripting Online Forms Navigation Timed Response Dynamic Content Scripts and Applets Language Color Screen Flicker Bitmap Images Image Maps Accessible Web Apps

WAI-Section 508 Cross-Reference Accessible Web Apps

HTML 4.0 Enhancements Accessibility improvements Better support for assistive technology (eliminate “abuse” of HTML structural elements for layout for formatting) New structural elements (esp. for tables) Alternate content (for graphics and objects) Easier navigation and orientation Better handling of multi-lingual documents and applications Accessible Web Apps

1. Provide text equivalents (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). Accessible Web Apps

2. Provide multimedia alternatives (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Accessible Web Apps

2. Provide multimedia alternatives Provide captioning and/or transcripts of audio and descriptions of video. Create a caption file using software such as MAGpie, or in a text editor. Software packages such as Apple’s Quicktime can synchronize the caption file with the video. Accessible Web Apps

3. Don’t rely on color alone (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Color is a secondary indicator of meaning Foreground and background colors contrast Accessible Web Apps

3. Don’t rely on color alone Using contrasting colors: http://www.lighthouse.org/color_contrast.htm Vision simulator for color blindness: www.vischeck.com Accessible Web Apps

Vischeck Original Page Accessible Web Apps

Vischeck As viewed by someone with red/green color blindness Accessible Web Apps

4. Be careful with style sheets (d) Documents shall be organized so they are readable without requiring an associated style sheet. Accessible Web Apps

5. Supplement image maps (e) Redundant text links shall be provided for each active region of a server-side image map. Accessible Web Apps

5. Supplement image maps Accessible Web Apps

6. Use client-side image maps (f) Client-side image maps shall be provided instead of server-side image maps. If the “hotspots” are complicated, divide a large image into several smaller images. Assign each image an appropriate “alt” attribute -- or -- Include a text anchor that links a description to the whole graphic (Server-side maps are older, slower technology anyway.) Accessible Web Apps

7. Identify table elements (g) Row and column headers shall be identified for data tables. Accessible Web Apps

7. Identify table elements Accessible Web Apps

8. Use markup for complex tables (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. Accessible Web Apps

8. Use markup for complex tables Accessible Web Apps

9. Title each frame Frames shall be titled with text that facilitates frame identification and navigation. When users with a non-graphical browser like Lynx visit a FRAMESET page, they have to select which frame to open. They must choose the frame they want from a list of frames. Meaningful frame titles must be used so that users can easily identify the frame they want to open. Accessible Web Apps

9. Title each frame Accessible Web Apps

9. Title each frame Accessible Web Apps

10. Avoid screen flicker (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Do not use: <blink> <marquee> Flashing text Turning graphics on and off Accessible Web Apps

11. Consider text-only pages (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. Accessible Web Apps

12. Provide text equivalent for scripts (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. Accessible Web Apps

13. Use accessible plug-ins and applets (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). Macromedia Flash is not accessible Oracle’s Web Forms applet is (more later) Accessible Web Apps

14. Design accessible forms (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. Accessible Web Apps

14. Design accessible forms Associate labels with form objects. Accessible Web Apps

15. Avoid repetitive navigation links (o) A method shall be provided that permits users to skip repetitive navigation links. Accessible Web Apps

16. Alert users to time-outs (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Accessible Web Apps

16. Alert users to time-outs Provide a way to enable users to allow timed instructions to continue without stopping. Notify users when a process is going to time out and allow them to indicate whether more time is needed. Do not have timed responses for important messages. Display the message until the user closes it. For Windows software, the time required for responses can be tied to settings that the user can customize through the Control Panel. Accessible Web Apps

17. Indicate the language of the text Clearly identify changes in the natural language of a document’s text and any text equivalents (e.g., captions). Accessible Web Apps

18. Keep everything updated Ensure that equivalents for dynamic content are updated when the dynamic content changes. Accessible Web Apps

19. KISS Use the clearest and simplest language appropriate for a site’s content. Basic rules for good writing apply. To test your document, try using the Gunning-Fog reading measure: low score = easy to read. Use Microsoft Word to give readability score: Tools --> Options --> Spelling & Grammar Accessible Web Apps

20. Provide alternatives to objects Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Use <noscript> Accessible Web Apps

Accessibility in Oracle Web Forms Web forms are java-based Section 508 1194.21 applies See white paper at http://www.oracle.com/accessibility/index.html Accessible Web Apps

Accessibility in Oracle Web Forms All items should have “speakable prompts”, which are seen by screen readers Hint Text, Prompt, Label or Tooltip Text (in this order of precedence) Keep speakable prompts unique per item Supply speakable prompts for items with no on-screen labels Accessible Web Apps

Accessibility in Oracle Web Forms All functionality must be accessible from the keyboard Define access keys from push buttons Make the item keyboard navigable Since iconic items cannot have access keys, keyboard accessibility must be provided by alternate means (eg, a pull-down menu) Navigation between items and between screens Accessible Web Apps

Accessibility in Oracle Web Forms Color usage should be under the control of the user Use “automatic” color to use either “Oracle” look and feel or “generic”, which consults the users’ color display settings Only the Java runtime engine correctly interprets automatic color Accessible Web Apps

Accessibility in Oracle Web Forms Additional tools are provided for Oracle Applications 11i Accessible Web Apps

References W3C Web Accessibility Initiative Section 508 www.w3c.org/wai/references HTML 4.0 Accessibility Improvements WAI Guidelines Section 508 http://www.section508.gov/final_text.html (least amount of bureaucratese) Accessible Web Apps

Accessibility Compliance Software Bobby (www.cast.org/bobby) analyzes web pages against the WAI Guidelines Insight (www.ssbtechnologies.com) analyzes web pages against Section 508 Standards Web Page Backward Compatibility Viewer (www.delorie.com/web/wpbcv.html) turn off selected features and view the page as though your browser was not able to interpret them Accessible Web Apps

Accessible Web Apps

Assistive Software textHELP (www.texthelp.com) screen reader - enables a PC to read text in any windows-based application - download a free demo. ReadPlease (http://www.readplease.com) reads text of web pages and email - freeware with upgrades at minimal cost WebHEARit (www.prodworks.com) enables any Internet Explorer application to “speak” a Web page’s content and navigational links. Accessible Web Apps

About the Authors Leslie Tierstein is a Technical Project Manager at STR LLC in Fairfax VA. She can be reached at ltierstein@strllc.com. Hilary Benoit is Director of Quality at W R Systems, Ltd in Fairfax VA. She can be reached at hbenoit@wrsystems.com. This presentation is available on line at: http://home.earthlink.net/~ltierstein, http://www.strllc.com and http://www.wrsystems.com Accessible Web Apps