Visually accessible content: Can everyone read your website?

At WordCamp US 2017, accessibility was one of the biggest points of emphasis. And for good reason — according to Interactive Accessibility, 8.2% of people have a disability that could affect their ability to use a mouse or keyboard; 3.3% of people have a visual impairment; and 3.1% of people have a hearing impairment. Making a website “accessible” means different things to different people, and it’s important that your website addresses as many of these issues as possible so that your site is accessible to everyone. Over the next few weeks, we’ll cover a variety of accessibility challenges to consider, but in this article, we’ll cover visual accessibility accommodations to help ensure visitors using screen readers can access your content.

For visitors to your site with visual limitations, a screen reader makes content consumption possible. Because websites are more than only plain text, it’s important to make sure every element of your website can be “read,” even if it’s not text.

Making images accessible

Images are the most obvious challenge for people with visual limitations. How could a screen reader “read” an image?

Always use alt text for images

The first essential way to make images “readable” is to use alt tags. You should use them anyway because they’re good for SEO — in fact, every improvement you make to your site to help with visual accessibility will also help your search engine results, because search robots scan pages the same way screen readers do.

With this in mind, apply alt text to every image you add to your posts and pages. Use this alt text to describe what the image contains. When you write alt text, think of it like you’re describing the image to someone who can’t see it, because that’s exactly what you’re doing.

Don’t use images to style text

While it might be tempting to use an image to style text in a creative way, avoid this temptation. If you feel limited in your ability to style text on a website, there’s probably a CSS trick that will allow you to get the look you’re desiring. Using styled text instead of images will help your site in many ways, helping it to load faster as well. But most importantly, it makes a screen reader much more effective.

Proper use of heading tags

Building on the idea of using images to style text, it could also be tempting to use heading tags to style your text. Remember, headings don’t exist to make text bigger. Headings exist to create an “outline” of your site, and search robots and screen readers rely on their accuracy. We’ve covered tips on heading tags before when discussing SEO tips, but remember to only use one H1 tag and don’t skip a heading (i.e. go from Heading 2 straight to Heading 4). Using the headings for this article as an example, here’s what they look like in outline form:

  • H1: Visually accessible content in WordPress: Can everyone read your website?
    • H2: Making images accessible
      • H3: Always use alt text for images
      • H3: Don’t use images to style text
    • H2: Proper use of heading tags
    • H2: Good link text

See how easy that is to follow? That’s your goal when using heading tags.

Good link text

In the early days of the internet, using the phrase “click here” as link text was all the rage. Want to know more? Click here! That’s perfect, right?

Simply put, no. “Click here” presents two big problems. First, in the era of mobile devices, we’re not always clicking. It’s not a big deal, but you can’t “click here” from a phone — you’d be tapping. Is that distinction purely semantics? Maybe, but it’s still not wrong. As a remedy, you might be tempted to say something like “visit this link” instead.

While that solves the first problem, there’s a second one that changing “click” to “visit” won’t fix. For visitors to your site using a screen reader, they’re presented with a list of links and can choose one to visit next. If you use “click here” or “visit this link” as your link text, how could someone using a screen reader know which link to choose? Do I want to “click here” or would I rather “click here” or “click here?” This vague link text makes links completely unusable to your site’s visitors using screen readers. What happens when someone can’t determine where to go next? They’ll probably leave your site.

Instead, make your links describe their target. For example, consider the link text in this page:

  • WordCamp US 2017
  • Interactive Accessibility
  • SEO tips

If you’re using a screen reader to read this article and you request a list of links afterward, there’s no question about the destination of any of these links. Instead of using “click here” or “visit this link,” it’s really easy to add a description of the link instead.

For more information on assisting your users with visibly accessible content, see our other article on the subject, Visually accessible content: Can colorblind users see your site?