Semantic HTML

[00:00:00]
>> Marcy Sutton: So let's move on to our next major topic, which is Semantic HTML. In JavaScript applications, I think because it's so easy to write markup in your JavaScript, sometimes people just aren't thinking about, how to use semantic HTML. I've seen it on websites, I've seen it in applications, it's just pretty common unfortunately.

[00:00:19]
So we're gonna talk about semantics because of the the power that they can bring to your all of your sites. And this is an important enough accessibility basic that I wanted to bring it up because a lot of JavaScript applications suffer from this. So some things that we should be using our headings and landmarks.

[00:00:40]
So headings like the H1 through H6 elements, we had that dynamic heading in our skip link component earlier. Landmarks are things like HTML main, nav, header. I've used them in the application that we're working with today, so they're baked in. Another area of semantics is to start with native UI controls, so if there is a select that you could use.

[00:01:05]
The reason I showed you a drop down was because those links inside of it are for navigation, and a select element is more of a form control that's not really meant for navigation. But if you are doing something for forms like if there is a native one, like a native text input, start there because you get a lot for free.

[00:01:23]
And you can build semantics in your templates. We saw kind of poking around in this Gatsby site that I had broken up my navigation from the header. And so you can kind of bake those semantics into each component snippet or each template. And then every consumer of that template will benefit.

[00:01:42]
That's something that I've worked into some of the Gatsby starter projects so that everyone's starting with those will get some of that benefit. And then we want to verify that the semantics that we've had is you're actually working in assistive technology, because that's where a lot of the benefits come in.

[00:01:57]
It's good for SEO, it's good for reader modes. It's really good for assistive technology output. And I have a link here from WebAIM that stands for web accessibility in mind. All of their guides are fantastic, but the one on semantic structure, I like a lot. So bit more about why this is important if you can navigate through a web page by all the headings as a blind user, that saves you a ton of time.

[00:02:23]
I went back through my notes from user testing. And some of the things that they had mentioned was like, yeah, I like that this has headings because I can just hit the H key and then VDA and navigate by headings. It also communicates to users of assistive technology what's on the page.

[00:02:39]
It could help for things like conversational UI's. Ways to mark up pages so that it's not what we call div soup. And things like search engines too. So some semantics in the wild, this is a screenshot from the Event Apart website. They've used a section element here, they've got ordered and unordered lists.

[00:02:59]
There's a main element, and so that's pretty easy. Like if you could swap out a div for more semantic element that would be great. As a resource I really like the Mozilla Developer Network. If I'm going to read about what, what do I get from using this element, that's a good resource to look at it.

[00:03:17]
And you can combine those semantics with more modern layout tricks, like here they have a section with display grid. And so I find that that combination of writing accessible modern sites is just such a joy. So some tools for testing semantics like to verify that output, because sometimes you can use a tool before even firing up a screen reader.

[00:03:39]
And it can get you pretty close to verifying what's going on. Accessibility Insights has a headings tool, so you can go and look at all the headings on the page. That's the one that has the tab order tool as well. Another tool I really like for this is the Firefox Web Developer Extension.

[00:03:57]
It's an older extension that they've kept up to date, it's pretty great. So some other tools that you could use to test this would be NVDA's, they an elements list that you can pull up. And the cheat sheet has the keyboard commands for how to do that. Also, Voiceover has a thing called the rotor, which is sort of the analagous thing in Voiceover that you can navigate by headings, or navigate by form controls, or images, or whatever collection of things you wanna navigate by.

[00:04:25]
And so looking at semantics, that's an interesting way to do it because if you pull up all the landmarks, you can especially in NVDA's elements list or Voiceover's rotor. You can see like, okay, there's five nav elements, and none of them are labeled. How do I know which nav is what?

[00:04:43]
So maybe an aria label on that element would help differentiate what these sections are. And then browsers reader modes, you can go and check like. Okay, did I actually mark this up with a list so that it has a, list styling to it by default. So those are some tools for that.

[00:05:00]
For the demo for semantics. I am going over the application. I have this layout example that shows some of the different markup that I could have used like divs all the way down. Styling means that you could style things however you want, but it's much better to use these semantic elements just because of the accessibility information that they provide.

[00:05:24]
So like a header when we looked at New York Times earlier and it said banner That's a header with a role of banner which is supposed to be the top header. You can have this nav role of nav, so the elements like this header, main, nav, they get those roles by default.

[00:05:43]
I've added them on here just to show like what their aria equivalents are. But you get those semantics by default which is really cool.