How to Make an Accessible Website
Accessibility Principles
For a comprehensive list, visit W3C Accessibility Principles.
Set Default Language
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.
- Make sure all content on the website is accessible.
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
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
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.
Adding Effective Alt Text
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.
Check Accessibility
Accessibility checkers review some accessibility guidelines and provide useful information.
- Accessibility Insights
- aXe (the Accessibility Engine)
- Bookmarklets
- Photosensitive Epilepsy Analysis Tool
- Siteimprove Accessibility Checker
- 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.
- 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.