Currently, in version ES6, JavaScript has come to be used for everything from adding basic interactions to a page to building full web applications. As ubiquitous as it has become, JavaScript can have a huge impact on the usability and accessibility of any content or applications it’s built into.
Is JavaScript inherently inaccessible?
Because of its potential to impact accessibility, there is a myth that the usage of JavaScript automatically makes a page inaccessible, but JavaScript is not inaccessible in and of itself. JavaScript can have a positive or negative effect on accessibility depending on how it’s implemented, just like any other development language or content. So a page that includes JavaScript and meets the WCAG 2.0 standards can absolutely be accessible, and a developer can even use JavaScript to help overcome accessibility issues in some cases.
Read more about WCAG: Is Compliance with the Web Content Accessibility Guidelines (WCAG) Required by the ADA?
JavaScript best practices
The most fundamental technique for writing and maintaining accessible JavaScript is to follow the best practices for developing with the language. Writing well-organized, consistently-formatted code that makes use of simple naming conventions and properly-implemented comments will not only simplify development and maintenance, it’ll also help avoid mistakes and unintended outcomes that could negatively affect accessibility. And when it comes time to do accessibility testing and troubleshooting, cleaner code will help the process along.
Avoid common pitfalls
There’s a lot that can be achieved with JavaScript, so it’s good to know what practices may be more likely to negatively impact accessibility and the user experience. Though JavaScript can be used to create content, it’s best to use it to implement functionality and avoid DOM manipulation. Use HTML to create content instead. Following these practices will help prevent alterations to the content and structure of a document that may make it inaccessible to users.
It’s also important to avoid using device-dependent event handlers, which could lead to keyboard traps and other navigation issues. Opting for device-agnostic handlers will keep content navigable for mouse- and keyboard-users alike.
Embrace progressive enhancement
Progressive enhancement describes an approach to design that prioritizes providing “a baseline of essential content and functionality to as many users as possible.” The “best” experience can be provided to users that are using devices and browsers that can run all the required code, but there is a base level that should be available to everyone.
This puts the focus on developing something that is simple but usable and accessible at its core.
Describe interactive elements
Defining the name, state, role, and value of a JavaScript component will allow this information to be conveyed to browsers and assistive devices
Beyond that, and using proper semantic HTML markup, the Accessible Rich Internet Applications Suite, known as WAI-ARIA provides a system for making web content and applications more accessible through the implementation of attributes that features interactions and states. Keeping content simple and well structured is always preferred, but WAI-ARIA can help solve some accessibility issues via HTML attributes and the manipulation of JavaScript.
Use accessible frameworks
Developing and maintaining large-scale JavaScript applications is challenging, and keeping those applications accessible requires ongoing effort. JavaScript frameworks have come to play a big part in how applications are developed these days, and the major ones all address accessibility in some way.
Angular was created to be accessible, giving developer’s access to an entire library of accessible, reusable components. React fully supports the use of standard accessible development practices. The Vue A11y Project started in 2018 to help Vue developers build more accessible applications. There are even libraries such as ally.js available to help developers tackle accessibility challenges.
Embrace iteration
Web and other digital content are constantly changing and evolving, and accessibility standards and challenges are also constantly changing in like. Implementing and maintaining accessible JavaScript starts with following the best practices and staying informed, but it never ends. Consistent testing, reevaluation, and updates should be made throughout the life of the page or application, both to ensure that specific content remains accessible and to contribute to the path to a more accessible future for all.
Learn more
Our mission is to create objective and trustworthy information and resources to become a catalyst for equal access to the physical and digital worlds. To learn more about accessibility, check out 5 Things Business Owners and Executives Should Know About Web Accessibility.
Comments