Best Practices for Website Accessibility

Auditory Impacts or Deafness:

• Provide transcripts of audio content and Closed Captioned or Full Text transcripts for video materials where applicable.
• Transcript of audio descriptions (for persons who are DeafBlind)
• 3Play Media (http://www.3playmedia.com/): cost-effective technique for Captioning video content.

Cognitive Impacts:

• Do not use flashing or strobe content.
• Disable auto-play on media.
• Provide easy-to-use controls and navigation schemes.
• Employ consistency in labeling and navigation, where possible.
• Use the clearest, simplest language appropriate to the content.
• Provide control over all time-based media (i.e., slideshows).

Visual Impacts and Blindness:

• Use well-structured and semantic HTML.
  • Here’s an example: imagine you have a heading for your website that says “Welcome to My Awesome Recipes!” Instead of using `<div>Welcome to My Awesome Recipes!</div>`, you would use `<h1>Welcome to My Awesome Recipes!</h1>`. The `<h1>` tag tells the browser (and anyone reading the code) that this is a very important heading.
    Using the right tags makes your website code cleaner, easier to understand, and even helps things like search engines and screen readers for people with visual impacts understand your website better!
• Use meaningful ALT attributes on images.
  • Adding “alt text” to your images is like giving them a short, descriptive caption so people who can’t see them still understand what they’re about.
• Do not use tables for layout purposes.
• Use headings in chronological order (think if someone had the page only displaying in a list format)
• Label all form elements.
• Properly linearize content, especially forms to ensure a logical flow of information that can be easily understood and navigated by assistive technologies and keyboard users.
• Provide sufficient contrast between foreground and background elements.
  Vischeck (http://www.vischeck.com/): Simulates colorblind vision.
• Use appropriate font types, proper spacing, and use of bold, italic and color to make the content easier on the eyes to read.
• Avoid using pop-up windows.
• Do not use Flash™ for navigation and avoid using it in other places, where possible.
• Provide access keys and “skip to content” links.
• Use WAI-ARIA landmarks where possible.
• Position hidden content of-screen instead of using “display:none.”
• Provide additional guidance and controls using of-screen content (i.e. descriptions of the page layout and available access keys).
• Provide transcripts of audio content and Full-Text transcripts or Captioning for video materials where applicable.
• Do not use flashing or strobe content.
• Provide easy-to-use controls and navigation schemes.
• Employ consistency in labeling and navigation, where possible.
• Use the clearest, simplest language appropriate to the content.
• Provide control over all time-based media (i.e., slideshows).
• Audio descriptions.

Many types of document types may not be accessible to screen readers including the following:

• Images
• PDF’s
• Word documents
• PowerPoint
• Flash or streaming video

Sometimes the software used to create specific file types includes features which allow a user to add accessibility functionality. The problem is that many times using these features properly takes longer than creating the original document.

The easiest method for making a document accessible is to copy the text from the file and paste it into a standard web page. This is especially true for Microsoft Word files with minimal formatting and imagery. Documents designed with page layout software such as InDesign or Quark many times depend on graphic elements to convey their message appropriately. The design staff within the Marketing & Communication office at Western Oregon University will assist individuals wishing to convert graphic layouts of marketing material into an accessible webpage.

• Use the Divi Builder Accessibility tool
  • Click on the glasses icon in the bottom left corner on any page of your site while logged in and it will give you options of the items to check. Mainly check the Headings and Color Contrast.
• WAVE Web Accessibility Evaluation Tool http://wave.webaim.org/
• Accessibility self test at http://www.lgta.org/accessibility/initial-assessment.html
• Lift Software’s accessibility test at http://www.usablenet.com/

While creating websites, developers throughout the WOU –System should adopt and exceed the web standards established by the Worldwide Web Consortium (W3C) for the creation of online content. Specifically consult the W3C’s page on accessibility (http://www.w3.org/TR/WCAG/)

• Vischeck (http://www.vischeck.com/): Simulates colorblind vision.
• Web Accessibility Evaluation Tool (WAVE) (http://wave.webaim.org): Accessibility evaluator.
• A number of plugins are available for the Firefox web browser (http://www.mozilla.org/en-US/firefox/new/?from=getfirefox) in testing your website’s compliance with accessibility guidelines:
• AInspector for WCAG Accessibility Evaluation (https://addons.mozilla.org/en-US/firefox/addon/ainspector-wcag/): Easy to use and provides clear, actionable results.
• WCAG Contrast Checker (https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker/): Tests to see if elements on the page provide enough contrast to be visible to those with impaired vision.