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.
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.”
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.
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.
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.
+++
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.
