5 Ways Content Can Improve your Websites’ Accessibility — and Overall UX
But the reality is that there are tons of relatively simple things you can do to make your websites more accessible. And they’ll not only make your websites more accessible to the disabled, but also significantly improve your user experiences for everyone. But first, let’s be clear about our terms: What’s accessibility? Here’s accessibility expert Jennison Asuncion’s definition of accessibility: Accessibility refers to designing and developing user interfaces that everyone, including people with disabilities, can independently consume and interact with. Note that the stress here doesn’t fall specifically on “people with disabilities,” but everyone. That makes accessibility a natural concern for all of us involved in user experience design, regardless of discipline. Now, on to the tips! 1. Use unique, meaningful button and link names Pretty easy to tell where that link will take me. I can’t tell you many times I’ve had a mockup or prototype hit my inbox (or Slack) with 16 “learn more,” “read this,” or “see more” links scattered across it — and groaned. Why? Because it’s horrible for users of screen readers, which typically allow people to skip from link to link on a page, ignoring the content in-between. It’s a highly efficient mode of navigation that helps screen-reader users quickly get where they want to go. But how easy do you think it is for a blind or low-vision user to figure out which of those “learn more” links leads to the “more” they want to learn about? And it’s actually not that different for sighted users. Think of all the times you’ve fired up a website knowing exactly what you’re looking for, but not quite sure where to find it. Do you read through all the content? Or do you simply hunt around for the right link? You might scan through the headings and subheads first — after all, they’re bold and eye-catching — but you still have to live with the cognitive load of connecting those headings to the links below. But links tend to be pretty visually loud too, so wouldn’t it be even easier if every link told you exactly where it would take you without demanding I read all the other copy? Writing accessible links and button copy Do Embed links in clear, specific language that tells people where the link will take them and why they might want to go there Indicate if a link will open high-bandwidth media like a PDF or video within the linked text Don’t Use generic link or button text like “learn more,” “read this,” or “see more” Embed links in even more generic terms like “this,” “this page,” or “here” Link to “naked” URLs (i.e., www.thewebahead.net) unless there’s context that clarifies why that link is there For more, check out the WebAIM article on links. 2. Add clear, useful alt tags to images Alt tags also play a key role for screen-reader users on the web. Without these invisible bits of copy, there’s literally no way for low-vision and blind users to understand the content of images, data visualizations, and infographics. With alt tags, we can ensure that no one has to miss the information conveyed in our pie charts, hero photos, and infographics. Back in the bad old days of black-hat SEO madness, alt tags were abused as just another method of stuffing a page with keywords. Which was horrible for users of screen readers. Just imagine reading through a blog article and hearing: “CSS layouts let us CSS HTML tables table-based layouts tables web web design code markup floats inline inline-block block W3C web consortium…” All in a screen reader’s…
Like to keep reading?
This article first appeared on webflow.com. If you'd like to keep reading, follow the white rabbit.