The $64,000 Question

To Create More Inclusive Experiences

  • know what this is?
     
  • know what this does?
     
  • know what just happened?

If I couldn’t see the screen, how would I…?

Common patterns

<title>Top Stories | Vocal</title>
<nav>
  
  <ul>
    …
  </ul>
</nav>
<a class="selected" href="/top-stories">Top Stories</a>
mainRef.current.focus()
<nav aria-labelledby="main-navigation" role="navigation">
  <h2 id="main-navigation">Main navigation</h2>
  <ul>
    …
  </ul>
</nav>
<a aria-current="page" href="/top-stories">Top Stories</a>
<label>
  Email address
</label>

<span>
  Please enter a valid email address
</span>

<input
  class="has-error"
/>
emailRef.current.focus()
<label for="email">
  Email address
</label>

<span id="email-error">
  Please enter a valid email address
</span>

<input
  id="email" type="email"
  aria-describedby="email-error" aria-invalid="true"
/>
<button
  type="button"
  class="pressed"
>
  <svg>…</svg>
</button>

<button
  type="button"
>
  <svg>…</svg>
</button>
<button
  type="button"
  aria-label="View as a grid"
  aria-pressed="true"
>
  <svg aria-hidden="true">…</svg>
</button>

<button
  type="button"
  aria-label="View as a list"
  aria-pressed="false"
>
  <svg aria-hidden="true">…</svg>
</button>
<button
  type="button"
  aria-label="View as a grid"
  aria-pressed="false"
>
  <svg aria-hidden="true">…</svg>
</button>

<button
  type="button"
  aria-label="View as a list"
  aria-pressed="true"
>
  <svg aria-hidden="true">…</svg>
</button>
<div>
  Added to your Cart
</div>
<button
  type="button"
  aria-label="Add Nintendo Switch to your Cart"
>
  Add to Cart
</button>
<button
  type="button"
>
  Add to Cart
</button>
<div role="alert">
  <span aria-hidden="true">Added to your Cart</span>
  <span class="visually-hidden">
    Nintendo Switch has been added to your Cart
  </span>
</div>

So the next thing
you design or build,
ask yourself the

 

$64,000 question

If I couldn’t see the screen, how would I…?

Learn more

Thanks!

The $64,000 Question To Create More Inclusive Experiences

By Matt Stow

The $64,000 Question To Create More Inclusive Experiences

  • 856