presentation.adoc

Introduction to Web Accessibility and Accessibility Testing

Agenda

• What is accessibility testing?

• Why do accessibility testing?

• What are screen readers and how they work?

• How to make websites accessible?

• How to do accessibility testing?

• Additional reading

What is Accessibility Testing?

• Part of usability testing where users have disabilities affecting how they use your website

• Testing website works with assistive technology

Note	Though I say website since most of you are doing web development, it generalizes to e.g desktop and mobile applications as well.

Why Do Accessibility Testing?

• Ensures your website is accessible - can be used by as many people as possible

• Overlaps with other best practices e.g mobile web design, usability

Note	Especially important for government services due to aging population.

What is a screen reader?

• Software that enables the blind to use computers independently

• Provides additional keyboard commands for efficient navigation and information retrieval

• Demo

• Examples:

  • NVDA (NonVisual Desktop Access) for Windows

  • VoiceOver, built into Mac and iOS

  • TalkBack, built into Android

How do screen readers work?

• Relies on applications providing info on state of their UIs

  • For websites, that means using semantics of html elements

How to make websites accessible?

• WCAG 2.0 standard is used to formally evaluate accessibility

• Use semantic HTML:

  • Use <h1>, …​, <h6> for headers, styling them with CSS

  • Use <table> for tables

  • Associate <label> with form controls with the for attribute

Note	What does it mean for a website to be accessible? Mention WCAG without going into detail. Demonstrate tips Mention misuse of headings

!

• Include alt attribute in images

• Make all functionality available through the keyboard

  • Use tabindex=0 to include element in tab navigation

• Use native HTML5 controls when possible, and ARIA on custom UI widgets

• Provide sufficient color contrast, and don’t use color alone to convey info

• Use responsive design to optimize layout for various screen sizes

How to do accessibility testing?

• Automated vs manual testing

• Numerous automated linting tools like accesslint.js can find issues such as:

  • Missing alt attribute in images

  • Insufficient color contrast

  • Duplicate IDs

Manual Testing

• During development:

  • Browser add-ons like WAVE

  • Tab key navigation test and select all test

  • Are pages readable when zoom is at least 200%?

• Screen reader testing:

  • Most common assistive technology used in testing

  • Difficult to learn

Summary

• accessibility testing:

  • Testing site is accessible for users with disabilities

• What are screen readers and how they work?

  • Software that reads the screen. For websites, uses DOM info.

!

• How to make websites accessible?

  • Semantic HTML, native HTML controls and ARIA for custom ones, contrast, responsive design

• How to do accessibility testing?

  • Automated tools, browser add-ons, keyboard & zoom tests, manual testing with screen readers and other assistive technologies

Additional reading

• Either the Professional Web Accessibility Auditing Made Easy or Understanding Web Accessibility (self-paced) courses

• WCAG 2.0: formal standard for web accessibility, authoritative reference

• ARIA standard for making custom UI elements accessible. Also see this concise introduction