Most studies find that about one fifth (20%) of the population has some kind of disability.
The major categories of disability types:
Visual: Blindness, low vision, color-blindness
Hearing: Deafness and hard-of-hearing
Motor: Inability to use a mouse, slow response time, limited fine motor control
Cognitive: Learning disabilities, distractability, inability to remember or focus on large amounts of information
Source: Rosenfeld: Personas for Accessible UX
Web Content Accessibility Guidelines (WCAG)
Accessible design improves overall user experience and satisfaction, especially in a variety of situations, across different devices, and for older users. We follow WCAG 2.0 AA standards.
Content
Images
- Determine if your images need alt text.
- Place your hand over the image on the screen. Does your content lose meaning? If the answer is yes, you need to include alt text to describe the image.
Links
- Use meaningful text for links, describing where the links take the user.
- Example: More information about meaningful link text.
Readability
- Use headings to create page structure.
- Use numbered and bulleted lists for structure.
- Use simple language and formatting.
- Format and use simple tables with column and row headers. Split nested tables up into simple tables.
Video / Audio Captions
- Video and multimedia should have captions or a transcript available on the website for users.
- Resources: Rev, Amara
User Experience
Keyboard Interaction / Tab Order
Try using your keyboard to tab through the website. You should be able to do all the same things with your keyboard that you can do with your mouse/trackpad.
- Can you play/pause videos?
- Does your keyboard get stuck anywhere on the page?
Focus
Use your keyboard to tab navigate to a link on the page.
- Can you tell it’s a link?
- What happens to indicate it’s different than the text around it?
Screen Reader
Test out your website with screen reader tools.
Visual Design
Color & Contrast
- Text and images should be easy to read against the background.
- Color contrast ratio for minimum compliance is 4.5:1.
- Try it out with accessible colors checker.
Typography
- Use real text instead of text within images whenever possible
- User fonts that are easy to read
Forms
- Users usually prefer simple and short forms.
- Include labels in form fields.
- Follow instructions for creating accessible forms.
Resources & Tools
Guides
- Accessibility Services & Resources LSA Technology Services
- Accessibility at UM
- Accessibility for Teams
- Deque: Beginner’s Guide to Web Accessibility
Tools
- Readability Test Tool
- Web Accessibility Evaluation Tool
- WebAIM Color Contrast Checker
- Colorblind Web Page Filter
Screen Reader Applications
Video / Audio Captions
Writing Content
WP Accessibility Resources
WP CAMPUS Accessibility Resources
Accessibility
Accessibility Audit WP Campus on Gutenberg
Some specific limitations in the visual interface also make it difficult for certain kinds of content to be fully accessible, because it doesn’t provide the tools to define all necessary semantics and metadata. The Video Block interface, for example, doesn’t provide a way to associate a caption file with the video; the Table Block interface doesn’t allow users to define a caption, header rows, header cells, or scopes. Gutenberg users can only add this information by using the HTML editor, but this of course requires them to have sufficient HTML knowledge.
