Web Accessibility Guidelines & Best Practices

Most studies find that about 20% of the population lives with some form 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, distractibility, inability to remember or focus on large amounts of information

Source: Rosenfeld: Personas for Accessible UX

Disabilities can also be situational or conditional.

• Situational

  • Crowded room, low light, forgetting your headphones in a public place but need to listen to the lecture

• Conditional

  • Aging, slow internet, broken arm, carrying a baby or holding a back an active puppy while looking up food menus on your phone

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 and WCAG 2.1 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?

Screen Reader

Try it out! Test out your website with screen reader tools.

• Voiceover on Mac

• NVDA for Windows

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

Free Courses

W3C Introduction to Web Accessibility

Guides

• Accessibility at UM

• Accessibility for Teams

• Deque: Beginner’s Guide to Accessibility

Tools

• Hemingway App
• Readability Test Tool
• Web Accessibility Evaluation Tool 
  • Web Accessibility Evaluation Tool Instruction 
• WebAIM Color Contrast Checker
• Colorblind Web Page Filter

Screen Reader Applications

• Voiceover on Mac
• NVDA for Windows
• Windows Narrator Instruction

Video / Audio Captions

• Rev

• Amara

Writing Content

• W3C: Writing for Web Accessibility

• WebAIM: Writing Clearly and Simply