How can we be
better about this?

• Consider accessibility early on

• Improve automated & manual testing

• Other do’s and don’ts

Easier to troubleshoot

1. Outliner

2. Semantic HTML

3. Test!

4. Add styles

5. Test!

6. Peer review

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

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