Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Creating Accessible Content for Everyone

Developers, Partners
Josefine Schaefer
Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

Making our content as accessible as possible not only opens it up to a larger audience and if you want to make a business case, potential new customers. It also shows your consideration for diverse user needs and improves search engine optimisation and overall user experience. 

Section titled How do you make your content more accessible?  How do you make your content more accessible? 

You have never thought about the accessibility of your content? Not to worry, you might already be doing a lot of things right without even knowing it. We will explore what it means to make content more accessible one by one, as there are many different layers and aspects, depending on the different kinds of content. 

Section titled Why should you make your content more accessible?  Why should you make your content more accessible? 

There are many good reasons to make your content more accessible:

  • Broaden your reach: Assuming you would like to reach a wide audience, the more accessible your content is, the more folks will be able to find and enjoy it. According to a survey by the World Health Organization, over 15% of the global population will experience some form of disability throughout their lifetime - and that’s roughly one billion people, and already a very good reason to consider accessibility.
  • Web Accessibility benefits all: Going a step further and approach disability rather as a spectrum, the amount of people affected by making our content more accessible gets even larger. Making content accessible actually benefits all of us: there are many situations in which we might have temporary limitations, such as a bad internet connection, maybe we can only use one hand to navigate a page, or being in an environment where we can’t turn up the volume or have a bad ear infection. Many cases in which making content accessible will massively enhance the user experience.
  • Search Engine Optimisation: as a positive side effect, many practices of accessibility will improve your SEO score. Win-win-win, right?!
  • Accessibility Guidelines & Laws: Depending on the market that you are trying to reach, there might even be legal consequences for creating inaccessible experiences on the web. 

Section titled POUR Principles  POUR Principles 

There are 4 guiding principles to keep in mind when trying to make content more accessible. You want your content to be: 

  • Perceivable
  • Operable
  • Understandable
  • Robust

While this might sound abstract at first, let’s explore each of these principles in a little more depth: 

Section titled Perceivable Perceivable

Information and your user interface should be presented in ways that the users can perceive, regardless of how they consume it. One example of this is alternative text. By adding alternative text to non-text content, like images, users can convert these images to speech, simpler language, or braille, for example. 

Section titled Operable Operable

Not everyone uses a trackpad or mouse - some users rely on assistive tech or the keyboard. Therefore it’s important that your content can be navigated with a keyboard and there are no actions that people require to use a mouse for. 

Section titled Understandable Understandable

Your interface should be understandable. This can for example mean including labels and instructions where needed. 

Section titled Robust Robust

Content should be robust enough to be interpreted by a variety of user agents, including assistive technologies. 

Let’s look at different kinds of content…

Section titled Making All Content Inclusive Making All Content Inclusive

Section titled Written Content  Written Content 

Section titled Headline Hierarchies Headline Hierarchies

Use the different headline hierarchies (h1-h6) wisely: use them in a logical order to structure your content. Screen reader users will browse through the headlines to decide what kind of content is relevant for them - so be clear and concise, don’t skip any of the levels, and do not use more than one h1. This also helps with SEO as search engine crawlers work very similarly to a screen reader.  

It might seem practical and more casual to link “click here” when referencing a specific link but imagine your screen reader reading out only these kinds of instructions - when browsing through the links, you would never know where your desired content was. 

Section titled Labels on User Input Labels on User Input

If any actions are required by users, make sure you include instructions, if applicable helpful error messages and labels. Consider that not all users will be able to see for example a (complex) form - but it should still be possible for them to fill it out or read it’s contents. 

Section titled Visual Content & Video  Visual Content & Video 

Section titled Alternative Texts Alternative Texts

As mentioned before, we need to provide alternatives to visual content so that it can be converted to other forms of information. Make sure these alternative texts convey the important information without being too wordy - put yourself in your user's shoes: what do they need to know? What did you want to bring across with this visual? Is it only decorative? Then you can leave the alternative text empty. 

Section titled Transcripts & Audio Descriptions Transcripts & Audio Descriptions

If you have pre-recorded videos as part of your content, you might want to consider an audio description. This is especially important if there is a lot of information that is not conveyed in the audio track of the video. 

Transcripts are written versions of the audio content of your podcast or video. This is super helpful for folks who might use a Braille device to consume this kind of content or read rather than listen to it.

Section titled Accessible Infographics & Data Visualizations  Accessible Infographics & Data Visualizations 

Making infographics and data visualizations accessible is crucial to make sure the information you are presenting can be understood by a diverse audience. Some guidelines for making educational and informative content more inclusive, are: 

  • Make sure to include sufficient readable and meaningful labels - this includes working with accessible fonts and big enough sizes, making sure it’s zoomable and has enough color contrast. 
  • Sufficient Color Contrast is a big topic in general: this does not only go for the contrast on text vs. background but also differentiates between the different objects. if the colors are too similar, it will be difficult to see what you are referring to. 
  • Don’t use color as your only indicator: people see colors differently, and some might not perceive them at all. That’s why it’s a good idea to either label directly, include patterns, or another way of distinguishing other than colors. 
  • Where applicable, add alternative texts. You could also consider including descriptions for your charts. 
  • Don’t overwhelm your audience with information: Regardless of ability, with visualizations, less is most likely more. 

Section titled Social Content Social Content

Unfortunately, most of our current social networks are not fully accessible. But there are things you can do to make at least your content more inclusive - even if you can’t fix the whole problem. Basically, most rules that can be applied to web content also apply to social content. This is true for adding captions to video, including alternatives to visual content, using high contrast, and making sure information is conveyed through different means. A few things might be slightly specific to social media though: 

Section titled Alternative Text  Alternative Text 

A good place to start is again alternative text, which you can add to your images. As an added bonus, for example on Twitter, images with an alternative Text have a little “alt” tag, which raises awareness for folks who didn’t know this was important.  

Image of flower bouquet about to be published on Instagram

Adding Alternative Text on Instagram Desktop

LinkedIn post draft with flower bouquet image

Adding Alternative Text on LinkedIn

Image of flower bouquet about to be published on Twitter

Adding Alternative Text on Twitter

Section titled Hashtags Hashtags

If you are using hashtags, make sure they are descriptive - this way, they provide context to users, especially those who might lack the visual aspects of your content. If you use camelCase or PascalCase instead of all lower letters in a hashtag, it will be easier to pronounce for screen readers. 

Section titled Avoid Excessive Use of Emojis Avoid Excessive Use of Emojis

While emojis can add personality and fun to your posts, using too many of them can be confusing for screen reader users. If you use emojis, ensure that they enhance the meaning of your content.

Emojis are represented by a Unicode string, a little like alternative text. If you are curious, about what Emojis sound like when read out by a screen reader, check out this video by the amazing Molly Burke: 

Section titled Tips for using Emojis Tips for using Emojis

  • You can use Emojis but don’t use them to replace meaning. If you are conveying that something is ironic or conveys a certain emotion, make sure there are other unambiguous ways of understanding this context. 
  • Don’t overdo it: imagine, every single time you use an emoji, the description is read out. That can become very verbose if you are using the emoji in question not once but 6 times to make sure people really get you
  • Test visibility on light and dark mode: Some emojis, like the white heart ( 🤍 ) will be really difficult to see on a light background, others, like for example the dark moon ( 🌚 ), will be difficult to read on a darker background
  • Stay away from emoticons (e.g. : ) ) - it will read out: “colon parentheses”, which will be really difficult to decipher as a smiley face.

Section titled Beyond the Web: Accessible Presentations Beyond the Web: Accessible Presentations

Consider a diverse audience when planning the content of your presentation and rehearsing it. Again, much of what is also applied to other kinds of content is applicable here: Color Contrast, captions for video, Accessible fonts, and sufficient font size - all your “Accessibility Basics”, if you will. But there are a few things that might differ slightly, or are more important when it comes to accessible presentations: 

  • Consider sharing your slides with your audience, for example via a QR code on your first slide - this way, they can move through it at their own pace, zoom in, and use a screen reader, braille device, or any other form of assistive technology. 
  • Stay away from flashy effects and transitions. They distract the audience from your key points during the presentation and might be really uncomfortable for some. 
  • Inclusive language: When rehearsing, think about the words you use to explain your topic. Are you including everyone in the way you speak about certain things? Are you maybe using phrases that could be adjusted? Are you describing visuals - or are you assuming everyone can see them clearly? Can you make a point of breaking down complex or abstract topics so that they are easier to understand for your audience?
  • Ensure the question and answer period is accessible. If there is a microphone for questioners, make sure they use it. Otherwise, repeat the questions so everyone can hear them - this is also crucial if you are presenting in a hybrid format, as sometimes the mic for questions isn’t used for the stream. 
  • This is very general advice, but slides are easier to comprehend if not too much is going on there - try to stick to one point and visual per slide. If you can’t limit yourself, make sure to highlight the point you want your audience to focus on, for example by making it larger or through arrows. 

Tipp:

Powerpoint even has an Accessibility Checker which can help you review the accessibility of your slides and adjust accordingly. 


Powerpoint Accessibility Checker Tool

Powerpoint Accessibility Checker Tool

Section titled Conclusion Conclusion

(Digital) content is everywhere - which is why it’s all the more important to make sure it is inclusive to a diverse audience. Whether it's ensuring web content meets WCAG guidelines, captioning videos for broader comprehension, or structuring presentations with screen reader users in mind, the possibilities are as vast as the impact.

As content creators, it’s within our power to lower the threshold and open our content up to a wider audience - one step at a time. 

Considering Web Accessibility can be overwhelming - especially upon first learning about it, but don’t worry: small steps already have a big impact, and it’s better to get started than wait for perfection.