We aren’t starting
from zero!

How can we be
better about this?

• Consider accessibility early on

• Improve automated & manual testing

• Other do’s and don’ts

Consider a11y early
and keep it in mind

Cordelia McGee-Tubb

Easier to troubleshoot

1. Outliner

2. Semantic HTML

3. Test!

4. Add styles

5. Test!

6. Peer review

Outliner case study

How can we
improve this?

1. Upstatement

   1. New Work: Building a better cooking site with Milk Street

   2. About Us

   3. Selected Projects

      1. Kuvée

      2. Northeastern University

      3. Harvard GSD

      4. The Undefeated

      5. MIT Tech Review

      6. Taste Cooking

   4. Jobs

      1. Development Lead

      2. Senior Producer

      3. Creative Lead

   5. Work With Us

Testing 1, 2, 3

• WAVE browser extensions

• Accessibility developer tools

• Screen reader

• Keyboard navigation

• Where mouse can go

Demo WAVE

WAVE bug log

• Document language missing

  • Allows screen readers to read content in appropriate language and appropriate pronunciation

  • Facilitates automatic translation of content

• Empty links

  • Function / purpose of link is not presented to user

  • Screen reader test for logo reads “Visited link / banner 2 items”

• Skipped heading levels*

  • Headings provide structure and facilitate keyboard navigation for assistive technology

WAVE bug log (cont.)

• Suspicious link text (“More →”)

  • Links are often read out of context

  • Should describe destination / function all by itself

  • Good place to make use of `.visually-hidden`

• Redundant link*

  • Creates additional navigation and repetition for keyboard and screen reader users

Other do’s and don’ts

• Links vs buttons

• Tables for tabular data

• Testing forms