Web accessibility is a broad topic that includes many considerations, but the short version is this: With a small extra effort while developing features and writing content, we can ensure that everyone is able to engage with our stories, even if they are vision impaired, have motor difficulties that prevent them from using the usual input techniques, or otherwise need to access our content using specialized software.

The essence of web accessibility is crafting all our HTML such that it is semantic. As long as our content uses HTML tags like <img> and <h3> meaningfully, all visitors will be able to make sense of it.

In this guide we'll address a few key concepts that you can apply to your writing to make it accessible to everyone.

Add alt text to images

“Alt text” is a field of the <img> tag that gets used when a user isn't able to look at the image, such as when using a text-to-speech tool to navigate by voice.

Every image in a GV post should have a detailed alt text configured, and when translating posts, alt texts should be translated into the local language. 

You can edit the alt text in the “Add media” popup, or by clicking an image like you would to edit the caption.

On GV (and in WordPress in general) you can easily add alt text using the “Alt text” field of the Add Media popup menu or by clicking the image in the visual editor, then using the “Alternative text” field.

Alt text v. caption

Note that alt text is different and separate from the caption! While the caption is text that goes alongside the image when it's shown, the alt text replaces the image when it's missing. Images should usually have both, and they should be complementary rather than repeating the same information.

What should go in the alt text?

The answer can potentially be very complex, but it can also be dead simple: Use a description that will replace the image for the reader. Imagine the image was missing and you couldn't see it, what would you want to know?

As long as you put something to help the reader keep up with the story and not miss out, you will have improved their experience dramatically!

As you can see in the screenshot above, WordPress includes a helpful link: Learn how to describe the purpose of the image. This is an excellent, detailed guide of what kind of alt text you should use for different images. It's a bit heavy though, so I'll try to simplify it below.

I think this summary from David O'Brien's article “Providing Text Alternatives for non-text content” is a good start:

• Use empty alt attributes alt=”” for decorative images
• For informative or complex images, use context, captions and alt attributes together to give all users access to the same information
• For functional images, like search icons, or logos that link to the home page of a website, describe the function of the link in the alt attribute

A “decorative image” would be something like a little typographic flourish at the end of an article, a visual with absolutely no meaning. Decorative images should have an empty alt tag (leave the field empty in WordPress), but GV posts almost never include “decorative images” so we should never have empty alt tags in GV posts.

“Functional images” are also extremely rare in GV posts, though we do have some on our site, such as the magnifying glass icon on a search form, or the social media icons on our share buttons. For these the alt text should be the words you would use if it was a text button, like “Search” or “Share on Facebook”.

All other images fall into the Informative image category, including just about any photograph or collage. In these cases the alt text should be a description of the image that conveys its meaning.

Writing great alt texts

So what is the meaning of an image? You have to use your big beautiful human brain to decide that! Each image is unique and so is the meaning of that image within the text.

In some cases describing the physical details of what's shown is important, in other cases the literal details might not be important at all. If the emotions of an image are central to its meaning, describe them. If it's the colors or location that's vital, describe those as well, or instead.

The important thing is that we make an attempt to help someone who can't see the image get the impression that they would have gotten if they saw it, and most of all, to make an effort!

Further reading about writing great alt text:

• Providing Text Alternatives for non-text content
• Writing great alt text: Emotion matters
• W3C guide to alt text for informative images with many examples

Summarize embedded video and audio in the text

We learned above how to use alt text to offer a description of images to users who can't see them, but what about videos and audio for people unable to access them? Unfortunately there's no direct equivalent to alt text that can be used on video and audio embeds, but we can still  apply a similar amount of care and attention to ensure all readers can follow along with stories that include them.

Simply put: Whenever you embed video or audio in the post, you should integrate a description of its content into the text.

Obviously this doesn't mean creating a full transcript of every video, or describing the composition of every visual. Instead, it means devoting a few words to the importance of the video, and what viewers would take away if they watched it.

Descriptions like this might seem redundant, but they can be written in ways that integrate naturally into the overall document, and are priceless in allowing a reader who can't play the video or audio to still make sense of the story. They are also useful for readers who simply don't want to play a video right now, to help them decide if pressing play is worthwhile or not.

Remember that when it comes to video and audio there are a lot of reasons it might not be accessible to a reader beyond just disabilities. They might be on mobile and not have enough data to download a video, or the audio file we're linking to might be deleted or otherwise unavailable. Adding summaries of multimedia embeds into the text of posts protects all types of readers, both those with accessibility needs in the present, and everyone else in the future if and when the media stops working.

Link text should describe the target

Another important consideration for accessibility is the text we use when crafting links. Visitors using accessibility tools will often navigate by jumping from link to link in a document, and in many cases the first text they “read” will be the text of the link, so it's vital that all links are clearly labeled and help visitors understand where they will be taken if they choose to “click” them.

The most iconic example of this is avoiding links with only a generic word in them, such as “Click here to learn more”. Links like this may make sense within the full context of the page, but if you navigated to the link using a text-to-speech tool, you'd have no idea what it does. A better link to use in such a case would describe what will be learned, such as “Learn about our mission“.

The web standards document about understanding link purpose is a bit of a heavy read, so I'll try to simplify and summarize it:

• Link text should help the reader understand the purpose of the link so they can decide if they want to follow it.
• When in doubt, the title of the page or document being linked to is the ideal content for link text, as it makes it very clear where the link leads.
• Ideally the link text should make the purpose clear without additional context.
• If more context is required to understand the link than the link itself provides, the context should be in the same sentence as the link, so that readers can access the information without losing their place in the navigation.
• Additionally if adding extra context inside the same sentence, it's best if it comes before the link, rather than after, so that users will naturally encounter it before they reach the link.
• Finally, if multiple links lead to the same location, they should use the same text whenever possible for consistency. Inversely, multiple links that lead to different locations should not use the same text, to avoid confusion.

That's a lot to think about, but the main takeaway is to try to be verbose and detailed when creating links. When in doubt, include more information in the link itself, rather than in surrounding text, and try to help readers understand where they will be taken if they click. Often this will mean that the overall document is longer than before, but in exchange it will also be easier to read and understand, and in the case of journalism, it will have clearer sources and references.

Remember that this kind of writing benefits all readers, as they will understand how we are sourcing our information and be more able to make decisions about digging deeper into our sources. Clear, detailed link text also helps protect articles from the inevitable onset of link rot. When a link is described in an article, it's less of a disaster if the linked URL stops working in the future.

For more examples and details, check out this article: Master the Art of Accessible Link Text.

Use headings to organize documents

Another way to help all readers easily navigate our content is using headings like <h3> and <h4> correctly.

Headings should be used to group content and create sections, with the higher numbers reflecting smaller and smaller subsections (i.e. h4 is a subsection of h3).

The W3C guidance on headings is a bit complex, but for the purposes of writing posts on GV, it is pretty simple: Use <h3> to create sections in your posts with useful headings, and if you need even smaller subsections, use <h4> inside the <h3> sections to create subsections.

Please avoid using headings for things other than creating subsections, as it could lead to confusion for some readers, even if it might create an aesthetic you want to achieve.

If you just want larger text that doesn't denote a subsection of the article, please use the <big> tag, or the .pull-quote format from the Formats menu of the Visual editor.

Use bold and italic rather than “underline”

Underlined text on the web should always be a link. While it may sometimes be tempting to underline text for emphasis or style reasons, you should never do so!

If you want to put emphasis on a section of text, you should use bold or italic styles instead. The B and I buttons in the WordPress editor will apply the standard HTML tags that you need (<strong> for bold text and <em> for italic).

Bold and italic are universal stylistic concepts that accessibility tools are familiar with. Users listening to a text-to-speech version of an article will be able to hear then difference when you use them correctly.

Use HTML lists whenever possible

• This is an example of a HTML list
• Lists organize complex information into a more digestible format for everyone
• For people using accessibility tools, HTML lists make the information easier to navigate and understand.
• Don't overlook the humble HTML list!