3 Ways to Increase Your Website’s Accessibility Today
We’re keen on accessible web design around here—as we’ve discussed in recent articles on the topic. Mostly, we think that making the Internet available to every user, regardless of their ability, is the right thing to do. And it’s smart business, as there are nearly 100 million Americans who have some form of disability.
The good news? Most of a website’s accessibility is handled on the back-end where you’ll never have to touch or manage it. If your site was developed by accessible-minded professionals, you’re 90% of the way toward providing a fully accessible online experience.
The less-good news? There are still plenty of ways to manage your website that will make it less accessible. Let’s look at the three biggest ways you, the site manager, can improve accessibility.
1. Links Should Clearly Describe Where They’re Sending the User
One of the most commonly overlooked accessibility rules, this one basically says that a hyperlink on a webpage should use clearly descriptive text. For users who employ a screen reader—i.e., a piece of software that translates web content into voice for users who are blind—confusing links present a real quandry.
For example, almost never use links like “Click here!” or “Read more.” Instead, make them more descriptive. “Click here” could become “See Our Annual Report,” while “Read more” could turn into “Read the rest of this article.” Those little tweaks can make all the difference to some users.
But don’t fret. Even major online publishers aren’t immune to this slip-up. Here’s an example from the Huffington Post:
“Cats” and “dogs” and “wandered onto some thin ice” aren’t especially descriptive. The user who’s employing a screen reader tool won’t know whether the link labeled “Cats” will send them to Wikipedia, another article about a cat, a photo collage of cats, etc.
Consider adding a “Skip Link” which appears atop your page and allows users to skip past the navigation and menus and get straight to the main page content. This can save a massive amount of time for screen reader tools.
2. Use Page Structure
Structure is a good rule for web content in general.
Employing clear and descriptive page titles, headlines, subheads, bullets, numbered lists, block quotes, etc. helps every user more easily scan and digest your messages. Webpages without structure—i.e., a big hunk of uninterrupted text—is a surefire way to intimidate and scare away your users.
But structure also boosts your site’s accessibility. Assistive technologies for users with a disability can use the structure you’ve set up to help users jump around the page more quickly. It’s like giving these users shortcuts to the content they’re interested in.
Every page on your website should have an H1 tag (i.e., a headline tag). And the rest of your page should follow the same hierarchy—e.g., H1, followed by H2, followed by H3, and so on.
3. Always Use ALT Tags for Images
When you add an image to your website, add an ALT tag to it. Always and forever.
The ALT tag is text that is attached to your image (on the back-end) and which can be easily read by users with a visual impairment. When it encounters an image, a screen reader tool will instead read aloud the image’s ALT tag. If there is no ALT tag, the user will have no idea what the image is.
Use ALT tags that have meaning. You don’t need to describe every detail in an image, but you should use enough to convey the purpose of the image.
For example, if we were to add this image…
We could add any number of ALT tags:
- Dog licking ice cream cone
- White scruffy dog licking vanilla ice cream cone
- Profile of white dog licking a tall ice cream cone in front of a fence
Any one of these would work. What wouldn’t work? Not adding an ALT tag.
ALT content shouldn’t be redundant—i.e., it should not be the same as the surrounding text. And it’s unnecessary to include phrases like “image of…” or “picture of…”