Being a better a11y

Friday Share 6/2/2017: An Accessibility Booster

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

Easier to troubleshoot

  1. Outliner

  2. Semantic HTML

  3. Test!

  4. Add styles

  5. Test!

  6. Peer review

Untitled Section

  1. Untitled Section

  2. New Work:

  3. Building a better cooking site with Milk Street

  4. About us

  5. Selected Projects All

    1. Untitled Section

      1. Kuvée

      2. Northeastern University, etc.

  6. Jobs All

    1. Development Lead

    2. Senior Producer, etc.

  7. Work With Us

  8. Untitled Section

    1. Untitled Section

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

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

Thank you!

Made with Slides.com