Headings help with general navigation and are a key component in creating accessible documents. Those who use screen readers commonly search and navigate a document based on its heading structure.
Headings that are created by simply enlarging words and making them a different color do not actually make them structurally a heading. So make sure you are using styles that are built into Microsoft word.
There are of course some quick rules for using headings:
Use at least one H1 – used as the title (The title style is not recognized by a screen reader!)
All H2’s should be subtopics to the main H1
Headings should not skip order. There should not be an H4 without an H3 first
Think of headings like using and building an outline.
Video Overview of how to apply headings to a Microsoft word document
Need more Video walkthroughs? Check out The Accessibility Guy YouTube channel
Headings Navigation
When I start to apply headings to a document I always like to start by opening the navigation pane and then selecting the headings tab. On windows, this can be opened by pressing CNTRL + F on the keyboard.
The image above is a great example of how to use headings to build an outline for all of your content.
Text Overview on how to apply headings to a Microsoft word document
Select some text
Choose a style from the quick styles menu from the home tab
Go through the rest of the document and apply the styles throughout!
Need to learn the next steps in making your word document accessible?
Did you know you can change the way that your headings look in Microsoft word? The default heading colors might not be ideal for your project. Typically, when you apply a heading, it will format the text to the default template within Microsoft Word.
So if you want to change the default blue font – check out the content below!
Video overview of how to change the way headings look in Microsoft word
Text overview of how to change the way headings look in Microsoft word
Step 1
Format some text the way you want it to look with a font, color, and font size.
Step 2
Right-click the quick styles menu and select Update to Match Selection
This will change every Heading 2 throughout your document to match the same formatting.
Make sure the color you pick passes color contrast requirements!
Don’t want to worry about making your documents accessible? I can do it for you!
Headings are often used as the sole method for navigation for those using a screen reader or other assistive technology. It allows technology to navigate more effectively and serves as a method for jumping around text to get to the exact spot needed.
The screen reader allows you to drill down from higher heading to lower heading. This means you can list all heading level 3s under a specific heading level 2 for more precision. One suggestion is if you provide an action item in the text page, provide a heading over that, so the student can skim directly to the homework, additional reading, etc. A well-aligned page should have headings with an appropriate level of complexity:
Heading Level 1 is the title of the page, placed by Canvas, you will always have this. If the page is noticeably short, less than 100 words, it can be left with no additional headings.
Heading Level 2 is the highest-level separations within the canvas shell and should be used to chunk major topics in material.
Heading Level 3 and lower should be used for text-heavy pages and should be used to give additional structure to the document.
The Heading levels should form a tree, where each heading is preceded by the level one above it.
What do headings look like using JAWS?
The heading structure in the image below is clear and easy to navigate. Each heading is descriptive and is in the proper order. For those who use JAWS, they are able to navigate this content with ease.
Example Canvas page with and without headings
The following image represents a canvas page that has both headings applied and not applied. Option 2 shows the correct version and clearly shows the benefits of applying headings to a page.
Things to consider with headings
Avoid using all capital letters, underlining, or bolding as the only means of emphasis.
Using a larger font or different color does not automatically indicate to a user that a page has headings. You must still mark headers using the rich content editor.
Headings must be in order.
Video overview on how to apply headings in Canvas
Instructional Guide – How to apply headings to a Canvas page
Step 1: Ensure you are in edit mode
Step 2: Select the text you would like to make a heading
Click and drag your mouse or click into the line
Step 3: Choose the heading level from the drop-down menu or the format tab. Option 1 as indicated below is the easiest.
This video will walk users through how to make a canvas page accessible. Ive got a even more content for Canvas Accessibility.
Transcript
Hi there, my name is Shawn Jordison. And this is going to be a video walkthrough for Canvas accessibility. The goal of this video is to walk you through the most commonly found accessibility elements that may exist on your pages. So I have a sample page here that has many accessibility errors in it. And what we’re going to do is simply walk through them and fix them. So to begin, let’s select the Edit button.
I like to design my accessibility starting from the very top of the page.
Going all the way down. I also like to start my content below h2. So I’m going to add in some text here, that’s called overview. I’m going to select this text, use the drop down arrow to make this a header to.
Now from here,
this paragraph looks fine. There’s no accessibility elements to address. I do have another area here that says where do I begin designing. This is also a paragraph. So what I’m going to do is make this content a Heading Two.
But we also want to turn off bolding and I actually want it to be lowercase.
So I’m just going to retype that and delete this text file. The reason we want it to be lowercase is because screen readers will often read acronyms letter by letter. And when it sees all capital letters, it could sometimes interpret that word to be an acronym.
Next up, we have a couple of dashes here. These should be built in bulleted list, because the order is not important. So I’m going to select these two items and select bullet lists from the rich content editor.
I’m going to come back through here and delete the dashes out
and move on to my next heading. The next heading is Is there enough time for my students. First I want to retype it.
To make sure we get rid of all that capitalization. Next, I want to remove the bolding on this text. So I’m going to select the text and select bold. I’m going to make this text a header three, as it relates to this heading to have Where do I begin designing.
And so let’s keep going here it looks like we have a little bit of misspellings.
Is there enough time. This is a part of this header down here. So this is also going to be a Heading Three. I’m then going to remove the bolding.
And then under design and develop, I’m also going to remove bolding and it’s actually already marked as a header for which is perfect. So let’s keep going. It looks like this was supposed to be a couple of list items that we tried to designate with axes.
But let’s make this an actual bulleted list, we can come back through, delete the text.
And then we have a new area that doesn’t really relate to any of our current heading structures. So I’m going to select the text and make it a heading to.
Now from here we have a built in list. And if you’re not used to doing this,
these list items might look correct. They are numbers, they clearly are meant to be in a list. But here’s the deal. It’s not actually a list within the structure of the HTML. So we need to select all of our texts, and then select numbered list.
And it puts in an actual list which we must come in here and actually remove these extra numbers.
And we can keep going.
So the essay writing process, this looks like it should be a heading. We’re gonna go ahead and make that a heading two.
And then again, we have another list. That should be a bulleted, excuse me, this should be a numbered list as it represents a sequence of steps.
All right, next up, we have a link. So here’s the Canvas guide for viewing my feedback in the gradebook. So first thing I’m going to do, I’m going to copy the hyperlink
with Ctrl C,
and I’m going to select feedback in the gradebook.
Then select Link to URL
and paste our link with Ctrl V.
Then we’re going to select Insert link, which now puts the link on these words. So I can enter this with a period, and delete the rest of this content. So using the Delete key on my keyboard, I’m removing this extra text
as we do not want extra hyperlinks, or for URLs on the page. Additionally, we want to avoid vague language, like the words here, so we need to fix these two links. First, let’s take a look at the sentence read about the role and structure of US courts and US supreme court procedures here in here.
So I’m going to add the word procedures.
And to get this link out, I’m going to select in the link with my mouse, I’m going to select the link to URL button. And from here, I’m going to copy the link out so I just did a ctrl c.
Now I’m going to select my text where I want to put the link, select the link to URL button Ctrl V to paste and select Insert link. Now we have one more to fix. I’m going to put my cursor in this link, select Link to URL, I’m going to simply copy the link out,
close the window
and add my link to this text on the page. By selecting the text select Link to URL pace.
And then insert link. Now I can delete all of this extra text.
And we have another link.
But the sentence doesn’t really support it. So we’re going to say
additional resources
about language and culture.
I’m going to select in this link. Select the link to URL button to copy my link out Ctrl C to copy this out.
And then I’m going to paste it on my newly created text and then select in certainly.
Now I could delete this extra text. All right, let’s see what else we have in this area. So we have a table that will need to address I’m going to leave the table.
And we’re going to use the check accessibility tool to fix this table.
With our image though, let’s select the image, select Embed Image. And this is where we can add alternate text
and select Update.
We have another table here. I’m also going to use the check accessibility tool. So let’s let’s go ahead and run that we’re going to run the check accessibility tool.
Adjacent links with the same URL should be a single link. Okay, that looks like
an actual error that can be fixed. So we’ll select Apply, we need to add a caption.
Oops.
I apparently cannot type today.
Oh my goodness. All right, we’re gonna put sample data. And then let’s select header row for our headers, select Apply.
And we have one more sample data for a caption and select Apply. Now what’s interesting, it didn’t catch these all caps. So I’m going to come in here and fix these.
And it’s a good reminder
that the accessibility checker is automated, and it doesn’t catch every error.
And all capitalization should be avoided if possible, unless you were working with an acronym.
Let’s go ahead and run that check accessibility tool once more. Perfect, no issues were found. Select Save.
We can quickly review and this page looks a lot better. We have clean links. We have clear tables. We have an image with alternate text. And this page is fully accessible. So you just learned how to make a Canvas page accessible. I hope this video walkthrough was useful for you
A heading is a style element that affects the structure of the content. Organizing a page by headings assists users with the orientation of the content and design. Typically, headings visually appear larger and more distinct than other text. Using headings and ensuring they are visually apparent is helpful for persons with all disabilities.
A heading is a style element that affects the structure of the content. Organizing a page by headings assists users with the orientation of the content and design. Typically, headings visually appear larger and more distinct than other text. Using headings and ensuring they are visually apparent is helpful for persons with all disabilities.
If the underlying code for the headings of a page is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to the desired heading to begin reading at that point. For example, screen reader users can use headings to ignore the repeated blocks of content like headers, menus, and sidebars.
This is just too complicated. Can you do document remediation for me? How do I get a quote?
Most everyone
Code example
The image below shares a few examples of formatting text differently. There is plain text on the left, and then the HTML is shown on the right. One example of text has no formatting, while the other is formatted as a heading and a list.
The Heading 1 is the most important idea on the page.
Skipping heading levels can be confusing
This heading is a heading level 2. The next heading that we should create would either be a heading 3 or an additional heading 2.
If we were to create a heading 3 it would need to relate to our Heading 2 of Do not skip heading levels.
Why should I not skip heading levels?
This is a heading level 3. We do not want to skip heading levels because it can be confusing for people who use technology to read the content. Additionally, it can make the content feel out of order if I would have jumped to a heading level 4 instead.
Visual formatting like using bold or color does not work for a person using a screen reader
This is a heading level 2. I am not using a heading level 1 because I have already used one, and it does not make sense to add another one. Bolding, underlining, and using color for emphasis can be difficult for people who are color blind or visually impaired. Additionally, this reliance on visual aspects does NOT translate to assistive technology.
Only use Heading 1 through Heading 6
Most of the Assistive Technologies will pull only the first 6 headings. Ensure your content fits within this structure. Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank. Only for exceptionally long or complex pages would <h5> and <h6> be necessary.
To summarize, here is a shortlist of the requirements for headings:
<H1> is the most important idea on the page. Subsections should begin with <H2>
Documents and pages should have at least one <H1>
Do not skip heading levels
Do not select heading levels based on appearance
Do not use bold or another visual formatting instead of a heading
Only use <H1> through <H6>
Ok, so How do I apply headings?
Applying headings completely depends on what environment you are in. For this example, we are going to use Microsoft Word. Built-in styles are combinations of formatting characteristics that you can apply to text to quickly change its appearance.
Benefits of using styles:
Accessible
Create a Table of Contents automatically
Reduce time for document wide updates and changes
Ability to use Outline View
How to apply heading styles from quick styles
Select some text you would like to apply a style to
On the Home ribbon under the Styles tab
Select a style from the Quick Styles (the ones in the box)
How do I apply headings in a google document?
This video will introduce users how to apply headings in a google document.
How do I apply headings in a Microsoft Word Document?
This video will walk users through how to apply the heading style to a document in Microsoft word.
