blog

Designing for ADA Compliance illustration

Designing for ADA Compliance (WCAG)

by

Navigating the physical world is hard enough for people with impaired vision. Imagine trying to navigate a website? or buying items on Amazon? something as simple as checking your online bank account is nearly impossible… unless the website meets WCAG compliance regulations.

According to data from the 2016 National Health Interview Survey, 25.5 million American Adults age 18 and older experienced vision loss — and this is expected to DOUBLE by 2039.

Double.

Navigating the physical world is hard enough for people with impaired vision. Even with the passing of the Americans with Disabilities Act in 1990, which made great strides in accessibility, visually impaired people still face obstacles in their day-to-day lives. Imagine trying to navigate a website? or buying items on Amazon? something as simple as checking your online bank account is nearly impossible. . . unless the website meets WCAG compliance regulations. (WCAG – Web Content Accessibility Guidelines)

With the use of screen readers (Mac’s VoiceOver, Windows’ Narrator, JAWS, NVDA, etc.) visitors can hear the website content read to them aloud, or even take it a step further and display the content on refreshable braille displays (Orbit Reader 20, etc. This is easy to imagine for articles full of lengthy paragraphs, but what about navigating menus, searching for specific items, filtering your results, or submitting a form? Just as the disabled community cannot be excluded from accessing a bathroom, they also cannot (by law) be excluded from accessing information online. Fortunately, we have the technology to make it possible, but it’s up to the individual organizations to ensure their websites are designed and developed to work with said technology.

We’re not just talking big fonts and high contrast colors. We’re talking about a well-structured, properly tagged, easy-to-navigate foundation for your website. Assistive technology presents content in a strict outline format, so it’s imperative that the content follows a clean, easy-to-follow, heading hierarchy. Screen readers group elements (links, buttons, inputs) so they’re easier to find using keyboard shortcuts. Learning your way around these shortcuts is much like playing intricate chords on a piano, but it does in fact, make it possible to maneuver your way around an otherwise impossible virtual landscape.

It’s also important to label everything. Everything. A non-defined button will simply say “button” – but what does that button do? Every element should have a verbose label, giving clues as to what happens next. “Click to view all movie listings for Saturday matinee” is far more informative than “Click here”

An interesting thing to note is that you can include hidden tags specifically read by screen readers. So, visually, your button might simply say “View more” because, in a visual context, it makes perfect sense. But under the hood, with the use of ARIA tags and markup, we can specify what the screen reader presents to the visually impaired user, giving them a tailored experience without cluttering the view for sighted users. It’s possible to ARIA-hide blocks of aesthetically detailed content and present a simpler, non-styled version for assistive technologies.

WAI-ARIA (Accessible Rich Internet Applications) is a spec defining support for accessible web apps. Following its guidelines and using ARIA markup extensions and HTML5 elements, it’s possible to build an all-inclusive user experience.

Not only does this allow your business to reach a wider audience, but it also appeals to the ever-growing community of consumers who are conscientious about supporting socially responsible companies. ADA compliance is more than just meeting regulations and complying with federal and state laws. It shows you care about your visitors.

And in the end, that builds trust.
A trust that can be seen by everyone.

+ more