Being Accessible, Always!
A small guide to quick ADA compliance
Developing on the front-end of the web these days involves way more than making sure that the UI looks good and is functional. There are multiple other aspects of the development process like SEO considerations and ADA (Americans with Disabilities Act) compliance, among others. Compliance with accessibility laws is not just about good business practice, but also about inclusion and compassion. Not only does compliance get you more customers but also, with large settlements being awarded, it is even smarter to invest resources in this area. Close to 50 million people in the US have some form of disability, that is 20% of the population or 1 in 5 people. This statistic alone should convince businesses to make accessibility a key component in their development cycle.
At Walmart, we believe that customers always come first, and so we strive to make every new feature we release fully compliant with today’s ADA standards. In this post, I want to share a few things that I have learned over the last few months while trying to do so with all of our features.
In short, a lot can be achieved with small measures
Semantic HTML is key
- Sometimes called POSH — Plain Old Semantic HTML
- Use the correct HTML elements for their correct purpose as much as possible
- Use <li> elements when listing out text, use <nav> for navigation elements, etc.
- For example, we can make a button using the <span> element with onClick listeners and JavaScript code to make it work exactly as we want or we can use the <button> element and get a lot of functionality out of the box, like the button being accessible, mobile-friendly, styled correctly, and SEO-friendly. Search engines give more importance to headings, links, etc. than non-semantic divs or spans, so using the correct elements can result in a very positive bump in SEO.
- Using UI control elements like buttons, links, and form control — adds functionality to control all relevant actions using the keyboard.
Alternatives are important
- People who are visually-impaired cannot access multimedia content like images and videos, and people who are hearing-impaired cannot access audio content, this makes giving alternatives to multimedia content very important. Images can have machine generated names which are not much help to the user when read out by a screenreader. So, we need to have alt=“Relevant text” tags on the image elements so that the screenreader correctly reads out the image description. Any titles that go with the image should be added to the title tag in the image. The title tag also gets read by the screenreader and creates a tooltip when the mouse hovers on the image.
Keyboard Accessibility
- This is one of the harder ones to get right. Some people will add a lot of javascript to achieve all the requirements of ADA compliance. The key thing to remember here is that using the right HTML elements for the correct behavior will automatically add most of the functionality required for keyboard accessibility. If there is a special behavior that is needed then only we need to add custom javascript handlers.
- For example, creating a <button /> to submit something will automatically make the button focus-able and will add listeners for space and enter to call the onClick or onSubmit functions.
Screen Reader Voiceover
- This is where ARIA (Accessible Rich Internet Applications) comes in. There used to be a gap between HTML and web accessibility technologies, ARIA allowed developers to bridge this gap. However, all developers should use semantic native HTML elements over ARIA as many of the functionalities that ARIA enabled were released as part of the HTML5 release. Sometimes, when creating custom functionality these labels can come in handy as they can be defined to tell the screenreader what to announce and can also be manipulated through javascript to dynamically change what is announced.
Avoid Automatic Content
- Developers should not implement automatic content like auto-playing videos, pop-ups, auto-scroll, and blinking content, but if they choose to do so, they need to provide the user the ability to pause, stop or hide such content.
Benefits
Improve SEO
- Improved SEO is a common byproduct of creating ADA compliant websites as even search engine crawlers are designed to follow common sense. So, they are going to index webpages better if the HTML is structured well, and if elements are chosen according to intended functionality.
Reach more customers
- As I mentioned earlier there are close to 50 million people in the United States alone that suffer from disabilities. That is 50 million more customers being able to buy from you. I think from a business stand point, nothing could be better.
Be a conscientious and socially responsible brand
- In today’s world, perception is everything and being seen as a socially responsible and conscientious brand can do wonders for your brand value and get customers to notice. And if you are doing something good that your competitors are not even thinking about, all the better.
Avoid Litigation
- Let’s be honest here, this is something that maybe should not be motivating us to think about ADA compliance but in the real world probably plays a big role. ADA compliance verdicts are becoming increasingly large and from a business stand point, it just makes all around sense to be compliant than not.
Save Money. Live Better.
- Last but not least, at Walmart we always place the customer first. All our customers are important to us, and we work tirelessly to save them money and help them live better. In pursuit of this endeavor, our e-commerce platform teams put extra importance on being fully ADA compliant.
P.S. - Medium should read this post too because they don’t seem to support alt tags on the images that people add to their posts. 😞
