Accessibility Efforts and Toolkits

Web Content Accessibility Guidelines (WCAG v2.0)

Websites and web site content must be developed and maintained with attention to accessibility standards and in compliance with Section 504 and 508 of the Rehabilitation Act, the Americans with Disabilities Act, and university non-discrimination policies. All websites to the extent feasible, must be made accessible to people with disabilities. If it is not feasible, alternative methods must be made available to complete the same tasks. Compliance with the WCAG Standard 2.0 Level AA (including Level A) standard is required.

Compliance requires more than just good HTML design. We need to additionally address contrast and color blind issues in the design of the web page. Also, navigational techniques must be considered.

University Technology Services is summarizing Current Efforts to create a culture of compliance. Additional information is available by sending an email request to [email protected] . Also, issues may be reported by sending an email request to [email protected] .

Training

You may want to review training materials before you start. The training materials are listed in order of skill depth.

Basic Checklist

Start with the W3C Web Accessibility Initiative Tips on Designing for Web Accessibility, the W3C Web Accessibility Checklist, and the Siteimprove Web Accessibility Checklist.

As you review checklists, web sites, and content, address the following accessibility factors list first, using the tools identified throughout this document:

  • Broken Links and Misspellings: Fixing broken links and misspellings improves usability for all your site visitors.

  • Avoid unnecessary stylistic differences and use style tags that can be handled by a screen reader. Specifically, avoid using italics, bold, ALL UPPER-CASE, and differently styled content to highlight important content or to differentiate headings. Review suggestions at WebAIM Fonts and WebAIM Using Headings for Content Structure.

  • Link Text and Appearance: Link text is useful if it is informative and useful. Review suggestions for handling link text at WebAIM Link Text and Appearance Tutorial.

  • Visual Text / Background Contrast: Review material at Siteimprove How To Navigate the Challenges of Color and Web Accessibility.

  • Headings: Review material for appropriate use of headings at W3C Web Accessibility Headings Tutorial.

  • Alternative Text / Images: Images require actions based on the information that is conveyed by the image. Review the tutorial at W3C Web Accessibility Images Tutorial. Best practices are simply described at Siteimprove Accessibility: Image Alt text best practices. A decision tree to help you decide the best image alt attribute is presented at W3C Web Accessibility An Alt Decision Tree.

  • List Styles: Lists present useful groups to organize materials, but lists require careful management to convey the context of groupings and organizations. Review the list tutorial presented at W3C Web Accessibility Content Structure - Lists Tutorial.

  • Multiple Avenues for Multimedia: Multimedia requires transcripts, captions, and descriptions. Several options are available for use at Oakland University described in the document Video Captioning Options. Consider minimizing the general use of multimedia and limiting use to those situations where multimedia adds value to the information and content. UTS and Communications and Marketing are ready to assist with decisions and can coordinate external services for the creation of captions or transcripts. Such services are funded by the department requesting multimedia use. Review tutorial information about multimedia presented by the tutorial WebAIM Captions, Transcripts and Audio Descriptions or the article W3C Web Accessibility Time-based Media Understanding Guideline 1.2. Communications and Marketing suggests review of the following list of best practices as a starting point:

    • Captions are available and accessible for all viewers and audiences.
    • One to three lines of text appear on screen all at once, stay there for three to seven seconds, and are then replaced by another caption.
    • Do not cover graphics or other essential visual elements of the picture.
    • Require the use of upper and lower case letters.
    • Use a font similar to Helvetica medium, 12 pt.
    • Have good resolution.
    • Limit characters to 32 characters per line.
    • Captions are synchronized and appear at approximately the same time as audio.
    • Words are verbatim when time allows or as close as possible in other situations.
    • All words are captioned, regardless of language or dialect.
    • Use of slang and accent are preserved and identified.
    • Add music or other descriptions inside square brackets such as [music] or [laughter].
    • Use italics when a new word is being defined or a word is heavily emphasized in speech.
    • Speakers should be identified when more than one person is onscreen or when the speaker is not visible.
    • Punctuation is used to clarify meaning.
    • Spelling is correct throughout the production.
    • Write out sound effects when they add to understanding.

    • Options for presenting video on a web site with a transcript are described by 3Play in the articles 5 Ways to Improve SEO for Short Videos Using Transcripts and Captions and How to Optimize Long-Form Video Transcripts for SEO: The Wrong Way and the Right Way.

  • Complex Images: Charts, graphs, tables, and maps are examples of complex images that require both information about the display and added context. Review presentation suggestions in the complex images material in the WebAIM Alternative Text Tutorial.

  • Keyboard Navigable Content: Accessibility compliance requires that all content be accessible with the keyboard alone. Navigation order is especially important for those who rely on keyboards for access. Review the tutorial WebAIM Keyboard Accessibility for information and design suggestions.

  • Documents in Accessible Formats: Documents must be presented in accessible formats. Review the suggested accessibility materials for the software used to create documents. In general, acceptable fonts include Times New Roman, Verdana, Arial, Tahoma, Helvetica, or Calibri. The smallest acceptable font is 12 pt. Color contrast ratio between foreground text and background color should be at least 4.5:1. The Section 508 PDF checklist covers details for PDF documents. W3C also presents WCAG 2.0 PDF Techniques for review.

Accessibility Solutions, Testing, and Verification Tools

Document Tools

Video Captioning

Core Centralized Web Site Validation Software

  • Siteimprove: UTS is in the process of rollout based on Percussion managed sites and other critical sites as prioritized. We can provide access to Siteimprove to those employees responsible for maintaining significant portions of the university web site. The Phase One prototype environment became effective April 2017. If you want to use Siteimprove, send your contact information to [email protected] , confirm you have completed training in Percussion, and include the section of the university web site that you are authorized to maintain.

Chrome Browser Extensions

  • AxE: Validate and point out accessibility compliance failures in web pages.

  • ChromeVox: Chrome extension that is a screen reader, useful for understanding and troubleshooting accessibility issues.

  • WAVE: Visual tool to help highlight accessibility issues.

Firefox Browser Extensions

  • AxE: Firefox extension to validate and point out accessibility compliance failures in web pages.

  • Fangs: A Firefox plugin that will emulate what a screen reader comprehends and displays in plaintext to help speed up troubleshooting and checking.

  • Inspector Sidebar: A nice Firefox tool to quickly analysis multiple pages within a site

Web Sites and Application Tools

  • Tenon.io: Quick compliance validation tool.

  • Pa11y: Accessibility compliance validation tool. Pa11y has a command line, dashboard and automated scheduling component

  • AC Checker: Web site validation Tool

  • WAVE: Web site validation Tool

  • Functional Accessibility Evaluator: 2.0 spiders a website for WCAG 2.0 AA requirements and generates a summary report NOTE: You need to create an account to spider a website. One important feature you won’t find with commercial evaluation tools is a detailed list of the rules and rulesets used to evaluate accessibility.

Screen Reading Tools

  • ChromeVox: Chrome extension that is a screen reader, useful for understanding and troubleshooting accessibility issues.

  • Mac OS - Voiceover: Mac OS's screen reader is good with Safari (can be used with other browsers too). Additionally good for checking accessibility with PDFs, software and more. Deque University - VoiceOver Cheat Sheet

  • Windows - Narrator: Microsoft Windows built in screen reader. Good for checking accessibility on PDFs, software, office documents and more.

Vision Testing Tools

Social Media

More Tools

References and Resources

Upcoming Guidelines

  • DBHowTo