How to Make an Accessible Website
Accessibility Principles
MU has adopted Web Content Accessibility Guidelines (WCAG) 2.0 AA, which defines four principles of accessibility for web content called POUR. Apply the following accessibility principles to make websites more accessible and improve the usability for all users.
Set Default Language
Make Content Easy to Understand
- Write content as clearly and simply as possible.
- Use plain language.
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.
Write effective link text
Use Color Appropriately
- Use the 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
alttext short and concise (about 125 characters). - Hide images that do not convey meaning from screen readers.
- Use an empty alt value (
alt="")
- Use an empty alt value (
- Avoid images with text when possible. If necessary, add alt text.
Write effective alternative text
- How to Write Alt Text and Image Descriptions for the visually impaired
- Making Images Accessible
- WebAIM’s Alternative Text Tutorial
- W3C’s Images Concepts Tutorial
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.
Ensure Keyboard-Only Functionality
Make sure all content on the website is usable with the keyboard.
- Designing for Keyboard Accessibility
- Do’s and don’ts
- Keyboard Accessibility
- Media Player Controls Should Be Keyboard Accessible, Screen Reader Compatible
Develop an Accessibility Statement
Consider creating an accessibility statement for your own website, mobile application, or other digital content. Users of your content will usually refer to accessibility statements when they encounter problems. Provide information that is useful to the users and in a place that is easy to find.
Check Accessibility
Checkers
Accessibility checkers review some accessibility guidelines and provide useful information.
- Accessibility Insights
- aXe (the Accessibility Engine)
- 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.
Checklists
- Easy Checks – A First Review of Web Accessibility
- WebAIM’s WCAG 2 Checklist
- Yale’s Checklist for Content Editors (PDF)
Screen Readers
Automated tools cannot verify all issues and should be combined with manual testing. Testing with a commonly used screen reader can also help you identify problems.
- JAWS: Job Access With Speech (JAWS) is a commonly used robust screen reader for Windows.
- NVDA: NonVisual Desktop Access (NVDA) is an open-source screen reader for Windows.
- VoiceOver: screen reader included with macOS and iOS.
Learn more about Screen Reader Keyboard Shortcuts and Gestures.