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.
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.
Lifeblue’s front-end developers share a mission of ensuring that the experiences we share and the stories we tell are 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.
“There’s an inherent quality to the web itself that is about connecting people,” said Jonny Pacheco, a front-end developer at Lifeblue. “It’s about reaching more people. It’s about democratizing content and publishing. Part of the spirit of that is reaching as many people as possible via technology.
“So if we build things in a way that is very short-sighted, we are forgetting about whole segments of people – or just the nuances that make everybody different.”
At Lifeblue, we believe it is possible to combine aesthetically pleasing design with accessibility and user functionality. We’d even say it’s our duty.
“Over the years, as developers have discovered we can make things pretty and fluid and snazzy, we sort of forgot about accessibility,” Pacheco said. “In the past few years, there has been a big push to remind ourselves of the value of that.
“It’s still just the same old best practices of the web.”
These five areas of focus don’t solve every accessibility issue, but they can go a long way to make a website more usable.
1. Pay attention to your alt text.
Who we’re helping: 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."
2. Make sure your text is readable.
Who we’re helping: 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.
3. Color should not convey meaning.
Who we’re helping: 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 the Heifer International website shows how links appear to users with different types of color blindness – and solutions to make the content more accessible.
4. Make forms a little less painful.
Who we’re helping: 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.
5. Help your users avoid keyboard traps.
Who we’re helping: 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.
Establishing a focus order that follows the page sequentially and making focus states visually obvious (as shown below) can help keep users moving through their options.