• Accessibility Principles
• Check Accessibility
• Resources

Accessibility Principles

MU has adopted Web Content Accessibility Guidelines (WCAG) 2.0 level AA, which defines four principles of accessibility for web content called POUR. Visit accessibility laws, policies, and standards to learn more and W3C Accessibility Principles for a comprehensive list.

Set Default Language

• How to work with language in HTML

Make It Easy to Understand

• Write content as clearly and simply as possible.
• Use plain language.
• Web Accessibility Content Guideline 3.1.5 Reading Level

Apply Structure

• Give each page a descriptive and unique page title.
• Use headings (<h1>, <h2>, <h3>) to show content organization.
• Page Structure Concepts

Create Accessible Links

• Provide link text that describes where the link goes and gives meaning out of context.
  • Avoid phrases like “click here,” “learn more” and “read more”.
• Underline links for quick identification.
  • Do not underline non-link text
  • Steps to add link text

Adding Effective Link Text

• Links and Hypertext
• Improve your link texts
• Video: How to create accessible links

Use Color Appropriately

• Use required color contrast between the background and text.
  • Avoid gold on white: Accessible Text & Color
  • Use WebAIM’s Contrast Checker or Colour Contrast Analyser
• Do not use color as the only method to convey meaning.
  • Include an additional descriptive component such as text, patterns or shapes.
  • Learn how to use color

Add Alternative Text

• Provide alternative (alt) text to images that convey meaning.
• Keep the alt text short and concise (about 125 characters).
• Hide images that do not convey meaning from screen readers.
  • Use an empty alt value (alt="")
• Avoid images with text when possible. If necessary, add alt text.

Adding Effective Alt Text

• Alternative Text (WebAIM)
• How to Write Alt Text and Image Descriptions for the visually impaired

Create Accessible Tables

• Avoid using tables for layout.
• Structure tables using table headers (th) and table data (td) elements.
• Tables concepts tutorial

Make Media Accessible

If the website has embedded audio or videos, they must be accessible.

• How to Make Accessible Video and Audio

Ensure Keyboard-Only Functionality

Make sure all content on the website is usable with the keyboard.

• What is Keyboard Compatibility?
• Intro to Keyboard Accessibility
• Designing for Keyboard Accessibility
• Do’s and don’ts

Check Accessibility

Accessibility checkers review some accessibility guidelines and provide useful information.

• Accessibility Insights
• aXe (the Accessibility Engine)
• Bookmarklets
• Photosensitive Epilepsy Analysis Tool
• WAVE Web Accessibility Evaluation Tool

Visit Web Accessibility Evaluation Tools for a complete list of checkers. For info on how to check electronic documents, visit How to Make Your Content Accessible.

Screen Readers

Automated tools cannot verify all issues and should be combined with manual testing. Testing with a screen reader can help.

• JAWS: Job Access With Speech (JAWS) is a commonly used robust screen reader for Windows and has a free demo mode.
  • Using JAWS to Evaluate Web Accessibility
  • JAWS Keyboard Shortcuts
• NVDA: NonVisual Desktop Access (NVDA) is an open-source screen reader for Windows.
  • Using NVDA to Evaluate Web Accessibility
  • NVDA Keyboard Shortcuts
  • NVDA Focus Highlight add-on enables users to track the location of the focused object.
• VoiceOver: included with macOS and iOS.
  • Using VoiceOver to Evaluate Web Accessibility
  • VoiceOver Keyboard Shortcuts

Resources

• • Accessibility Support
  • Evaluating Web Accessibility
  • HTML5 Accessibility
  • Introduction to ARIA – Accessible Rich Internet Applications
  • Making the Web Accessible
  • Nutrition Cards for Accessible Components
  • The Accessibility Project