1 / 33

Website Accessibility Testing

Website Accessibility Testing. Todd M. Weissenberger Web Accessibility Coordinator University of Iowa http:// itaccessibility.uiowa.edu. Version 1.1 • May 2013. The Line on Accessibility. As many as 1 in 5 web users may experience accessibility issues

brosh
Download Presentation

Website Accessibility Testing

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. Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa http://itaccessibility.uiowa.edu Version 1.1 • May 2013

  2. The Line on Accessibility • As many as 1 in 5 web users may experience accessibility issues • Accessibility strategies often provide a concrete response to universal usability issues • Guidelines and tools exist to assist designers and developers • Web standards • Accessibility Legislation • Development and Evaluation Tools • End-User technologies • Tools can indicate the presence of accessibility barriers • Human testing is a necessary part of accessibility testing

  3. An Accessibility Assessment can… • Provide insight into your site’s accessibility • Generate a roadmap of corrective tasks • Expose non-standard practices and outcomes • Help you understand your site’s core functions in a deeper context

  4. Site Assessments • Self-Assessment • Performed by site managers prior to initial Web Accessibility Evaluation • Addresses “low-hanging fruit” and common compliance flags • Likely to catch numerous occurrences of non-conforming code • Site assessment by ITS • Automated evaluation tool • Recommendations and best practices • Assistance with interpretation/remediation/rebuilding

  5. Evaluation Scope: the 3 C’s • Content • Site segments • Content types (HTML, PDF, Media, Office) • Criteria • Guidelines, standards, policy • Tasks, outcomes • Conformance • Essential conformance (Yea/Nay) • Detailed review (number of issues, where they are located) • In-depth analysis (remediation/repair options)

  6. What to check • What content do you want to test? • Top 20% of visited content • Content that supports unit’s core function • Content for which an accommodation request has been made • What file types are involved? • Media, PDF, Office, Flash, other? • Can content be presented in alternative formats? • What content is under review? • Remediate • Rebuild • Discard

  7. What to look for • Text Alternatives • Keyboard Operability • Document Structure/Heading Levels • CSS Contrast/Element Styles • Forms references and labeling • Table structure and association

  8. Types of Assessment • Automated assessment • Covers a lot of ground • Yields objective results • Defined by the tool’s capacity • Manual assessment • Covers ground more slowly • Requires competency of testers • Results may be informed by user experience • Task and process based

  9. What to use • Online Tools • WAVE • FAE • Juicy Studio • Plug-Ins and Extensions • Web Developer • WAVE • Web Accessibility (FAE) • Juicy Studio • FANGS • Web Accessibility Toolbar • Manual examination • Title and heading text • Visual focus indicators • Script and timing control • Client-side forms validation • Indicating changes in language • Multimedia captioning checks

  10. Text Alternatives • ALT text provided for images • ALT text accurately conveys meaning and function • Empty ALT attributes employed for decorative images • Links containing images and text are combined into a single link • Text alternatives to non-text content • Links and other ALT content provided for embedded objects • CAPTCHAs are visually accessible • FRAME and IFRAME use the TITLE attribute

  11. Missing or questionable ALT text (WAVE)

  12. Missing or questionable ALT text (WAT)

  13. Checking ALT text in Web Developer Toolbar

  14. Keyboard Accessibility • All content and functionality are available using the keyboard • Keyboard event handlers are equivalent to mouse handlers • No keyboard traps exist • Objects are highlighted onfocus • Custom key shortcuts don’t conflict with the parent application or operating system

  15. Document Structure • Pages use an appropriate DTD • All pages include a descriptive <title> • Pages include appropriate meta information • Page language identified by the LANG attribute • Changes in human language are indicated by the use of the LANG attribute

  16. Heading Levels • Open page or document • In WAVE toolbar, select Outline • In Web Accessibility toolbar, select Information >> View Document Outline • Questions: • Does heading structure skip levels? • Does page include <h1>? • Are there <h2> elements preceding navigation lists?

  17. FAE Toolbar: Missing DTD, Title, and LANG

  18. Visual Appearance

  19. Broken Heading Structure (WAT)

  20. Forms • Form inputs accompanied by <label> OR use the TITLE attribute • Forms are keyboard operable • Users can review and correct inputs before submitting form • Form validation and alert include descriptions of errors • Form validation and alert are interactive for users of assistive technologies

  21. Check Form Labels • Web Accessibility Toolbar • Select Forms >> View Form Information • All input elements should have ID attributes, and be accompanied by labels • WAVE • Run Errors, Features, and Alerts report • Note missing label tags positioned next to form inputs

  22. Missing Form Labels: Web Accessibility Toolbar

  23. Missing Form Labels: WAVE

  24. CSS, Contrast and Text Size • Color contrast ratios • 4.5:1 (14 point text or smaller) • 3:1 (larger than 14 point) • Font sizes described in em, % or names • Text in form inputs is scalable • Pages equally legible when style sheets are omitted

  25. CSS • Open the page or document • In WAVE toolbar, select Disable Styles • In Web Accessibility toolbar, select CSS >> Disable Styles >> Disable All Styles • Questions: • Is page still legible? • Does the page order make sense?

  26. Color Contrast • Open Colour Contrast Analyser • Use eyedropper to select foreground/background colors • Results visible in CCA • Questions: • Does large text meet contrast standards? • Does small text meet contrast standards?

  27. Colour Contrast Analyser

  28. Text Size • Open the page or document • Firefox • Select VIEW >> ZOOM TEXT ONLY • Increase Zoom (Win: Ctrl ++, Mac: Cmd ++) • Internet Explorer • Select VIEW >> TEXT SIZE >> LARGEST • Questions: • Does text zoom at all? • Does text remain legible within page layout? • Are form inputs scalable?

  29. Text Zooming in Firefox

  30. Data Tables • Tables are not used for page layout • Tables use <th> and <td> to structure and present data • Table headers include SCOPE and ID attributes • Data cells include HEADERS attribute • Tables include CAPTION and SUMMARY

  31. FAE: Table construction

  32. Dynamic Content • Content that updates automatically can be user-controlled • Content that updates automatically uses ARIA alert or live role to notify user as appropriate • User can obtain extension for timed events

  33. Multimedia • Captioning and Transcripts • Synchronized delivery • Searchable • Keyboard operable

More Related