1 / 54

Designing Accessible Web Applications

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

billythomas
Download Presentation

Designing Accessible Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Accessible Web Applications • Overview • Accessibility and disabilities • Assistive devices • Accessibility standards • Developing accessible applications • Software

  3. 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”

  4. Disabilities

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

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

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

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

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

  10. WAI-Section 508 Cross-Reference

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

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

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

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

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

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

  17. Vischeck Original Page

  18. Vischeck As viewed by someone with red/green color blindness

  19. 4. Be careful with style sheets (d) Documents shall be organized so they are readable without requiring an associated style sheet. • Don’t include text positioning in the style sheet

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

  21. 5. Supplement image maps

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

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

  24. 7. Identify table elements

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

  26. 8. Use markup for complex tables

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

  28. 9. Title each frame

  29. 9. Title each frame

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

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

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

  33. 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)

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

  35. 14. Design accessible forms • Associate labels with form objects.

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

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

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

  39. 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).

  40. 18. Keep everything updated • Ensure that equivalents for dynamic content are updated when the dynamic content changes.

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

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

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

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

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

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

  47. Accessibility in Oracle Web Forms • Additional tools are provided for Oracle Applications 11i

  48. Accessibility of PDF • Use the Adobe Acrobat 5.0 “Make Accessible” plug-in to allow screen readers to read PDF • Use Acrobat Exchange to scan the PDF file and produce OCR output • Convert the PDF to HTML (link available at: http://access.adobe.com/simple_form.html)

  49. References • W3C Web Accessibility Initiative • 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)

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

More Related