Accessibility tips

Why a heading structure is important

Hi, everyone. Today we’re covering headings. Headings help everyone consume your content. Visual users and screen reader users scan headings to find what they’re looking for. On top of that, most screen reader users also use headings to navigate web pages. So your heading structure is important to help all your users quickly understand what your content is about, how it’s organised, and find the information they’re looking for.

In this video, we’ll start with learning what a heading structure is. Next, we’ll go over tips for creating a heading structure. We’ll end by reviewing mistakes to avoid.

What a heading hierarchy is

Headings organise the content on a page. A heading hierarchy, or heading structure, is the flow of all the headings used to organise that content. Most heading structures should start with a heading 1 and only use one h1 on the page. From there, heading 2s organise the main points that go with the heading 1. Under h2s, heading 3s can organise main points that go with the h2 they’re underneath. There are heading 4s, 5s, and 6s. But most pages only use h1 through h3. More complex topics could benefit from additional heading levels though.

Heading structure example

Let’s review an example of this. Here’s a page about baking chocolate chip cookies. If I write out the heading hierarchy of this page, it’d be like this:

• the heading 1 is ‘Making chocolate chip cookies’ – this summarises all the content on the page
• next is the heading 2, ‘Recipe’.
• under ‘Recipe’, are 2 heading 3s, ‘Ingredients’ and ‘Instructions’.
• and lastly, there’s another heading 2, ‘Notes’.

Each heading describes the content beneath it, which makes it easier for a user to read and use the content.

Imagine this page had no h2s or h3s. The user then has to read the content to first make sense of what it is and where the different information is. Then they could actually use it to meet their goals.

With headings, users can go straight to scanning to meet their goals.

Tips for creating a heading structure

Now, let’s go over the tips for creating a heading structure.

Before you write your content, write out your heading structure. This should basically be an outline of what you’re writing since your headings would be key points you want to cover. Most likely, you’ll end up re-wording some headings and removing or adding some too, and that’s okay.

When writing your heading outline, here are questions to help you know when to make a new subheading.

First, is this a new idea or topic within the heading level above it? If so, is there enough content to support a new subheading? You usually want 1 to 3 paragraphs under a heading.

Second, does my previous heading have too much content? Should it be broken up into subheadings? You want to avoid walls of text. If there’s multiple topics in one section of text, a heading can be a great way to break up that wall.

And lastly, should this idea or topic stand out in the content? A heading can help emphasise content for visual and assistive technology users. When asking yourself these questions, you’ll come up with a heading structure that benefits users helping them scan and navigate pages, so they’re able to find what they need.

Accessibility mistakes to avoid

Let’s end with mistakes to avoid. These mistakes can make your heading structure inaccessible to screen reader users.

First, don’t use headings to create spacing on a page. This makes an empty heading. Empty headings don’t have any content in them. For visual users, it looks like a space. But since it still has the heading styling, screen reader users now have an empty heading added to their page structure when they navigate. This can be confusing and frustrating especially if there are a lot of them.

Next, make sure your headings follow a logical flow when descending heading levels. Basically, we don’t want to skip a heading level. For example, a logical flow is going from an h2 to an h3. A skipped heading is going from an h2 to h4. Going from h4 back to h2 is not a skipped heading.

Assistive technology announces the heading level, so a skipped heading can be confusing because it can make it seem like a heading and its content was missed.

Lastly, always use heading styling or the heading HTML tag to create headings. This adds HTML code that actually makes the heading a heading. When it has that code, assistive technology knows it’s a heading so screen reader users can access it using heading keyboard shortcuts and lists. If it just looks like a heading because it’s bolded and the text is larger, assistive technology won’t recognise it as a heading. It would just be more body text, so it wouldn’t be navigable using heading keyboard shortcuts or lists.

Now you know what a heading structure is, questions to help you create that heading structure, and mistakes to avoid. You’re ready to create better heading structures in your own content.

Images can serve many different purposes, from simple decoration to visuals of complex processes. Using them in your online learning content can be a great way to create visual representations of your subject matter.

An important consideration when inserting images into your content is how you’ll make them available to someone who is unable to see them.

When provided with a text representation of an image, many people with sight impairments have the ability to visualise the graphic.

A text representation of an image is another way to say an image is alternative text.

Many text editors provide a place for you to replace an image with alternative text. The image will remain visible in your content, but the text representation will be available to those who need it the most.

When it’s time to write alternative text, simply think about the context of the image within your content.

For example, consider this image of a beekeeper.

3 questions to consider are:

• Am I using this image basically as decoration?
• Is the image a visual example of something I described thoroughly in the typed content?
• Do I intend for the image to provide additional information to supplement a point I made in the content?

My approach to writing the alternative text will differ depending upon the context of how I use the image. Let’s take a closer look at each of these situations.

Here, the beekeeper image is just a decorative visual. I added it to the end of this document because I mentioned beekeeping as a hobby I’d like to explore. In this instance, the image doesn’t need much. If the decorative image were removed, the quality of the content won’t degrade. So the alternative text could simply be a couple of words to state what’s in the image. I think ‘Beekeeper collecting wax from a hive’ will suffice.

When a vision-impaired learner hears this alternative text, it will be clear that there’s no important learning content to be gleaned from the image.

Let’s take a look at the images on this page.

Leading up to these images, the topic has been an overview of precautions to take while beekeeping, and in the previous paragraph I talked about what should be worn for safety when working around the hives.

These 2 images are examples of safety clothing. They are visual examples of something I described thoroughly in the previous content. So each of their alternative text will represent an overview of what is seen in the pictures.

For example, to address the first image, I could type, ‘Beekeeper wearing a hat and veil, a one-piece long-sleeved jumpsuit and plastic gloves.’

For the second image, I could type, ‘Beekeeper wearing hat and screen, a one-piece long-sleeved jumpsuit and plastic gloves.’

Let’s see if we can apply what we’ve learned so far.

Here I’ve displayed an image of Nikola Tesla near a list of a few of his inventions. Would this be considered a decorative image or an example image?

To answer that, remember to think about the context of the image. In this case, if I removed the image of Mr. Tesla, the content would not suffer. So this is a decorative image. For its alternative text I would type ‘Nikola Tesla.’

Let’s change the context so that the image is an example of one of Mr. Tesla’s inventions.

Because it is now an example, we’ll type as our alternative text an overview of what’s seen in the image, ‘A Tesla coil expending electrical current.’

Finally, there may be times when you’ll need an image to supplement your content. Its purpose will be to accompany a point made in the content and to provide additional information.

Let’s return to the image of the beekeeper collecting wax.

Let’s say that the topic of this lecture is a discussion on beehive management. I’m using this image because it helps students visualise a point I made about the number of beehives that can be economically viable in one location.

The context of this image is neither a decoration, nor an example. In this context, it is some of the content, so it will require a longer description so my students can learn what I intend for them to learn from it.

The long description should be a part of the lecture content, so all of the students can benefit from it. So I’ll type it near the image.

Here’s another example of an image requiring a long description because it is content. The image demonstrates the life cycle of a deer tick as it depends on the life cycle of the white footed mouse. So I wrote a long description of the process under the image.

Images that you’ve written a long description for will still need an alternative text.

We’ll treat the alternative text for this life cycle image as we would an example image. I’ll type, ‘Parasitic life cycle of the deer tick as it relies on the life cycle of the white footed mouse.’

Deciding to use images is a great way to help students visualise your content.

Alternative text is required for all images and a long description should be provided when the context of the image requires it.

Let’s go over 10 ways to make videos more accessible. 

Did you know over 3.7 million videos are uploaded to YouTube alone every day? That’s a lot of videos and unfortunately many of them are not accessible to me as a blind person.

But video accessibility is not just for people who are blind but for people who are deaf or dyslexic or somebody who has seizures, and really accessibility is for everybody.

I’m Carrie on Accessibility and I talk about technology and accessibility. If you’re interested in that type of video, hit the ‘Subscribe button’ and the bell so you can stay up to date on all the latest videos. Before we go on, this video has been brought to you by the Carry On Accessibility YouTube and Patreon members.

Whether you’re a business, organisation, creator or just a friend who wants to make a video, keep these 10 things in mind.

Number 1: describe what’s going on in a video

This is usually called audio description. So if your cat jumps down or if there’s a product that’s showing up on screen describe what’s going on so that somebody who’s totally blind can understand the video.

Typically when people think of audio description they think of different shows that have a separate track, “Pointy-eared children play a game.” Like different streaming services Netflix, Hulu, Disney+, Amazon, Prime Video, they have audio description that you can turn on and off. But it doesn’t have to be that complicated.

Imagine it was a podcast and people are listening and they don’t have access to the video. Do they have enough information to understand what’s going on? That’s the important part. If you’re a business and organisation who serves the blind community, be sure not to create or share videos like this cooking video that only has music in the background.

Number 2: add captions

This is extremely important for somebody who is deaf. It’s also important for people who may not be familiar with the language, or may have trouble processing audio, and it’s a lot easier for them to read. 

Be careful with automatic captions because they are not enough. They get things very wrong. If you are familiar with dictation and all the mistakes it can make, that’s what auto-captions can do and sometimes it can be even worse. It also does not add punctuation. 

Most platforms allow you to manually type your captions but you don’t have to do this; some of them autogenerate and then you can just make sure to edit it. You can also hire a captioning service, like rev.com or there’s many other captioning services out there. Or you can even use AI, like Whisper. While you still need to go back and edit it, it’s going to be so much better than auto-captions.

Number 3: provide transcripts

This goes hand in hand with captions. Some platforms already have that built in, but especially if you’re a business or educational organisation, sometimes people process text better than audio or video. And sometimes people who use Braille displays or who are deafblind, it’s easier to use a transcript. And it can be more accessible than close captions. Sometimes a screen reader can’t read that.

Number 4: reduce of remove flashing or flickering

Reduce or remove flashing or flickering especially no more than 3 per second, because this can cause seizures. 

I think a lot of people know that this can cause seizures, but another reason why you should reduce flashing and flickering is for people with low vision or who are light sensitive. This can cause a lot of glare on our eyes and it’s really uncomfortable and can cause eye strain and eye pain.

Number 5: ensure that the video has clear audio

That includes making sure that there’s not too too much background music or background sounds. Making sure your environment is conducive for people to understand what you’re saying and what your message is.

But also make sure that your microphone and your equipment have good enough clarity so that your voice can really be understood. This can also include how you speak. Don’t talk too fast because sometimes that can be hard to understand. This is really important for people who are hearing impaired and people who rely on the audio instead of the video. 

Additionally, if someone’s using an interpreter, this makes their experience much better.

Number 6: give viewers enough time to view content

If you want to show something that’s on your computer or some b-roll, don’t make it too fast. You want to give users enough time to look at it, or at the very least pause the video so that they can take a longer closer look at what whatever it is that you’re showing. And also if somebody’s blind, they can pause and take a screenshot and send that to a friend or an AI so they can have more information about it.

This can be a real struggle when people just put something on the screen for like less than a second. It just flashes on the screen. And I have to rewind, and try to pause right on the specific time so that I can see and read what’s on the screen. That’s just really hard and not a great experience.

Number 7: double check your lighting and contrast

Really dark scenes can be challenging for somebody with low vision to see and interpret visually. And if you have titles on the screen, make sure that whatever colour you’re using has enough contrast.

If the background on the video changes a lot put a background behind the title so that there’s enough contrast for users and viewers to read.

Number 8: choose easy to read fonts

I know that elaborate, pretty, cursive fonts are really nice but they are really hard to read and take a long time to try to understand. The easiest fonts to read are Sans Serifs, so things like Ariel and Tahoma and Verdana. Those are some of the easiest fonts to read.

Number 9: add chapters and sections to your videos

This is a great idea for everybody. It’s helpful so that people can find what they need, what part of the video they need to be in and if they need to go back they know how to do that. It helps people find things in your videos faster and it can reduce cognitive load. It just makes the whole user experience much better and more accessible.

Number 10: use an accessible video player and platform

For things like YouTube and Instagram and Facebook, you don’t have much control over that, but if you have a website and you’re uploading content, make sure that you’re using a player that has labeled controls for screen readers and that are accessible through keyboard and can be accessed through people using voice access technology. 

You can implement everything else that I said in this video, like audio description and captions and transcripts, but if somebody using assistive technology can’t control the video, that is a really big blocker. And it could prevent them from even watching the video.

So those are 10 ways to make videos more accessible. If you like this video and you thought it brought value, hit that like button and don’t forget to subscribe. If you think I missed something and if you wanted to add something leave those in the comments. I’d love to hear from you.  

If you want to support this channel and what I do, please consider becoming a CoA member on YouTube or Patreon. That’s it for now, thank you for watching and I’ll see you in the next one.

Screen reader users often navigate a page or document using links. The screen reader will read out the links on the page, but not the text surrounding it. This means the link text needs to clearly say where the link is going, rather than just saying ‘click here’, which means nothing to the user.

You can see some examples here which have lots of ‘click here’ links which will need to be replaced as they don’t make sense on their own.

In this example, rather than linking the words ‘click here’, we’ve linked the words ‘tips for managing anxiety’. That clearly tells the user where they are going.

In the second example, we’ve highlighted the keywords which is ‘Joe Wicks’ PE at home videos’, which is clear enough. 

In the third example, rather than ‘watch it here’, which for someone using a screen reader they don’t know what they’re watching, we’ve highlighted ‘Electric Umbrella have an online TV show’. 

In the third example, instead of ‘ideas here’, we’ve highlighted what the ideas are. So, ‘arts and crafts to do if you’re blind or partially sighted’. 

In the final sentence, we’ve linked the words ‘contact us’ so again if anyone using a screen reader clicks on that link, they know they are going to a contact page.

Most writers know the value of clear and concise writing. But why is it especially important for accessibility?

For some readers, such as those with cognitive or visual impairments, clear and concise writing makes an even bigger difference: dense text, acronyms, jargon, and metaphors can make documents and interfaces especially difficult to read.

For example, in an online recipe, spelling out “ounces” and “tablespoons” is one way to make the recipe easier to read and more screen reader-friendly.

Let’s look at some other ways to make text clear and concise.

What if you came across an online recipe with this introductory sentence? “One of many delicious lunch recipes to keep in your back pocket for an al fresco meal is this option that can be made ready ASAP: the Greek salad.”

Can you identify accessibility issues with this sentence? Pause the video and reflect.

The sentence is long and wordy, and the main point is at the very end. Here’s a version that’s clearer and more accessible: “A Greek salad is an easy and delicious lunch.” This version eliminates wordy phrases and passive voice, such as “one of many,” and “can be made ready.”

Also, the main point is first: “A Greek salad.” This way readers know immediately what you’re talking about.

Finally, this version doesn’t have metaphors or acronyms that could be difficult to localise or understand, such as “in your back pocket” and “ASAP.”

In a product interface, here’s an example of text that could be challenging: “Encryption cannot be performed because the primary key version for the key has been destroyed. Create a new key version and make it primary to encrypt the data.”

There are several reasons this text could be challenging for a reader with a cognitive impairment or for a screen reader user.

How would you make this text clearer and simpler? Pause the video here to reflect.

Here’s a more accessible version. “To encrypt data with this key, create a new version and make it primary.”

In this revised sentence, we:

• eliminated repetition
• removed unnecessary complexity
• placed the objective first
• changed passive voice to active voice

In addition to making content more accessible, clarity makes content easier to internationalise and localise. Clear, simple text lets your audience focus on learning, rather than deciphering what you’re trying to say.

This guideline applies to all writing, but it’s particularly important for accessibility.

Visit goo.gle/accessible-content to learn more about this and other accessibility writing tips.