Transcript: Importance of HTML Headings for Accessibility

Aaron:

Hi, my name is Aaron Cannon. I am an accessibility consultant for the Church of Jesus Christ of Latter-day Saints. And I wanted to take this brief video to discuss the importance of HTML headings with regard to accessibility.

I am totally blind. I've been blind since birth.

And I use a screen reader. I've been using one since about 1992. The screen reader that I use is JAWS for Windows. And uh- it happens to be the most popular screen reader on the market currently.

But all good screen readers offer a feature that allows the user when browsing the web to see what headings are on the web page and to jump from heading to heading.

And why is this important? Well, assuming that headings are used properly on the website they can give a - reading the headings can give you a very good overview of what the author wanted to stand out. What was the important points of the website or important sections of the website. And again this is assuming of course that they are used properly.

And so is makes it much easier to jump around the web page and to find relevant piece of information that you happen to be looking for at that particular time. Because you can hopefully make a guess as to what sections of the page it would be in. And then use the headings to jump to that section. And then continue reading from that point.

Let me go ahead and give you a demonstration that will hopefully make this a bit clearer.

[Web page Google search]

JAWS:

Control open dialogue. Ars Technica.

Aaron:

This is a website that I frequent.

JAWS:

Enter. 2 percent. Enter. Ars Technica 100 percent. RSS feed. Page has two frames, 29 headings, and 180 links.

JAWS:

Ars Technica: Visited.

Link Graphic: Ars Technica.

List of two items. Bullet: Link graphic of scribed bullet.

Link: Graphic Contact Ars.

List: A list of eight items.

Bullet: Visited.

Link: Home.

Bullet Link: Visited.

Bullet Link: Contact.

Aaron:

So as you can tell JAWS starts reading from the top of the page. And if I didn't stop it would pretty much read the entire page all the way through which would take quite a while. So I almost never do that just because the top of the page usually has a lot of junk that I am not terribly interested in. So let me go ahead and have press the H key, which will take me to the first heading.

JAWS:

Jobs: Heading level 2 link graphic.

Aaron:

Okay. Jobs. I've been to this page a few times. So, I know that is not the section that I am interested in.

JAWS:

Intel white papers Heading level 2

Aaron repeats:

Intel white papers

JAWS:

Recent features: Heading level 2 Link Graphic

Aaron repeats:

Recent features.

JAWS:

Open Forum: Heading level 2

Aaron repeats:

Open Forum

JAWS:

Don't Miss: Heading level 2

Aaron repeats:

Don't Miss

JAWS:

Should congress tweet? Should bloggers care?

Aaron repeats:

Should congress tweet? Should bloggers care?

JAWS:

Sirius/XM merger approved with..

Aaron:

So basically I am able to press the H key and jump from headline to headline on this blog. And it makes it very easy for finding articles that might be of interest. And if I find an article that I am interested in.

JAWS:

iPhone net DA: Doing more harm than good. Heading level three. Link visited.

Ex- Googlers launch Cult, Kill Worlds biggest search engine quote. Heading level three. Link visited.

Aaron:

Okay. So let's say for example I want to read this article. I press Enter.

JAWS:

Enter

Aaron:

So I'm at that Web page. I can press the H key to go to the heading hopefully skipping past all of the navigation links at the top. Okay and I did that. And it just read the heading. Actually I just stopped it. But let me do that again.

JAWS:

Visited Heading Level One: Ex-Googlers launch Cult, Kill Worlds quote biggest search engine quote.

Aaron:

Okay so it just read the first heading. And it also jumped me to that heading. So that I can start reading from this point and hopefully I'll get the story.

JAWS:

By Jack Collins.Vertical bar. Colon. Publish on July 28th, 2008 -1PM CT. There's yet another new search engine on the block. But this time spirit it was a little bit

Aaron:

Okay. Excellent. So with a few key strokes. And obviously when I am doing this just for myself and no for demonstration it is much faster.

But with a very few keystrokes, I was able to jump to this article and start reading. Jump to the content and start reading.

And if this heading hadn't been here I would have had to press the page down key or down arrow key several times. And you know just listen for the start of the article. Which especially if I am unfamiliar with the website is sometimes a bit tricky to know when I have actually reached the content or when I am still just browsing though the navigation links.

So headings are pretty invaluable for letting me know where I am as well as helping me to jump around the web page in an efficient manner.

Let me show you another website that does very well with headings.

JAWS:

Google.

JAWS:

o f f i c e c h a i r

Aaron:

I'll just search for something dumb.

JAWS:

Forms mode off. Enter.

Office Chair dash Google search page. Page has one frame. Twelve at Office.

Aaron:

Okay my search results are up. I'm going to go head and press the H key. And hopefully I can skip past all of the preamble.

JAWS:

Sponsored links heading level two.

Aaron:

Okay. Sponsored links. I'm not terribly interested. Although if I was I now know I'm, at the top of section of the page that has the sponsored links. Let me press the H key again.

JAWS:

Office Chairs Ergonomic Computer Leather Reception Seating Heading Level

Aaron:

Okay. Excellent. That's the first search result. It just read me the title. I'm going to press H again.

JAWS:

Office Chairs from Overstock dot com

Aaron repeats:

Office Chairs from Overstock dot com.

Aaron repeats:

Okay. Excellent. That's the second search result. And I could keep pressing H to go from search result to search result until I found the one that I wanted. And again, I am at the second search result right now so if I press the down arrow key, I could read the little synopsis of that search result.

But you know again it really will all comes down to is the fact that Google used headings in the correct way and so liberally, it allows me to very easily navigate their website.

Let me show you the webpage. And this is also interestingly the webpage also owned by Google. But they did a much poorer job on this site for using headings.

JAWS:

Control. Y O U T U B E dot C O M. Enter

YouTube dash into. history. culture. Pitching to 3 percent. 100 percent. RSS feeds. Page has two frames and one

Aaron:

So I'm now at the top of the page and I am going to hit the H key to Jump to the first Heading.

JAWS:

There are no headings on this page.

Aaron:

Excellent. so they didn't even use headings on this page.

Now I know for a fact that there are several different sections and several different pieces of text on this web page that should stand out because they are the beginnings of sections. I'm sure that there are some pieces of text on the screen that have a larger font or are perhaps bold or one that whatever indicators they're using. But they're no marked up as headings and so I don't get that information.

Screen readers do not read style for the most part. They only read markup. HTML markup and so forth. So basically style information is virtually ignored.

So if you want to bring something to the attention of a user -you know make it stand out - headings are definitely one way of doing that. So I hope this is has been at least somewhat insightful. I would encourage you to review your own web pages and just to see if you have headings in logical places. Obviously you don't want to overdo it.

But put headings on things that need to stand out; and on text that denotes the beginning of sections; any sort of text titles or subtitles or things of that nature.