Website accessibility is essential in order to provide equal access and equal opportunity to people with diverse abilities. Nearly 61 million people in the United States — and over 1 billion people worldwide — have a disability. In 2019, more than 11,000 lawsuits were filed in federal court over websites that failed to meet accessibility guidelines set under the Americans with Disabilities Act (ADA) and other global laws and policies.

These facts show just how important it is to address accessibility in the early stages of website design.

What Is Digital Accessibility?

Digital accessibility involves designing content to be inclusive of people who have visual, motor, auditory, speech, or cognitive disabilities. More than 56 million people in the United States (nearly 1 in 5) and over 1 billion people worldwide have one of these disabilities. That's why there needs to be a universal design with accessibility features.

How to Make Your Site Digitally Accessible

As a UX designer at TA Digital, it’s part of my day-to-day responsibilities to make sure everyone has access to what I design, regardless of their ability, context, or situation. A few guidelines can help your website meet industry standards under the AA of the Web Content Accessibility Guidelines (WCAG 2.1). Primarily, these steps focus on web and mobile accessibility.

1. Color Contrast Is Key

According to the World Health Organization (WHO), approximately 2.2 billion people have some form of vision impairment. Color contrast is critical to people with low vision because they may find it difficult to read text against a low-contrast background.

A couple of good practices include having a minimum 4.5:1 contrast ratio and never using a light-gray text over a dark-grey background. It’s best to test this with actual users, as they will be viewing your site in different brightness conditions.

2. Don’t Use Color Alone to Make Critical Information Understandable

Using color as a singular visual cue can make it hard for people with low visual acuity or color blindness to understand the content. By adding texture, icons, or underline text you can help them differentiate information and process it easier.

For complex charts and graphs, which commonly use color to distinguish the data, other visual aspects — like shapes, labels, size, and texture — can help make them more accessible.

3. Use Focus States to Find Your Place

Focus indicators help people understand which element is the focus of an interface and where they are when navigating your site. They’re used by people who have limited mobility or injuries like carpal tunnel syndrome. Other user groups who can benefit from focus indicators include power users and individuals who prefer the keyboard over a mouse.

Focus indicators should differentiate themselves from other elements around them in context, be highly visible, and stand out with good contrast. A good example is the blue outline you see when tabbing through different links, inputs, and buttons.

4. Use Labels for Form Fields and Inputs

It’s been common practice to use placeholder text as a label when designing a form. But it’s a mistake for a number of reasons. The text inside the fields usually has low contrast and is harder to read. And if you’re like me and forget what you’re supposed to type once you’ve clicked in the box, the labels are hidden from view at that point.

People who use screen readers usually navigate through a form quickly by seeing the label in context when typing in the field. If you hide descriptions or directions in a form, usability is being sacrificed in favor of simplicity. Alternatively, too much instructional text can be overwhelming.

The goal is to provide enough information for a user to complete the task without friction.

5. Write Alternative Text for Images

People with low visual ability often use screen readers to “hear” the web. These tools convert text to speech so a user can hear the words on a site. Writing descriptive text helps people understand how the image relates to the story. If you don’t write any alternative text, the user will only see the file name or title. If you need some guidance, Google’s image captioning AI has 94% accuracy.

Alternative text is best shown within the context and surroundings of the image. And use text larger than 11 pixels to ensure a quality experience.

6. Use Correct Markup to Support Content Structure and Hierarchy

Similar to printed documents, headings are tags that mark where the content starts and establishes the structure and hierarchy within a given page. Titles with large font sizes help people easily understand the order of the content.

In the same way, screen readers use headings to read the page content in a hierarchical flow. When they’re implemented correctly, people can use them to listen to a list of all the headings and navigate directly to what they want.

Adding the ability to skip content will also aid in usability because no user, including those who use screen readers, reads every word on every page. Screen readers often read up to a rate of 300 words per minute or more, which is equivalent to a user scanning a page.

7. Support Keyboard Navigation

Keyboard accessibility is one of the most vital aspects of web accessibility. People with motor disabilities, blind people who rely on screen readers, people who don’t have precise muscle control, and power users are dependent on a keyboard to navigate content. For example, I use the Tab key to navigate through interactive elements like links, buttons, etc.

Focus states, as mentioned, provide a good visual indicator of the component that's currently selected. As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page from left to right and top to bottom. A good exercise is to try to navigate your site using only a keyboard.

Be careful of the size of your navigation, including the number of links and the length of the text. Tabbing through long menus is challenging for those with motor disabilities. And listening to lengthy links can be overwhelming for people who use screen readers. Be concise and to the point.

How to Get Started

Accessibility may not be simple to implement, but If you follow these guidelines, change the most problematic areas intuitively and continue to make improvements, you can enhance user experience as well as keep your site ahead of potential challenges.

If you’re interested in taking accessibility a step further, conduct a website accessibility audit to find out if your site works with assistive technologies and meets AA of the Web Content Accessibility Guidelines (WCAG 2.1).

To learn more about TA Digital, contact us.

Resources

Web Content Accessibility Guidelines

W3C Visual Contrast

W3C Visual Contrast without Color

W3C Focus Visible

WebAIM Accessible Forms

W3C Alternative Text

WebAIM Semantic Structure

W3C Keyboard Navigation