Landmarks

All right, let's move over to landmarks. So basically this is now structure of the pages themselves, like on every website has their own structure.

So in this case, the way website, they have like these three or four even parts on the top with a skip to content and then the must head section and then the main navigation, breadcrumb navigation, and then basically a section that has the site navigation in it and one that has the main content in it.

And then you have footers and stuff like that.

So this is always the same structure and that's good.

You want to have this purpose on there.

You want to have a good understanding of what's going on.

Now, for people who are using assistive technology or screen readers, this might be something that they can't see, right?

for them it's like mostly a linear thing or it's like hard to know what's going on where so

to make it easier for assistive technologies to know where to go you can put in basically

meta information that gives users more information on where they are on the page

and also allows them to jump around.

So you get the big picture view organizational wise,

and then you get the way to jump to individual places.

And so we call that landmarks.

And landmarks are basically sections on the page that you can refer to.

So if you look at the page structure tutorial,

is what I would suggest you to look at after this.

There are actually a couple of examples in there,

and we're going to go through them just to give you the big picture of you.

And these are the page regions or landmarks that are defined in the ARIA specification and in HTML.

So you have like, it's really easy to get to those and to use those.

So for example, if you have the page header, you can just use the header element and boom,

you have your header landmark.

It will be announced as a banner landmark actually because of history.

And you get the way for user with assistive technology, they can immediately go there

If they want to get that shown.

Page footer, same thing.

You just use the footer element and that works.

Now for both header and footer, you have to make sure that they are not inside of

an article or a section element, because then they only apply to this article or

section element and are basically not general page wide headers and footers.

Then you have the navigation, for example, you can have the main navigation and you can

have the side navigation.

And that is a super easy way to say like, oh yeah, we have these nav elements and that

allows a screen reader user to just jump directly to those nav elements and doesn't need to

like hunt around on the website, making sure that they find what they need. Same goes for the main

element. So this can be only once on the page. In contrast to the navigation nav element, which can

be multiple times on the page, you only want to have one main because, you know, it's the main

information on the page. So it should be unique and you can jump to that as well.

So this would be the main navigation. Then you can have complementary content, which is like

additional information that pertains to the main content. And those are already the main

landmarks that you can use. And using them is super useful, as I said, for people to know what's going on. So we can use, let me see, is this the tool? No. So here I have landmarks, a thing that shows landmarks. So here we have the nav

landmark at the top, then we have a header, then we have another nav, then we have another nav, then we have a main that actually starts here.

It's just the CSS is not cooperating.

We have here nav, then we have a header inside of this main.

So that is basically scoped to this article here.

And then we have a navigation here for this in-page navigation as well.

And you might say like, oh, that's a lot of navigations. How are users supposed to be like moving around there?

Now, we already have seen in the example here, like in this example, that you can label those navigation areas.

So when a screen reader gets into these navigation areas or shows them in the list, it will use the ARIA label basically as a name for that region.

So if I go into the first accessibility fundamentals link and I tap to it, screen readers would announce main navigation or accessibility foundations link, main navigation.

So you know that you are in a main navigation there.

And then when you go through this, it would jump here, it would say home.

And, you know, on some websites you would think like, oh, this is the main navigation and I'm in home, but you're actually in the breadcrumb navigation.

So in this case, it has an ARIA label that says breadcrumb.

So it's clear that like this is the breadcrumb navigation.

Pretty clever.

And yeah, and this is this is how you usually use page regions.

It's very simple. This is already like a lot and probably too much.

And yes, you have two good ways to label those regions. So you can use aria-labeled-by,

which basically says like, oh, I'm pointing at this ID region heading. And I label my region,

in this case nav, with this h2 region heading. So when I get inside of this container it will say,

oh you're now reached region heading on the page. But you can, as I have shown, use aria-label as

well. It depends a little bit on if you want to have the label shown or not. I'm a big fan of

having visible content on the page that is also read for screen reader users. So for example,

this page contents heading that should be used as the ARIA label, using ARIA labeled by for this

navigation and so it is visible. So if this was to be copied over somewhere else and the title

changed because that makes more sense in that context, it would change automatically. And if

you use aria-label and you have a visible content there, you always have to make sure that they

match up and yeah and that always creates problems so that that is how you look for those

um probably a way to say uh show show show show show

no

Yeah, so this is the visual ARIA bookmarklet and that can show you all the ARIA accessible

names, for example, and all the content depends a little bit on what you're hovering over.

There's no accessible description, that should be okay. Yeah, and you get a good overview on

what that does. I don't know if that's really what's supposed to be happening. Oh, there we saw

like breadcrumb on the top left. I can't hover over there, but I will make it bigger in the video.

Maybe on the top left it says "Egg name breadcrumb" and if I hover over here it says "Egg name main"

and that basically means the ARIA label is properly applied.

Take a really quick look at the success criteria around that landmarks.

And the first one is bypass blocks.

And the second one is meaningful sequence.

So bypass blocks is the much, much more important one,

especially in this context, but I want to mention both.

Bypass blocks basically says a mechanism is available

to bypass blocks of content that are repeated

on multiple web pages.

And this is what landmarks are.

They allow you to freely bypass blocks

and move there, especially if you're using screen reader. If you're using only a keyboard and you don't have assistive technology that you use, then skip link is super important. Like we have here, if I start from the top, there is the skip to content link. And if I press that, I immediately get navigated to the main content and then can move from there without having to like go through all of the pages at the top.

Because if I start from the top and I don't have a skip to content link, then I'm here in for a long time.

And press tap, tap, tap, tap, tap, tap, tap, tap

but in general this makes sure that you know everyone has the same opportunity

and then a little bit on meaningful sequence that doesn't really apply to the like landmarks and

stuff but it helps to think about the landmarks when you are looking at the code and meaningful

sequence basically asks that the sequence in which content is presented, that if that affects the

meaning, that the correct reading sequence can be programmatically determined. So basically,

if changing up the reading order would make something harder to understand, that should be

avoid it. And I have a good example for that. So if I go to w3.org/wai/bed, no, it's demos/bed. This is a website that has basically an inaccessible and inaccessible website on it. And yeah, the design is

very old and it needs an overhaul at some point, but it still shows the issues pretty nicely.

So if you go to the inaccessible homepage, we have these three, what looks like three news items

here. So we have the heat wave linked to temperatures, man gets nine months in violin case,

and lack of brains hinders research. Now, if I look at that without CSS and linearizing this,

basically you would see that these three, these three and then these three sections,

So the headings, the images and the, um, uh, the like teaser text, they are in that order,

like from left to right.

So they don't, um, they don't form like one cohesive, uh, heading image, teaser text,

uh, order.

They do heading, heading, heading, teaser image, teaser image, teaser image.

And then teaser text, teaser text, teaser text.

So this reads actually like, after three years of effort, city scientists now agree that the primary cause of the 2003 heat wave was hot air from our mayor.

These kinds of crimes need more creative, effective punishments.

For example, we could require compulsory brain donations.

huge drop off in brand donations due to the great success of slow traffic safe streets policy.

So this shouldn't happen, right? That like the content gets distorted that way. And we see that

sometimes these days, but it's like super rare as well. But I thought it weren't a mention here. So

a meaningful sequence that the reading order is programmatically determined. Usually you do that

by putting it in the reading order inside the HTML. Every section is the same. And so if we

look at these in our inspector, we see that, just making it more visible here, this diff news bar

goes among those three stories and then you have three stories here. And yeah, because that's

how this is set up, it breaks to demonstrate exactly this issue.