3 Ways To Quickly Add Accessibility To A Legacy Web App
Adding accessibility features to a legacy web app was easier than I thought
Recently we added some accessibility features to a web application with a pretty old code base. At first I thought it would be incredibly work-intensive to get the features in but it turns out HTML 5 and WAI-ARIA allow for quite a lot of quick wins that can take you quite far.
Quick Win #1: Fix Sequential Keyboard Navigation
tabindex
When the user tabs through the application, it’s important that all the main elements of the application are reachable and that they are navigated in a logical sequence.
This is where the tabindex attribute comes in. It allows you to switch elements on or off for sequential keyboard navigation as well as change the order of the sequence.
The default sequence is dictated by the hierarchy of the HTML elements.
The tabindex attribute takes a numerical value. From MDN:
A negative value tabindex="-1" means:
[…] that the element should be focusable, but should not be reachable via sequential keyboard navigation.
This allows you to skip elements in the sequential keyboard navigation which would normally be keyboard navigable.
tabindex="0" means:
[…] that the element should be focusable in sequential keyboard navigation, but its order is defined by the document’s source order.
If this element is not focusable in the sequential keyboard navigation by default, you can force it to be focusable.
A positive value like tabindex="4" means:
[…] the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
You can alter the order of the sequence. This is not really advisable though, because it can quickly become a pain in the neck to maintain.
Instead of changing the sequential order with tabindex, first try to re-arrange the elements in the HTML file, and be sure to use navigable HTML elements, such as forms, if possible.
Skiplink: The Initial Tab
With a little HTML and CSS you can easily add a Skiplink-feature. It’s basically a friendly welcome message which appears when the user initially “tabs into” the app, and allows them to jump to the important content. The name Skiplink stems from the fact that it allows you to skip the menu links.
You can also add helpful hints here like information about keyboard shortcuts.
Skiplink is an HTML element containing the content you want to show on first tab at the top of your HTML tree, and some CSS that hides it initially and reveals it on focus.
The trick here is that you can’t use display: none to hide the skiplink element; you have to move it out of the viewport with something like this:
HTML:
<a class="skiplink" href="#content">Skip to content</a>CSS:
.skiplink a,
.skiplink a:hover,
.skiplink a:visited {
position: absolute;
overflow: hidden;
top: -1000px;
left: -1000px;
}.skiplink a:focus,
.skiplink a:active {
position: absolute;
top: 0;
left: 0;
}
HTML for the content:
<div id="inhalt" tabindex="-1">
<!-- content -->
</div>The content container gets a tabindex="-1" to make it focusable but ignored by sequential keyboard navigation. You will only reach the content container by using the skiplink and from there the sequential keyboard navigation continues adhering to tabindex values and HTML hierarchy.
Quick Win #2: Accessible Colors
Check & Fix Your Contrast
Good color contrast is important in order to make the information accessible to as many people as possible, regardless of visual impairment.
You can use the Chrome DevTools Color Picker to check if the colors used in your app have the recommended contrast according to WCAG AA contrast ratios.
Google Chrome’s Accessibility Reference explains how to use it.
High Contrast Mode
If you want to go a little further you can add a “high-contrast-mode” throughout your application. High-contrast-mode changes the colors and outlines throughout your app to display the content with the highest possible contrast.
Use a CSS-class in the body to overwrite the CSS needed to display the high-contrast mode. Once you have the CCS in place you can turn on high-contrast mode by setting the CSS class on the <body> via JavaScript.
The HTML could look like this:
<body class="high-contrast-mode">
<!-- Your app is here -->
</bodyAnd your CSS could look like this:
button {
background: lightgray;
color: black;
}.high-contrast-mode button {
background: black;
color: white;
}
Quick Win #3: Add Keyboard Shortcuts With The accesskey Attribute
One part of our project requirement was to add keyboard shortcuts to the application. I fully expected to have to implement them in JavaScript until one of my co-workers told me: “Oh, I just added a bunch of keyboard shortcuts to the app via accesskey.”
I had no idea what he was talking about until I checked out the accesskey attribute on MDN.
Just assign a key to an HTML element with the accesskey attribute like this:
<div accesskey=”A”>
Some interesting thing.
</div>You activate a keyboard shortcut that will focus and trigger a click-event on the element.
The actual key-combination of the shortcut depends on the combination of the browser and the operating system. If you make use of this feature, it makes sense to provide a keyboard-shortcut overview that shows the right key-combinations in the current environment.
Tools
Trashy.css
From Introducing Trashy.css:
Trashy.css: The throwaway CSS library with no class.
This is a helpful little CSS library that can help you to visually spot problems in your HTML semantics.
ally.js
From allyjs.io:
JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler
If you don’t mind adding a little more JavaScript to your page, ally.js can easily help you to bring accessibility to your app:
The library provides certain standard functions the “web platform” should’ve provided itself, so JavaScript applications can be made accessible more easily.
It’s Useful For Everybody
In my experience accessibility is mostly treated as an after-thought in web development. One reason might be that it is perceived as complicated, difficult to test, and clients and project managers typically don’t place great value on it.
After adding accessibility features to a legacy app with the techniques described above, I was actually surprised how easy it was and how any type of user can benefit from these features.
I learned that it is important to remember that accessibility features not only make an application more accessible for impaired users but for all users.
If that’s not enough for you to make your apps accessible, you should consider that accessibility is a staple feature in many native applications and all operating systems. If web developers want to seriously compete with native, accessibility must be addressed.
Further Reading
Since you stuck through to the end of this article you might be interested in some more ways to add accessibility to your site or app. In that case I highly recommend you read “7 Ways To Make Your Web Application More Accessible” by my co-worker Emma Wedekind and while you’re at it you should also follow her on Twitter.
If you liked this post I would appreciate if you’d clap it up! Leave any feedback as a comment or hit me up on Twitter.
