Accessible content: a guide to digital content accessibility

By Laura Kishimoto
Accessibility

‎

Content accessibility has tangible business benefits and directly impacts SEO. What’s more, accessible content benefits all your users alike.

We know from our day-to-day work that a website is only as accessible as its content. That’s why we jumped at the chance to speak about content accessibility at CXcon: The Accessibility Edition: Inviqa’s free, virtual web accessibility conference.

You can get on-demand access to our talk on crafting inclusive content via the Inviqa YouTube channel, or keep reading this post to get all the key information.

The benefits of accessible content

At least 22% of people in the UK have a disability that impacts how they engage with your digital products and content.

We’ve spoken at length about the economic, moral, legal, and usability drivers for digital content accessibility. But if you’re still unsure what these are, do check out our web accessibility checklist and our latest digital accessibility report.

Before we launch into content accessibility, we wanted to highlight this point: that usability, search engine optimisation, and accessibility share the same goal of making it easy for users to find and interact with your digital content and services. 

So when you improve the content accessibility, it tends to hugely benefit your usability and SEO as well.

Accessible content starts with HTML  

How you create content depends how your website is built. You might use a WYSIWYG editor with a formatting toolbar, or you might be editing HTML directly. 

Either way, your content will use HTML elements, since these are the building blocks of the web. 

These elements tell browsers what your content is and how to display it. They help people understand your content, and they’re used by assistive technology to determine page structure and help visually impaired users navigate around your web pages. 

So giving your content meaning by using the right HTML elements for your content is key to making sure that people using assistive technology like screen readers are not left behind.

HTML elements help assistive technology users to better understand your content. They’re also used by search engines to validate the quality of your website, directly impacting your SEO.

It matters, therefore, that you use HTML heading elements, instead of large or bold text. It matters that the footer on your website is an actual footer element, rather than some small text. And it matters that you use paragraphs, instead of multiple line breaks.

The role of navigation in accessible content 

When we talk about content accessibility, we’re usually referring to the content on a page. But if users can’t find this content in the first place, it can’t be considered accessible. Therefore navigation matters when we think about accessibility.

As well as your main navigation, you should optimise secondary (or sidebar) navigation for navigating within site sections, as well as on-page breadcrumbs that tell users where they are in your site hierarchy.

Here are some other tips for navigation:

  • Offer site search: some users might prefer to use search instead of navigation menus or landing pages. Ensure your site search returns relevant results, with accurate titles and summary text.
  • Update links: don't forget the less prominent forms of navigation, such as header and footer links and a global sitemap. Ensure links are maintained and updated as your site grows and evolves.
  • Use meaningful link and button text: users should be able to guess where a link will take them, or what a button might do, just by its text.  
  • Use evidence over assumptions: never assume users know your site as well as you do. If you can, conduct user testing to find out whether your perception of the ideal site structure matches up with user expectations.

Use structured content to improve accessibility

Content structure helps users make sense of the information you provide on your site. It also makes it possible for assistive technology to present that same content in alternative formats.

Here are some tips on how to structure your content:

  • Use the correct heading hierarchy: arrange your content into headings. Every page should have an H1 (the top-level heading), below which you should use H2 subheadings. Below these you can use H3 ‘sub-subheadings’, and so on. Follow this hierarchy and never skip from H2 to H4, for example.
  • Group related content together: use list elements to present key points, instructions, or related resources. This helps screen reader users to make sense of your content and quickly find key pieces of information.
  • Use HTML elements for their intended purpose: use the WYSIWYG tools or HTML elements that are available to you for their intended purpose. For example, you can use semantic formatting such as <em> to embolden or emphasise an important point, but use it sparingly for key information only, and never use it for subheadings.

Make content readable and understandable 

Once you've structured your content into headings and lists, start thinking about the content itself, and the way that it's presented.

Here are some questions to ask yourself:

  • Am I using plain and simple language? Avoid jargon and explain technical terms and acronyms the first time they’re used on a page. Consider the readability of your content for users with visual and neurological impairments. The free Hemingway online editor is a great way to check and improve content readability.
  • Have I checked colour contrast? Ensure an adequate contrast ratio between the foreground and background elements.
  • What size is my text? Text size should be generous – at least 12 points, which is 16 pixels. Using clean, sans serif fonts is also very helpful, especially for body text.
  • Is there adequate spacing? For people with dyslexia in particular, you can make your text more readable by increasing line spacing. Avoid using too-narrow or too-wide columns.
  • Is my content easy to skim? Use visual signposts like headings and lists to break up your content. Split long passages of text into multiple paragraphs.

Convey meaning in an accessible way

Another consideration for crafting accessible content is to think about how you convey meaning.

Colour is often used to convey meaning, for example:

  • green is associated with things that are complete or successful; and 
  • red is associated with things that are incomplete or unsuccessful.

Using colour this way is impactful and intuitive, but people who are colour blind or using a screen reader won’t infer the same meaning, so we can’t communicate meaning through colour alone.

What you can do is supplement the meaning of colour by using text or icons to ensure everyone can understand what you're trying to communicate. 

For example, green text that conveys that something is completed or successful could be accompanied by a tick. Red text, on the other hand, could be accompanied by a cross. 

Where you use supporting icons like this to help convey meaning, always ensure that there is accessible text associated with those icons.

Make your images accessible

There are two main types of images on your website: 

  • decorative images which don’t convey important information and are usually there for the aesthetics; and  
  • non-decorative images which include useful information (for example, a graph within a blog post).

Both of these types of images require alternative text (aka image alt text). 

In the case of your decorative images, the alt text should be null i.e. <img alt=""> so that screen readers will ignore them. 

It’s important to use this null attribute, rather than just ignoring alt text for the image, otherwise screen readers will read the image file name, which can be a major distraction.

For non-decorative images that convey useful information, alt text should be as concise as possible. If further explanation or detail is needed, that should go in the content itself.

Here are some other tips:

  • Avoid images with text: this text is inaccessible to screen readers and also prevents users from being able to zoom or customise the text to their needs. If you cannot avoid images of text, it's best to have the exact same text in the alt attribute.
  • Don’t use ‘image’ in your alt text: don’t include ‘image’ or ‘image of’ in your alt text. A screen reader will automatically announce to the user that it’s an image.
  • Use correct alt text for linked images: some images are used to initiate actions rather than to convey information. For example, you might have a hyperlinked logo that takes you to a website homepage. The alt text for these images should convey the action that will be initiated – for example, where the linked logo or image will take the user.

Tip: check out our article on how to write effective image alt text.

Accessible tables and multimedia

Make your media and downloads accessible, including images, videos, data, and documents.

Videos 

Videos should always have captions or transcripts presented alongside them to be accessible. Where you’re using automated captioning, for example on YouTube, be sure to edit the captions to improve their accuracy.

Data 

Most data can and should be presented in tables. Table elements are semantic HTML elements. They have meaning and can help your user navigate your content more easily.

Be sure to use some other elements related to tables, such as table head, table footer, caption, etc. These will provide more context and improved usability for your users.

Charts

Charts are also a visual way of presenting your data. We recommend using third-party tools such as Highcharts because they provide multiple ways of interacting with their content.

Accessibility is very hard for visual formats, so it's good to rely on third-party tools that have already solved these problems in order to present your data.

Downloadable files

Downloadable files, such as PDFs and text documents, should have some accessibility considerations. 

Using clear language, structure, and headings is a good way to start making your documents accessible. There are many guides and online tools to help you do this.

Use accessible content for social media too

The rules around good structure and plain language also apply when it comes to your social media content. But there are other things to consider too.

Alt text for social media

Twitter recently enabled alt text for images, but always check that the platform (or social media planning tool) you’re using supports this and other key accessibility features.

Where things like alt text cannot be provided, add captions and transcripts to the body of your post, or in follow-up comments.  

Emoji  

Take particular care when using emoji. Speech-to-text devices read out every character, so avoid those with long names (we’re looking at you, ‘smiling cat face with heart eyes’). 

Use emoji sparingly and avoid repeating them. Consider how annoying ‘red heart, red heart, red heart’ might be for a screen reader user.

Hashtags

Hashtags are all one word. There are no spaces or hyphens to break up words, so we need to help screen readers understand how to read this content.

Use capital letters at the start of new words for screen readers. This makes your hashtags easier for sighted users to read and understand as well.

As an example, the hashtag #greatcxforall works far better for social media users if it’s changed to #GreatCXForAll.

Checking your content for accessibility

Don’t miss our guide to accessibility audits if you’re looking for some simple ways to check the accessibility of your content.

Here are some other pointers:

  • Browse using only the keyboard. Use the tab key to navigate around the page and look out for missing elements, for example buttons and links. You should also see a clear focus style around each element that is currently in focus.
  • See your content differently. Play around with your monitor and browser's display settings, or use a helper plug-in to simulate vision impairments. Can you still read your content when the contrast is reduced, or when you zoom in or out?
  • Listen to your content. Does your content make sense when you read it out loud? Put on your best audiobook voice and try to imagine what it would be like for someone to hear your content instead of reading it.
  • Scrutinise! Go through your content with a fine-tooth comb to look for unexplained acronyms, unnecessary jargon, or cultural references that not all users will understand.

Accessible content: key takeaways

Accessible content is the cornerstone of an accessible site. It benefits all your users alike, improves your SEO, and makes it easier for people to buy your products, understand your content, or enlist your services.

Here are some of the key things to remember:

  • Give content meaning by using semantic HTML.
  • Optimise navigation to help users find the right information.
  • Structure your content well and use a good heading hierarchy.
  • Ensure content is understandable through your language and styling.
  • Accessible content principles are common sense. But they take some practice.
  • Share these approaches in your organisations to help foster a culture of accessibility.

Get the full CXcon playlist on demand via our YouTube channel, and do check out our digital accessibility report and web accessibility design and consulting pages to help kickstart your accessibility journey.