This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Semantic HTML" Lesson
[00:00:00]
>> Jon Kuperman: All right, so, we talked about this a little bit already and how important it is. I think the easiest thing to get started with and probably the biggest win is just using Semantic HTML, just using the correct stuff. Cuz again, like you start seeing all this amazing functionality.
[00:00:15] Now that you're keyboard users and you're trying to learn how to use a select with just your keyboard. And then you hit space, and the arrows, and you're trying to figure out all of those different things. It's hard to remember, to implement all of those pieces of functionality if you're building your own check box, or selectbox, or different things like that.
[00:00:34] And those are not only best practices for developers but users are used to, like space should trigger a checkbox. Like if you build your own checkbox and you don't have a key up listener for space, like people aren't gonna know how to fill that out. So more checkboxes off our WebAIM guide here.
[00:00:52] Make sure that the language is always defined in the HTML attribute, it's like a big one that I see. And then, same with if there are any things in different languages which I do see sometimes like blockquotes or I don't know, excerpts, things like that, make sure you specify those languages as well.
[00:01:10] I don't really have the screen readers out. And then, yeah, this one is a little bit trickier. So words that may be ambiguous, unknown or used in a specific way which is kinda like leading into what we were talking about, can be defined through adjacent text, or a definition, or a glossary, different things like that.
[00:01:27] So, I think that one is a lot harder to be kinda giving out. But I think just a lot of, like with your labels and your descriptions like context clues sort of where you're at and what, you know what I mean? Kinda going back to like, if you're nested inside something like a form or whatever, like repeating those the descriptions of where you are, can give a lot of context clues to the piece of information that you are asking for.
[00:01:51]
>> Jon Kuperman: There's an element for that. So yeah, these are probably three things that I see a lot, that are pretty easy fixes, and pretty rough experiences. So, we've kinda talked about div class="button". It's always like a big no, no, like those should always be actual button tags. Checkboxes are like even worse, the thing is that people really hate the way browsers render checkboxes, designers really, really don't like them, they all render them really differently.
[00:02:18] And people always want a consistent UI for their checkboxes. So they take spans, or something like that, or list items, and they start making them look, visually, like checkboxes. But you're missing out on so much contextual information about what's related to what, and descriptions, and how to interact with them, and all these different things, they get really, really rough.
[00:02:39] I've done quite a few audits on some popular libraries out there I'm like, you don't have any like of this functionality, it's not just a visual thing. You need to be able to make the spacebar work, you need to be able to navigate it correctly. And then the same with images, I always think it's a cool pretty easy one if you're uploading it yourself to give good names to the images, and then alt text.
[00:03:00] I mean, alt text definitely have some alt attribute even if it's blank but I also think it's a nice little thing, naming your image appropriately can go a long way as well. This is not always possible with user generated stuff, right?
>> Speaker 2: I have a question.
>> Jon Kuperman: Yeah?
[00:03:14]
>> Speaker 2: Speaking of your own components that comes with web components that's were not coming some time in the future, what are the things that people are trying to accomplish like W3 with web components and accessibility?
>> Jon Kuperman: Yes, I think a couple of things like web components have some great potential for being very accessible.
[00:03:36] But I think the big thing is like web components are built on top of the regular HTML elements, right? So, if you have a Google Maps' web component, that's fine as long as it makes the correct choice like if there's buttons at the bottom. You know what I mean, the lower down ones are where you get into some trouble.
[00:03:55] But I think web components can be cool because having many eyes on it like an open source project. You know what I mean, so if you fix the one Google Maps' component that everybody uses or whatever, that can be great as far as accessibility goes. It does have some potential downsides where you don't have a lot of insight into what's going on right away, you're just importing something and using it.
[00:04:15] But I feel positively about them, I think as long as they each are responsible with the core elements that they use that it'll be great in that sense. But yeah, there's a lot of, we'll see stuff coming from web components.
>> Jon Kuperman: Cool, and then this is great. We've been kinda drilling on this a lot but a lot of different elements have inherited functionality.
[00:04:39] And that's always the big worry like both that a screen reader has less clues cuz it know where the button is, it doesn't necessarily know what class button does. But also, there's so many keyboard shortcuts and there's so many screen readers will get into it a little bit, they have like different ways of viewing all the contents, so you can be like organize by the headings or organize by tabbable elements, things like that.
[00:05:01] So even if you kind of go really far and make the functionality work, it still might not register on that nice list of form elements if it's not a button, if it's not an input, things like that. So webAIM and the spec which are both at the end, they have like a really great list of elements that have inherited functionality and what it is.
[00:05:20] So, if you have to go out of your way and rebuild something, at least check that list to make sure that you're on the right track. So, yeah, this is cool, if you're using voiceover, this is a cool view that it has that has all the different headers.
[00:05:32] So you can with voiceover on, hit option + ctrl + u, and it's just a different way of parsing a website. So like one thought exercise I guess is, you've got this screen reader that you've now used, and when you hit a website it kind of just starts reading you what's on the website.
[00:05:47] But imagine something like wikipedia.com, how terrible it would be to just hit it and have it read ten hours worth of all the different articles. So a cool view is, you can go into the headers view and you can just see what the top level, secondary, tertiary elements are.
[00:06:02] But it brings up another potential pitfall for accessibility, which is using the wrong heading for the wrong place. So the headings are very important for accessibility, indicating the importance in your content hierarchy like is it H1, 2, 3, 4. But oftentimes for design purposes it's like, it's our H1 but we need it a little smaller so we'll just make it an H3, something like that.
[00:06:25] And it happens a ton of the time. But then you've really throw off people, like on a screen reader, who are, they go for the H1 and it has nothing to do with the page. It's just the thing you wanted really big like join our mailing list at the bottom or whatever.
[00:06:39] So again, like use the appropriate element. And totally resize it with CSS, that's no problem to till give it a class and make it tiny or big. And I've seen some cool, some of the newer CSS frameworks have a class of H1, H2, H3,H4. So then you can use the appropriate one and then just give it an H3 class or something like that, if you need it a little smaller.
[00:07:00] But again, use CSS to make it smaller, don't switch elements like, use the semantic element.
>> Speaker 3: Bootstrap ships with that and SEO requests it all the time to have like an H1 not look like an H1.
>> Jon Kuperman: Yeah, totally good. Give it a class, change it up in the CSS.
[00:07:17] But, if you change the actual elements around, you'll get these really confusing sites that are like, this site is about joining our mailing list. And then the second thing is welcome to the homepage. Or you're really trying to traverse it, so yeah. Another important one.