Designing for Digital Accessibility

Shaun Kiggens is director, quality assurance at global marketing agency Firewood, an S4 Capital (SFOR.L) company shares his tips on web design to ensure accessible content. 

We are living in a digital world. But not everyone will—or can—consume content or access digital assets in the same way. The Americans with Disabilities Act (ADA) very clearly states that businesses need to do everything possible to ensure that public places are accessible to everyone. In a brick-and-mortar setting, the need for physical access is fairly straightforward, but with technology always changing, ensuring digital access can be a bit trickier. 

One very visible example of this is a case brought against Domino’s Pizza because its site wasn’t screen reader accessible. Domino’s argued that while brick-and-mortar compliance is clearly delineated by the ADA, there are no rules that apply to digital platforms, and that businesses need federal guidance before they should be required to comply. Well, the courts disagreed. So where does that leave us?

While there’s no direct guidance from the Department of Justice on how to comply with the ADA, the World Wide Web Consortium (W3C)—an international community where member organisations, a full-time staff, and the public work together to develop and maintain web standards—has come to the rescue. W3C’s Web Content Accessibility Guidelines (WCAG) 2.1 provide up-to-date information and steps we can take to ensure that digital creations and digital content are accessible, consumable, and compliant.

Here’s how to get started designing for accessibility.

The first step: understand your users 

As web designers, it’s our job to ensure there are no barriers or unnecessary complications preventing accessibility by anyone. So the first step in being able to design for accessibility is to understand your users and the types of disabilities or impairments you’ll need to consider:

• Visual—blindness, various common types of low vision and poor eyesight, and various types of color blindness
• Motor/Mobility—difficulty or inability using the hands including tremors, muscle slowness, loss of fine muscle control due to conditions such as Parkinson's disease, muscular dystrophy, cerebral palsy, or stroke 
• Auditory—deafness or other hearing impairments, including individuals who are hard of hearing 
• Photosensitivity—epileptic seizures caused by visual strobe or flashing effects 
• Cognitive and intellectual—developmental disabilities, learning difficulties (dyslexia, dyscalculia, among others), and cognitive disabilities (post-traumatic stress disorder, Alzheimer's, among others) of various origins, affecting memory, attention, developmental 'maturity,' and problem-solving and logic skills, among others, should be considered
• Socioeconomic or geographic restrictions—limitations associated with bandwidth, speed, and hardware
• Situational—while not a requirement of the ADA, difficulty with access because of a situation (for example: external noise, social constraints, and tasks that require use of hands—like driving) is something to consider from a brand standpoint

And then design with users in mind 

Consider this. According to the World Health Organization, roughly 30% of the global population has a visual impairment while 6% experience hearing loss. Yet in 2019 when WebAIM—an organisation many in the industry lean on heavily for information and guidance on accessibility—evaluated one million homepages, only 2% passed WCAG accessibility standards. By far the biggest offenders were low contrast text, missing alt text for images, empty links or buttons, missing form input labels, and missing document languages. 

Using the WCAG’s four principles of digital accessibility as guideposts—that content must be perceivable, operable, understandable, and robust—here are some key (but not all) design factors we focus on to address some of the biggest accessibility hurdles:

• Contrast ratio: All copy should have a contrast ratio of 4.6:1 or higher. While a contrast ratio of 17.40:1 will never be standard, if your core group of users is visually impaired, you may consider using this ratio. A lot of the web, though, is at 3.5:1, and you’ll even see some footers at lower contrast ratios.
• Image alt text: Any image that contains a link or has critical information in the image itself needs alternative text. The only image exception is anything users don’t need to interact with or that is purely decorative. Almost all accessibility tools—screen readers for example—read image alt text, so it’s a game changer for people with visual impairment.
• Digital content: Avoid strobes and flashing video as they can cause seizures, or animations that disappear quickly. And always consider accessibility needs with video—avoid timers that might get in the way of anyone who may not be able to interact quickly enough, or error messages that may not be picked up by screen readers. And always include video transcripts. 
• HTML meta layer: This is something to consider on the dev side. You can set up key attributes for HTML for the page so screen readers understand how to read the page.
• Text size: Text size is a core consideration for people with vision impairment as smaller fonts are difficult to read for many users. We currently have a best practice with one of our client partners for 14 as the minimum font size (except for footers). And WCAG has a requirement that users must be able to increase the font size to 200% without issue.

• Complex interactions: Design concepts like carousels, tables with tabs, and nested content lead to unique challenges for assisted technology—and each one will have unique considerations. As best practices on the newest forms of interaction develop, W3C and WebAIM publish articles on developing best practices for the newest forms of interactions.
• Navigation: Tab navigation is essential for accessibility, that’s what most screen readers and accessibility technologies use. 
• Errors: Errors should live in the ARIA attributes. This lets us surface key information and errors to users they would miss otherwise—issues like purchases not going through properly or table data not loading. 
• Language: For screen readers and other assistive technologies to be able to read translated content correctly, include HTML language meta information.

Create varying experiences for the same message (for example, a visual experience for those with dyslexia and an audio experience for people with visual impairment) to ensure accessibility for everyone. And take a screen reader (or two) out for a test drive around your site with your eyes closed to see how easy or difficult your pages are to navigate and to create a baseline for improvement. 

The road ahead

There's no universal 'right' advice when it comes to accessibility. What’s best for you will depend on your situation and your target audience.  But one thing is certain: Design is getting more complex and designers will need enhanced skills to combine enticing design with accessibility. Exciting new technologies on the horizon—such as virtual reality headsets that will allow the visually impaired to see color for the first time—and a drive for inclusion mean we have a unique opportunity to make a real difference in people’s lives. And the time to do that is now.