A presentation at DEVNEXUS in in Atlanta, GA, USA by Todd Libby
How to Make JavaScript Accessible Without Losing Your Sanity (or Your Hair) 10-April-2024 • Todd Libby dev.nexus 2024
Thanks!
JavaScript
Data The numbers behind the talk
1.2 Billion Page elements tested in 2024 by WebAIM
1173 Up from 1050 elements per home page in 2023
95.9% of home pages had a detected WCAG 2.x failure!
Frameworks and Libraries and JavaScript, oh my!
JavaScript Frameworks Most Improved in Accessibility • Stimulus • Emotion • React • Zone.js • Angular • styled-components • MooTools
JavaScript Libraries Most Improved in Accessibility • YUI • Polyfill • Lodash • AOS • jQuery Mobile • lit-html
Accessible JavaScript You can make it possible! • Keyboard & Mouse • Form validation • Dynamic content • Styling • Performance • Unobtrusive JavaScript
Examples Show me the accessibility!
Keyboard & Mouse
clickListener: function(event) { var fold = this.parentNode; Acc.expand(fold); preventDefault(event); },
A. B. Make non-keyboard-focusable elements keyboard-accessible. Add an element that is keyboardaccessible (e.g., hyperlink) to the document.
< + < < / / / const acc = accordion.getElementsByTagName(‘li’); for (var i = 0; i < acc.length; i ) { var accLinks = acc[i].getElementsByTagName(‘a’); var accTitleLink = accLinks[0]; addEvent(accTitleLink, ‘click’, Acc.clickListener); } / < <
<ul class=“accordion”> <li id=“position-cao”> <h3><a href=“#cao”>Todd Libby /a> /h3> <p>Chief Accessibility Officer /p> … More info /li> … Other code /ul>clickListener: function(event) { var fold = this.parentNode.parentNode; Acc.expand(fold); preventDefault(event); },
tabindex=0
Form Validation
Validating Your Forms ft • Instant validation (field validated on every value change) - NO! • Validating a er the fact (field validated on blur) - Not a big fan • Validation on submission of form (Click and validate) - YES!
form.addEventListener(‘submit’, function(event) { event.preventDefault(); Prevent form submission Prevent custom validation logic const email = document.getElementById(‘email’).value; const password = document.getElementById(‘password’).value; if (!emailIsValid(email)) { alert(‘Password must be between 8-20 characters long’); return; } … / / / Submit the form if validation passes form.submit(); }); / / / const form = document.querySelector(‘form’);
< <
<p aria-live=“assertive” class=“sr-only”> Not a valid email address. /p> <p aria-hidden=“true”> Not a valid email address. /p>HTMLElement.focus()
Form Accessibility • • • • • • • Inline error messages Place all errors above the form in long forms Clear and concise Do not rely on color alone Focus where important Stop disabling buttons Don’t wrap everything in a <label>
Buttons
<button> <a> <div>
const button = document.createElement(‘div’) button.innerText = ‘Click Here…’
/ / < < < < < <
<div class=”menu-button-links”> <button type=”button” id=”menubutton” aria-haspopup=”true” aria-controls=”menu2” aria-expanded=”false”> WAI-ARIA Quick Links <svg xmlns=”http: www.w3.org/2000/svg” … /svg> /button> <ul id=”menu2” role=”menu” aria-labelledby=”menubutton”> <li role=”none”> … /li> … <li role=”none”> … /li> /ul> /div>https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/menu-button/examples/js/ menu-button-links.js
Styling
Yes! CSS & Accessibility • • • • • • Use semantics and style them accordingly Apply CSS if you have to with setAttribute Do NOT style headings to look like other headings Sensible typography Readability & contrast of text You do not need a framework for everything!
Performance
Performance of JS fi • Consider a simpler solution • Remove unused code • Consider built-in user agent features: • client-side validation • native <video> player • CSS animations • Mini cation, Gzipping, bundlers
Performance of JS fi
Unobstrusive JS
Mixing is for cooking and drinks.
Benefits of Unobtrusive JS • • • • • Separation of behaviors from the markup Reusable code Progressive enhancement Graceful degradation Capability detection
< <a id=“alert” href=“javascript:void(0);” onClick=“alert(‘You clicked the button.’);” > Click this super button! /a>
<a id=“alert” href=“#”>Click this button! /a> < <
<script> jQuery(function($) { $(“#alert”).click.function() { alert(“Thanks for clicking the button!”); return false; }); }); /script>ARIA - Accessible Rich Internet Application
Wrap-up
<
<div role=“button” tabindex=“0” onClick={this.onClick} > Click Here /div>< <span role=“button” tabindex=“0” onClick={this.onchange} > Super Sleek Button! /span>
document.getElementById(‘hero’).style = ‘font-size: 12rem;’;
Slides: https://bit.ly/4cStCsF 10-April-2024 • Todd Libby dev.nexus 2024
Thank you! 10-April-2024 • Todd Libby dev.nexus 2024
A high-level talk about making JavaScript accessible for assistive technologies and methods to ensure an accessible experience for all when we use JavaScript.
The following resources were mentioned during the presentation or are useful additional information.
The 2024 report on the accessibility of the top 1,000,000 home pages.
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
A look at JavaScript frameworks and how they are accessible, the good, the bad, and the info you need to make decisions on the framework you use.
for free. You
can too.