JavaScript + jQuery accessibility

Describing accessibility considerations for JavaScript functionality within websites.

Go fullscreen: ⌃⌥F

JavaScript + jQuery accessibility

JavaScript isn’t inaccessible

But if you’re not careful you can create some horribly inaccessible solutions

Since you have complete control over HTML & CSS you can interfere with accessibility tools

Always start with strong semantics

  • If it doesn’t link to another page don’t use a <a> tag
  • There are more tags than just <div>
  • If it’s a clickable thing it should be a <button>
  • Always use the browser’s default controls first—they have all the accessibility functionality built-in

Keyboards rule

Always make your interaction work with the keyboard!

ARIA can help

ARIA, the accessibility standard is targeted at JavaScript applications

Adding ARIA roles & states to elements with JavaScript helps accessibility tools understand the purpose

HTML 
<!-- Used to label something, like `alt=""` on images -->
<i class="icon" aria-label="Play"><svg></svg></i>

<!-- Used to define what element on the page this thing controls -->
<button aria-controls="SOME-ID"></button>

<!-- Define what kind of control this is -->
<!-- There are many more roles than the landmark roles we’ve previously used -->
<div role="tabpanel"></div>

<!-- To demonstrate when something is active or hidden -->
<button aria-pressed="true"></button>
<button aria-selected="true"></button>
<div aria-hidden="true"></div>
HTML 
<button id="pause-btn" aria-pressed="false" aria-label="Pause">
  <i class="icon i-96">
    <svg class="icon-pause"><use xlink:href="images/icons.svg#pause"></use></svg>
    <svg class="icon-play"><use xlink:href="images/icons.svg#play"></use></svg>
  </i>
</button>
CSS 
.icon-play {
  visibility: hidden;
}

[aria-pressed="true"] .icon-pause {
  visibility: hidden;
}

[aria-pressed="true"] .icon-play {
  visibility: visible;
}
JavaScript 
$('#pause-btn').on('click', function () {
  if ($(this).attr('aria-pressed') == 'true') {
    $(this).attr('aria-pressed', false);
  } else {
    $(this).attr('aria-pressed', true);
  }
});

Videos & tutorials

Start

JavaScript + jQuery accessibility

Describing accessibility considerations for JavaScript functionality within websites.