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>
.icon-play {
visibility: hidden;
}
[aria-pressed="true"] .icon-pause {
visibility: hidden;
}
[aria-pressed="true"] .icon-play {
visibility: visible;
}
$('#pause-btn').on('click', function () {
if ($(this).attr('aria-pressed') == 'true') {
$(this).attr('aria-pressed', false);
} else {
$(this).attr('aria-pressed', true);
}
});