Why Web Accessibility Is Important for Your Audience and Your Business

A colorful focus effect on lines of code.

Typically when developers discuss web accessibility, they’re focusing on removing barriers that make it difficult for people with disabilities to interact with their sites. Aside from the simple ethics of good design, accessibility is required under the Americans with Disabilities Act. It’s also caught the attention of the Supreme Court in recent years.

But the issue runs far deeper than just a legal mandate. Accessibility alone shouldn’t be the standard for web design. We should also focus on usability.

Symbols indicating types of disabilities and other conditions.
Types of disabilities that web design can address
Credit: Microsoft Inclusive Design

The Importance of Accessibility & Usability in Web Design

The web is meant to connect people, and to reach as many people as possible using technology. If we’re not building accessible websites or accounting for accessibility in our web design, we’re excluding entire groups of people. We’re also ignoring the the vast differences in user experiences that make us all unique.

That said, web accessibility does not mean we have to compromise form for function. It is possible to combine aesthetically pleasing web design with accessibility and user functionality. As a certified B-Corporation, we’d even say it’s our duty.

Below you’ll find five examples of accessible web design. They don’t solve every web accessibility issue, but they can go a long way to make a website more usable for those with permanent, temporary, and situational disabilities.

Accessibility Standards to Consider in Web Design

Pay attention to your alt text.

Design for users with little or no vision or who have turned off images to save data.

Your alt text should describe the image and should be as meaningful as possible. It should be descriptive and contextual as it concisely conveys the same information that sighted users can get at a glance.

Also, make sure your alt text ends with a period to help screen readers know when to stop.

Example: For the image below, the alt text should not repeat the text overlay or call it a “cow.” Instead, it should describe the image as “a black cow being fed by hand outdoors.”

An image of a cow with text overlay.
Alt text should convey what the image shows to meet accessibility standards in web design

Make sure your text is readable.

Designed for users with little or no vision or who have cognitive disabilities.

Pay attention to text size, text color and background color: “We need high contrast between the text and its background, but in addition, it also needs sufficient font size,” said Nicole Oakes, a front-end developer at Lifeblue.

Contrast is important for users who have color blindness, and developers can measure contrast for their color choices using a variety of online tools.

Color should not convey meaning.

Design for users who have little or no vision or who have cognitive disabilities.

Links should stand out without relying on color differences alone: “You can also use text labels or icons or an underline to convey those meanings or differences,” Oakes said.

The following example from our previous site for the Heifer International website shows how links appear to users with different types of color blindness – and solutions to make the content more accessible.

Images of different colors of type, representing how they appear to people with color blindness.
Images of different colors of type but with weighted links, representing how they appear to people with color blindness.
Examples of accessible web design

Make forms easy to navigate.

Design for users who have little or no vision, who have cognitive disabilities or who have limited dexterity.

Adding labels and placeholder text to fields in forms helps users who rely on screen readers. Also, adding icons to differentiate fields can help users who have trouble distinguishing colors.

It’s important to indicate where the user should be focused when using just a keyboard to navigate forms.

“We’ve added focus outlines to fields to help out. It comes by default on a lot of web browsers, but because a lot of users thought they weren’t very pretty, they’ve been taken out,” Oakes said.

Image showing a form with labels and icons to help users.
Focus indicators are important elements of accessible web design

Also, websites should deliver good user feedback to confirm successful transactions or explain issues preventing actions from being completed.

Help your users avoid keyboard traps.

Design for users who have little or no vision, users who rely on screen readers and users who have limited dexterity.

A keyboard trap occurs when a person who uses a keyboard to navigate a web page is unable to move focus away from an interactive element without a mouse – for example, when a modal can’t be closed.

To fix this, establish a focus order that follows the page sequentially and makes focus states visually obvious (as shown below). This can help keep users moving through their options.

Image showing a modal with a clear focus order.

+++

We believe the experiences we create and the stories we tell should be available to the widest audience possible. Our best work takes into account not just potentially permanent disabilities such as blindness or deafness, but also temporary or situational challenges our end users face.

Follow Lifeblue on Facebook, LinkedIn and Instagram, or connect with us through B-Corp.

About Us

Exceptional results, driven by purpose

We’re a full-service digital agency with end-to-end capabilities and a commitment to exceeding expectations. As a Certified B Corporation, we’re also proud to be part of a global movement of companies that believe business should be a force for good.

man at a white board
group in a presentation
gong
Contact Us

Let's move
forward faster

Turn your ticket sales
into revolving revenue

Sign up today to receive our free report on the future of sports marketing: The Democratization of Season Tickets.

an image of white paper called The Democratization of Season Tickets.