 Hey, everybody, what's up? It's Rob Dodson. Welcome back to The AliCast Show. Today, I want to talk about headings and landmarks, the importance that they play in accessible navigation. So headings, as you're familiar with, whenever you're looking at a web page, what a sighted user is often going to do is they're going to scan the document looking for areas of larger text or bold text to figure out what the important content is. Sort of like the quintessential example is a newspaper, right, where you've got the big headline that tells you the really important story. And you've got smaller subheadings to tell you the less important parts of the page. And so in general, headings help you form an outline or a skeleton for a document. Now, for a stream reader user, though they don't get those same visual affordances, we can still convey that outline or that structure to those users by using the correct semantic elements. So in particular, using the H1 through the H6 tags. And so let me show you an example of a before and after experience when we do a good job using headings. So this is a little site that I've put together. It's kind of like a little lifestyle consumerism site type thing. And what I want to do first is just go through this with a stream reader. And this version does not really have any headings whatsoever, even though I've styled things to look like I've got some big sort of heading sections. If I turn on my screen reader, and if I open my rotor, so in voiceover, there's a little sort of menu we can open to find all the headings and landmarks and things like that. Link's menu, form controls, no items in window spots. Link's menu. OK, I can see that there's no headings whatsoever. So that means the only real way that I can navigate through this document or the primary way that I'm going to navigate through this document is just kind of to like go line by line. Link, lifestyle, link, two items in cart, today's posts, food, link, image, a pile of citrus, eat fresh every day, laurum, ipsum, dollar. Now the problem is there's nothing really telling me the hierarchy here, so I can't really tell if a piece of text is big and important, if it's defining a section for me. It all just sort of seems like it's at the same level of importance in the document. So it's kind of hard to tell or to interpret what it's trying to convey to me. Now let's look at the same version, but this time, using proper H1 through H6 tags. Lifestyle, web content, you are currently online. So I'll open the headings menu for starts. Link's menu, heading's menu. All right, and I can see there's a bunch of different heading levels inside of here. So heading level one, lifestyle. Level one tells me, boom, this is the page that you're on. Level two is going to tell me the major sections, like today's post, and there's also another one down here called hot list, right? So now I can jump to two different sections of the site. And then within each of these, the articles have H3 headings. And in voiceover, I can actually navigate by heading even, so I can say control alt command. Heading level three, lovely landscapes, heading level three, inspiring minimal workspaces. Right, so I've actually increased the efficiency of the user navigation experience using a screen reader. And in fact, if you look at some screen reader surveys where they ask folks who use assistive technology, like what's kind of your primary way of navigating an unfamiliar page? A lot of folks say the first thing they do is they try and navigate by heading. So that way we're helping them kind of skip any repetitive or boilerplate content and get right to the important sections of the page and start to form that structure in their mind of what the document looks like. I should also mention that with headings, there's kind of like an order that we want to follow, right? So starting with H1 and working our way down to H2, H3, H4, and so on, what I see a lot of developers do is they will skip levels because headings have a little bit of default styling. So someone might say, oh, well, I've got a smaller heading here in my design. So I'll just skip H2 and H3 and go right to H4. In general, you don't want to do that. In general, what you want to do is you want to use the heading levels in order, in sequential order, right? So if you have something that is secondary content, use an H2 for it and then you use CSS to style it down to whatever size your design calls for. Another interesting technique that you can do with headings, which I've actually done on this site, is sometimes you have areas where the design does not call for a heading. Like we have kind of this main content area and then we've got this hot list area. The hot list area has a heading, right? But this main content area doesn't. But we've kind of indicated to the user that it's really important by making it like big and central. And so one thing we can do is we can actually take a heading and we can just position it off screen using CSS. So that way our screen reader user is still going to get that content. They're still going to get that affordance conveyed to them that this is an important section. But that way it doesn't have to be in our design if the design doesn't call for it. So for instance, if I go up here and I start again at lifestyle. Voice over off. Voice over on Chrome. Lifestyle, window, lifestyle. Visit heading level two, today's post. So you can see that even though there's not a heading on screen that says today's post, kind of like snuck one in there. So that way the navigating experience is a lot more efficient. Now the other side to this, beyond just headings, since headings are good for forming the kind of the skeleton of your page, is you can also define major regions of the page using landmark elements or landmark aria roles. All right, so I'll show you the section over here in the W3C docs on landmarks. So there's a few HTML5 elements like aside and footer and header and main and nav that I think a lot of developers are familiar with but don't always use that frequently because they don't give you any default styling. So a lot of times people just use divs for everything and then they apply CSS to them. But one of the cool things that you get from using these landmark elements is that they have these kind of semantic roles built into them and users can use them to navigate the page more effectively. So here is that same site. This time I've also added landmark elements. So my main content here is inside of a main tag instead of just a div. My navigation up here where it says lifestyle and it has little shopping carts instead of a nav element. My sidebar is inside of an aside element. So now when I turn on my screen reader, voiceover on Chrome, lifestyle, window, heading menu. I can open the rotor, voice, form, control, no items, landmarks, menu. Go to the landmark section. Navig main, complimentary, heading level two, hot list. Boom, I've gone right over to my sidebar, right onto that H2 and now I've skipped everything else on the page that I wasn't interested in that I didn't want to navigate to and I know because maybe I'm familiar with the document that over in that sidebar is the hot list or whatever and that's what I want to see, right? I want to see the current articles that are trending and whatnot. So using proper headings and using landmark elements, you can really, really increase the efficiency of the user navigation on your page. So if you're working on a site right now, go through, look at your heading level, make sure it makes sense and forms a proper skeleton and then look for places where you can add landmark elements to kind of region the page up a bit better. That about covers it for today. So if you have any questions for me, you can always leave them down below in the comments or hit me up on a social network of your choosing. As always, thank you so much for watching and I'll see you next time. Hey, if you want to learn more about navigating headings and landmarks using screen readers, we've got a couple of videos over in our playlist that you can check out, give them a look. Again, thank you so much for watching and I'll see you next time.