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.
5 Big BenefIits of WCAG Compliance
Web Content Accessibility Guidelines (WCAG) define how people with different abilities or needs can use your site and access its content. Here are we’ll discuss 5 big benefits of web accessibility for your business and your customers.
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.
How to Find a Great Digital Transformation Partner
Have you decided to find a digital partner to help “future proof” your digital ecosystem? Here are the best checklist to help you decide if a potential partner is a good fit.
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
About TA Digital
TA Digital is the only global boutique agency that delivers the “best of both worlds” to clients seeking to achieve organizational success through digital transformation. Unlike smaller, regional agencies that lack the ability to scale or large organizations that succumb to a quantity-over-quality approach, we offer resource diversity while also providing meticulous attention to the details that enable strategic success.
Over the past 20 years, TA Digital has positioned clients to achieve digital maturity by focusing on data, customer-centricity, and exponential return on investment; by melding exceptional user experience and data-driven methodologies with artificial intelligence and machine learning, we enable digital transformations that intelligently build upon the strategies we set into motion. We are known as a global leader that assists marketing and technology executives in understanding the digital ecosystem while identifying cultural and operational gaps within their business – ultimately ushering organizations toward a more mature model and profitable digital landscape.
Recognized in 2013, 2014, 2015, 2019, 2020 and 2021 Inc. 5000 list as one of the fastest growing companies in the United States, TA Digital is pleased also to share high-level strategic partnerships with world class digital experience platform companies like Adobe, SAP, Acquia, commercetools, Sitecore, and Elastic Path.
Explore TA Digital
Work
See what we’ve done for our clients – and what we can do for you.
Solutions
Our teams specialize in solving your biggest digital transformation challenges.
Services
Content. Data. Experience. Let us help guide your digital transformation.
Partners & Platforms
Put our partnerships with world-class digital experience platforms to work for you.
Contact Us
Let’s talk about getting your business where you want it to go.
Perspectives
Get expert analysis on trends and developments affecting your business.