Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:23Length:2.5 hours
Access 1
  • Overview
  • Transcript

3.3 Headings

Hey, John Hartley here and in this lesson, we'll be taking a look at Accessible Headings. Headings, as I'm going to be referring to them, are your h1s, h2s, h3, 4, 5 and 6 and are another very important part of markup on a website. Now I'm not here to argue whether or not you should only have one h1 on the page because with HTML5, they opened it up to, depending on the rest of the structure of your page, you may be able to have more than one h1. What I can say regarding that is that when it comes to accessibility, heading structure can be extremely helpful or very confusing. My recommendations is to use headings with the following in mind. When you remove styles does your page still make sense? Does the breakdown of the content on your page still have a logical flow? I've always tried to imagine the heading structure of my page as the structure used in a table of contents. So there's the neat little bookmarklet called the CSS toggle where I can toggle my CSS on and off pretty quickly. I've laid out the structure of my page in a way that even when the styling isn't laid out, I can still kinda understand what's happening. And let's take a look at the code. I have one h1 on my page and that is Accessible Headings. My h2 is Headings in the wild, A tale of two headings, Purpose of Heading Tags and those are my main headings. So I've started to break down what exactly is on my page. This deals with WCAG 2.0, 2.4.6, headings and labels, and also deals with parsing which comes in portion four. This is a level AA guideline and mainly deals with semantic markup. So you just saw the page with no styles. I'm now going to open up a screen reader and open up Web Rotor to see how those two handle this page. >> Heading level 1, Accessible Headings. Heading level 2, Headings in the wild, [FOREIGN]. Heading level 2, A tale of two headings, Lorem. Heading level 3, Only one h1, Lorem. Heading level 3, Multiple h1 tags, Lorem. Heading level 2, Purpose of Heading Tags, Lorem. Heading level 3, The h1 tag. >> So you can hear it as it goes through, it's reading those out and letting you know which heading level it actually sits at. Now I've opened up WebRotor, and on a MAC it is Control Option U when you have voice over on and you can see that it lays it out for you here. It has, on the left side, the actual heading level. >> Heading level one, heading, heading, heading level three, heading level three, multiple h1 tags. >> And it helps you quickly go through all the headings. So this is where that table of contents comes back into play. A user can go from your number one tag, and understand what your table of contents is, and then start just going through the headings. >> [SOUND] Heading level three, The h1 tag. >> Now if I'm going through the WebRotor and I get heading level three, the h1 tag, and I wanna go there, I just hit Enter. >> Heading level 3, The h1 tag. [FOREIGN] >> So you can see that it makes it pretty easy to hop around. And so that's one of the main reasons to have your semantic mark up with your headings actually having a reason to be those headings. It's very common to use a heading as just a quick shortcut for a certain style. One way you can get around that is by giving that same style that you're giving an h1 or an h4, a class called h1 or h4. Now let me go back to my markup real quick. And in headings down toward the bottom you can see that I'm using that class of h4. I'm actually using it on a paragraph. So we can see the h4 itself is when not to use it and right here, that's what it is. So it's right here, and then at the bottom we have the same styling, and sure, the font weight isn't the same, but we didn't specify that in our class. So that's just one way to avoid leaning on those headings as a crutch. Instead of skipping around from an h1 to an h5 and back to an h3, instead make sure that that logical order, much like the table of contents, is being used. If you're guilty of this, don't worry, it's very common on many sites to see this mistake. So we've taken a look at headings and we now understand a bit more about why to use particular headings and use them semantically in our markup. In our next lesson, we'll take a look at color contrast and see how we can meet that criteria when it comes to.

Back to the top