GatherContent is becoming Content Workflow by Bynder. Read More

Increasing your audience with inclusive content

Increasing your audience with inclusive content

7 minute read

Increasing your audience with inclusive content

7 minute read

Increasing your audience with inclusive content

Laura Kalbag

Designer and author

Table of contents

1.
2.
3.
4.
5.
6.
7.
8.

When we make a website inclusive, we try to make it accessible to as many people as possible. Inclusivity could range from making a site usable by someone who has an old computer and a legacy web browser, or making a site usable by someone who is blind and uses assistive technology to access your content. Inclusive design is making our sites work for people in a variety of environments with a variety of needs.Inclusive design for content often requires creating content for needs that are not necessarily the same as our own. In order to understand other people’s needs, we need to research and test our content with a diverse audience. This audience may not reflect who you consider to be your “typical audience,” as your existing audience may be limited to people who are already able to access your content, and may exclude people who have not been able to access your content up until this point as they have needs you have not previously considered.

More than HTML and colour palettes

Often when the web community talks about making a site accessible, we discuss well-written HTML, or a good contrast between the text colour and background colour. These techniques are incredibly valuable, but unless the content itself is accessible, nothing is accessible.

An example of this is when I wrote my book, Accessibility For Everyone. In a section about colour blindness, I included a series of images to illustrate different forms of colour blindness. When I created these images, I didn’t think about how they would appear on one of the most popular reading devices: an e-reader. With a basic e-reader device, such as Kindle or Kobo, all content is rendered in greyscale, so all of the comparison images appear to be exactly the same.

The e-reader shows the comparison images all in greyscale, so they are indistinguishable from one another
Left, images from my book comparing how an image might be perceived by different forms of colour blindness, shown on a Kobo e-reader (photo courtesy of Vasilis Van Gemert.) Right: the same page of the book in the ebook PDF, in full colour and presented exactly as originally designed.

Fortunately I did not rely on the images alone to describe the differences between different forms of colour blindness, such as deuteranopia, protanopia, tritanopia, or monochromacy. But without colour, the benefit of the example images is lost.

What makes accessible content?

There are four broad parameters we must consider when making our content accessible:1. Make it easy to see, accommodate visual needs.2. Make it easy to hear, accommodate auditory needs.3. Make it easy to interact, accommodate motor needs.4. Make it easy to understand, accommodate cognitive needs.

How to make inclusive content

When creating inclusive content, the aim is to make all of our content accessible to as many people as possible. Sometimes this is not possible with one format of content because people have specific needs that mean they cannot access that particular format. For example, people who are blind, or have impaired vision, cannot access video as easily as others. When people cannot access a particular content format, we can make it accessible by providing an alternative.You may already be planning, writing, and creating inclusive content because many of the considerations you use to make your content readable and usable are the same. Below I’ve included some starting points to start thinking about content in a more inclusive way.

Use plain language

Plain language benefits everybody from people with dyslexia to non-native speakers. Writing sentences that are short and easy to read makes text less intimidating and easier to skim. The audience for your content may dictate the technicality of your language, but generally, avoiding jargon and complex metaphors will make content more welcoming to people who are new to an industry.If you use acronyms, explain their meaning alongside the first use. CEO (Chief Executive Officer) may seem like a common term, but is also the acronym for the Catholic Education Office and the Center for Earth Observation. Quite different areas! Using simple language and explaining context also ensures that when someone runs your text through a translation extension, it is more likely to translate into something meaningful.

Give your content a clear hierarchy and structure

We all like to think that readers will pore over every word we’ve written, perhaps with a dictionary to hand, to make sure they truly understand what we’re saying. In reality, the content we write for the web is usually being consumed quickly, with people in a hurry or looking to pick out specific information. Even if they are not, we do not need to take up more of their time than necessary.A clear hierarchy and structure can make it easier for a reader to find the information they want. How we create a clear hierarchy depends on the context of our content, but ordering content with the most important information first, and using headings to segment and label longer lengths of text is generally beneficial. Headings can provide clear landmarks both visually and for assistive technology when used with the semantically corresponding HTML. Screen readers, a type of assistive technology that reads the content of the screen to the user, can read headings on a page outside of the context of the text, making navigating a page much easier.

Consider your link language

Links are key to web content as both vital calls to action, or references to other content. Descriptive linking, where a link describes its destination, is good practice so a reader knows where they will end up if they follow that link. “Older articles are here” is less descriptive than “Older articles are in our archive.”Screen readers can also read links on a page outside of the context of the text, as links are often important landmarks in page content. This makes it particularly vital that link text makes sense without the surrounding text. Without context, a list of links could sound like “here,” “here,” “click here,” giving the listener no idea of where those links might lead. “Older articles are in our blog archive” would give the listener a much better idea of where they might end up.

Alternative content

Alternative content formats benefit people who cannot access your primary content format, and also gives more options to people who may just prefer a different format.

Provide text alternatives

One of the simplest ways to meet a range of accessibility needs is to provide a text alternative to image, video, and audio content. The most basic example of this is alternative text for images. The alternative text is set by using the alt attribute in the image’s HTML, but you don’t need to touch any code or markup to provide an alt attribute. Most good content management systems provide a text entry field for alternative text when you are uploading an image.When alt text is provided for an image, it gives the browser a fallback in case the image can’t be seen. The image may not be seen because the site visitor is not sighted, or is partially-sighted, or it could be just that the image did not load. In the case of many email clients, emails require permission from the user before they load any images.Writing meaningful alt text is important. The image below contains a photo of my dog, but if I just used alt text to say “photo of my dog,” you’d miss out on why that photo is notable. If the image below didn’t load, but you saw the text “my dog lying on the bedroom floor with his whole body visible, but his head completely obscured under the bed,” then you’d understand why I included that image in the first place. (It’s because my dog looks silly!)

A do lays on the floor with its head hidden under the bed. Photograph.

We do not need to provide alt text for decorative images, so don’t worry about descriptions of stock photos of businesspeople in suits. Leaving the alt attribute empty for these images will mean no text is shown in place of the image, and screen readers will just ignore the image completely.A good place to hone your craft of alternative text, while also making your tweets more accessible, is on Twitter. In your Twitter account’s Accessibility settings, you can turn on the ‘Compose image descriptions’ option. Once enabled, every time you upload an image, you will be given the option to compose a description which will be used as alt text. Mastodon, the friendly Twitter alternative, includes the option to compose an image description by default.Text alternatives are also valuable for other visual content such as infographics and graphs. For visual content that displays data, it is useful to provide a copy of the data for any interested person, but a dump of data isn’t exactly the equivalent of an infographic or a graph. We choose to use infographics or graphs to tell a narrative, draw attention to patterns, and provide more insight than raw data alone. So when you’re planning text alternatives to infographics and panels consider providing a text form of that narrative, explaining what is notable and relevant about the patterns and visualisations conveyed in the visual form.

Create transcripts for video and audio content

Transcripts are long-form text representations of video and audio content. Transcripts can make audio content accessible to people who cannot hear the audio, and also provide a useful alternative for people who want to skim through the content to find the parts that interest them the most. An added bonus to transcripts is that they make video and audio content indexable and searchable by search engines.Some of the most beneficial transcripts I’ve seen have added additional formatting to give the text structure and hierarchy. Often video and audio features multiple speakers, such as in an interview format. Labelling different speakers in transcript text makes it clear who is speaking. This can even provide more clarity than audio where two speakers with similar voices can be easily confused.Transcripts can even go further by adding headings, and other hierarchy not present in the video or audio, to thematically segment the content. This structuring makes it even easier for readers to find any specific information, or even just to get a outline of the topical flow of a discussion.

Use captions or subtitles for video content

Subtitles are lines of text that are transcriptions or translations of the speech on screen. Closed captions are similar, but also include aural information such as sound or music that is not speech, but is relevant to the speech or its context, such as “[door slams].” Both captions and subtitles are useful as a text alternative to sound, and particularly useful to people who are hearing impaired or deaf.Captions and subtitles can be time-consuming to produce, especially compared to transcripts, because they are specifically timed to the video content. However there is free and open software, such as Jubler, that makes producing captions and subtitles reasonably inexpensive. An alternative to producing your own captions and subtitles is to rely on auto-captioning provided by some video platforms. But auto-captioning will never be the same quality as captions crafted with care and a knowledge of the subject matter.As someone with a fairly amateur workflow, but fast typing speed, I find it usually takes me three times as long to produce captions as the length of the video itself. The time investment is always worthwhile. For example, captions are increasingly used in social media, as videos usually play without sound by default. On a muted video, captions can intrigue a viewer and give them an idea of what the video is about without needing to enable the sound.

Good accessibility is good usability

Looking at the broad parameters I mentioned earlier, it should be clear that inclusive design is a team effort. Working together with designers and developers can ensure that the effort you put into your inclusive content is not negated by a typeface that makes your easy-to-understand text hard to read, or a video player that doesn’t support the captions you carefully crafted. Following up with other people in your team can also be a good way to spread the understanding of accessibility, and create a culture of inclusive design.Creating inclusive content may take a little more learning, and a little more time crafting, but the benefits are reaching a wide audience, and giving them a great experience. Everybody wins! And you don’t have to wait for your next project or article to create inclusive content. Why not start by reviewing your existing content, and seeing what small improvements could make a big difference? Your audience will thank you.

When we make a website inclusive, we try to make it accessible to as many people as possible. Inclusivity could range from making a site usable by someone who has an old computer and a legacy web browser, or making a site usable by someone who is blind and uses assistive technology to access your content. Inclusive design is making our sites work for people in a variety of environments with a variety of needs.Inclusive design for content often requires creating content for needs that are not necessarily the same as our own. In order to understand other people’s needs, we need to research and test our content with a diverse audience. This audience may not reflect who you consider to be your “typical audience,” as your existing audience may be limited to people who are already able to access your content, and may exclude people who have not been able to access your content up until this point as they have needs you have not previously considered.

More than HTML and colour palettes

Often when the web community talks about making a site accessible, we discuss well-written HTML, or a good contrast between the text colour and background colour. These techniques are incredibly valuable, but unless the content itself is accessible, nothing is accessible.

An example of this is when I wrote my book, Accessibility For Everyone. In a section about colour blindness, I included a series of images to illustrate different forms of colour blindness. When I created these images, I didn’t think about how they would appear on one of the most popular reading devices: an e-reader. With a basic e-reader device, such as Kindle or Kobo, all content is rendered in greyscale, so all of the comparison images appear to be exactly the same.

The e-reader shows the comparison images all in greyscale, so they are indistinguishable from one another
Left, images from my book comparing how an image might be perceived by different forms of colour blindness, shown on a Kobo e-reader (photo courtesy of Vasilis Van Gemert.) Right: the same page of the book in the ebook PDF, in full colour and presented exactly as originally designed.

Fortunately I did not rely on the images alone to describe the differences between different forms of colour blindness, such as deuteranopia, protanopia, tritanopia, or monochromacy. But without colour, the benefit of the example images is lost.

What makes accessible content?

There are four broad parameters we must consider when making our content accessible:1. Make it easy to see, accommodate visual needs.2. Make it easy to hear, accommodate auditory needs.3. Make it easy to interact, accommodate motor needs.4. Make it easy to understand, accommodate cognitive needs.

How to make inclusive content

When creating inclusive content, the aim is to make all of our content accessible to as many people as possible. Sometimes this is not possible with one format of content because people have specific needs that mean they cannot access that particular format. For example, people who are blind, or have impaired vision, cannot access video as easily as others. When people cannot access a particular content format, we can make it accessible by providing an alternative.You may already be planning, writing, and creating inclusive content because many of the considerations you use to make your content readable and usable are the same. Below I’ve included some starting points to start thinking about content in a more inclusive way.

Use plain language

Plain language benefits everybody from people with dyslexia to non-native speakers. Writing sentences that are short and easy to read makes text less intimidating and easier to skim. The audience for your content may dictate the technicality of your language, but generally, avoiding jargon and complex metaphors will make content more welcoming to people who are new to an industry.If you use acronyms, explain their meaning alongside the first use. CEO (Chief Executive Officer) may seem like a common term, but is also the acronym for the Catholic Education Office and the Center for Earth Observation. Quite different areas! Using simple language and explaining context also ensures that when someone runs your text through a translation extension, it is more likely to translate into something meaningful.

Give your content a clear hierarchy and structure

We all like to think that readers will pore over every word we’ve written, perhaps with a dictionary to hand, to make sure they truly understand what we’re saying. In reality, the content we write for the web is usually being consumed quickly, with people in a hurry or looking to pick out specific information. Even if they are not, we do not need to take up more of their time than necessary.A clear hierarchy and structure can make it easier for a reader to find the information they want. How we create a clear hierarchy depends on the context of our content, but ordering content with the most important information first, and using headings to segment and label longer lengths of text is generally beneficial. Headings can provide clear landmarks both visually and for assistive technology when used with the semantically corresponding HTML. Screen readers, a type of assistive technology that reads the content of the screen to the user, can read headings on a page outside of the context of the text, making navigating a page much easier.

Consider your link language

Links are key to web content as both vital calls to action, or references to other content. Descriptive linking, where a link describes its destination, is good practice so a reader knows where they will end up if they follow that link. “Older articles are here” is less descriptive than “Older articles are in our archive.”Screen readers can also read links on a page outside of the context of the text, as links are often important landmarks in page content. This makes it particularly vital that link text makes sense without the surrounding text. Without context, a list of links could sound like “here,” “here,” “click here,” giving the listener no idea of where those links might lead. “Older articles are in our blog archive” would give the listener a much better idea of where they might end up.

Alternative content

Alternative content formats benefit people who cannot access your primary content format, and also gives more options to people who may just prefer a different format.

Provide text alternatives

One of the simplest ways to meet a range of accessibility needs is to provide a text alternative to image, video, and audio content. The most basic example of this is alternative text for images. The alternative text is set by using the alt attribute in the image’s HTML, but you don’t need to touch any code or markup to provide an alt attribute. Most good content management systems provide a text entry field for alternative text when you are uploading an image.When alt text is provided for an image, it gives the browser a fallback in case the image can’t be seen. The image may not be seen because the site visitor is not sighted, or is partially-sighted, or it could be just that the image did not load. In the case of many email clients, emails require permission from the user before they load any images.Writing meaningful alt text is important. The image below contains a photo of my dog, but if I just used alt text to say “photo of my dog,” you’d miss out on why that photo is notable. If the image below didn’t load, but you saw the text “my dog lying on the bedroom floor with his whole body visible, but his head completely obscured under the bed,” then you’d understand why I included that image in the first place. (It’s because my dog looks silly!)

A do lays on the floor with its head hidden under the bed. Photograph.

We do not need to provide alt text for decorative images, so don’t worry about descriptions of stock photos of businesspeople in suits. Leaving the alt attribute empty for these images will mean no text is shown in place of the image, and screen readers will just ignore the image completely.A good place to hone your craft of alternative text, while also making your tweets more accessible, is on Twitter. In your Twitter account’s Accessibility settings, you can turn on the ‘Compose image descriptions’ option. Once enabled, every time you upload an image, you will be given the option to compose a description which will be used as alt text. Mastodon, the friendly Twitter alternative, includes the option to compose an image description by default.Text alternatives are also valuable for other visual content such as infographics and graphs. For visual content that displays data, it is useful to provide a copy of the data for any interested person, but a dump of data isn’t exactly the equivalent of an infographic or a graph. We choose to use infographics or graphs to tell a narrative, draw attention to patterns, and provide more insight than raw data alone. So when you’re planning text alternatives to infographics and panels consider providing a text form of that narrative, explaining what is notable and relevant about the patterns and visualisations conveyed in the visual form.

Create transcripts for video and audio content

Transcripts are long-form text representations of video and audio content. Transcripts can make audio content accessible to people who cannot hear the audio, and also provide a useful alternative for people who want to skim through the content to find the parts that interest them the most. An added bonus to transcripts is that they make video and audio content indexable and searchable by search engines.Some of the most beneficial transcripts I’ve seen have added additional formatting to give the text structure and hierarchy. Often video and audio features multiple speakers, such as in an interview format. Labelling different speakers in transcript text makes it clear who is speaking. This can even provide more clarity than audio where two speakers with similar voices can be easily confused.Transcripts can even go further by adding headings, and other hierarchy not present in the video or audio, to thematically segment the content. This structuring makes it even easier for readers to find any specific information, or even just to get a outline of the topical flow of a discussion.

Use captions or subtitles for video content

Subtitles are lines of text that are transcriptions or translations of the speech on screen. Closed captions are similar, but also include aural information such as sound or music that is not speech, but is relevant to the speech or its context, such as “[door slams].” Both captions and subtitles are useful as a text alternative to sound, and particularly useful to people who are hearing impaired or deaf.Captions and subtitles can be time-consuming to produce, especially compared to transcripts, because they are specifically timed to the video content. However there is free and open software, such as Jubler, that makes producing captions and subtitles reasonably inexpensive. An alternative to producing your own captions and subtitles is to rely on auto-captioning provided by some video platforms. But auto-captioning will never be the same quality as captions crafted with care and a knowledge of the subject matter.As someone with a fairly amateur workflow, but fast typing speed, I find it usually takes me three times as long to produce captions as the length of the video itself. The time investment is always worthwhile. For example, captions are increasingly used in social media, as videos usually play without sound by default. On a muted video, captions can intrigue a viewer and give them an idea of what the video is about without needing to enable the sound.

Good accessibility is good usability

Looking at the broad parameters I mentioned earlier, it should be clear that inclusive design is a team effort. Working together with designers and developers can ensure that the effort you put into your inclusive content is not negated by a typeface that makes your easy-to-understand text hard to read, or a video player that doesn’t support the captions you carefully crafted. Following up with other people in your team can also be a good way to spread the understanding of accessibility, and create a culture of inclusive design.Creating inclusive content may take a little more learning, and a little more time crafting, but the benefits are reaching a wide audience, and giving them a great experience. Everybody wins! And you don’t have to wait for your next project or article to create inclusive content. Why not start by reviewing your existing content, and seeing what small improvements could make a big difference? Your audience will thank you.


Ready to get started?
Start your free trial now
Start free trialBook a demo
No items found.
laura

About the author

Laura Kalbag

Laura Kalbag is a designer from the UK, and author of Accessibility For Everyone from A Book Apart. She’s one third of Ind.ie, a tiny two-person-and-one-husky social enterprise working for social justice in the digital age. At Ind.ie, Laura follows the Ethical Design Manifesto, and works on a web privacy tool called Better.

Related posts you might like