Set Language & Fixing Markup

[00:00:00]
>> So there's two things that are part of WCAG that are very interesting. Things that you might not think are part of WCAG. And almost, sort of go against what I said at the beginning about related fields that are non-accessibility. So WCAG does specify that you need to identify the language of the page.

[00:00:18]
So I don't know how many people do this, but like your HTML tag at the beginning, your website actually takes a length property. This will flag in a lighthouse audit, but it's something I see people not do all the time. So setting that is required to have full conformance.

[00:00:35]
And then if you have any subsections that deviate from that language, setting those manually as well. So like examples here. If you have a blockquote in Spanish, you can do it that way. Yeah, so that one's usually pretty easy to just go add the default language. And then if you use some kind of internationalization library, as that gets passed down to the frontend you can just update the HTML tag to be whatever the current language is.

[00:01:02]
The other one that seems like it shouldn't be, but it is, is validation and parsing errors in your markup. So we're talking about semantic HTML, but this is actually talking about any kind of significant, like parsing unclosed tags or malformed tags. Or tags that aren't allowed to nest that you have nested, anything like that is actually part of this as well.

[00:01:24]
I do this sometimes in my performance classes, but the W3 has a validator that's really nice. So you can go to validator.w3.org. And you have multiple different ways you can put in a web address, if your site's already on production. You can upload a file like an HTML file, or you can just paste some code.

[00:01:45]
So you could just like, for an example, I could go grab a big HTML file like this one, copy it, paste it in here and check it like that. And so this will go ahead and it'll tell me no errors or warnings to show. But I think, for example, if I did, I don't know like an h7, maybe or if I spelled paragraph wrong or something like that.

[00:02:05]
If you had some like markup issues, they would go ahead and return and say, hey, h7 is not a real element. I don't know for those that know, but that only goes to h6 in the headings, that's why I use this. Pa is not a child element, these kind of things.

[00:02:18]
So, yeah, they're kind of interesting that they're part of WCAG cuz they don't seem like they would be. But it's worth calling out making sure that you have your language set. And making sure that your HTML is free from those errors. So before we move into the preferences, do we have any questions on kind of this stuff?

[00:02:37]
So all the stuff that we've covered so far in this section? Are there any good accessibility boilerplates like normalizer? I don't think there are. I know, so, for an example, if you're using HTML 5 boilerplate, I know that they are very involved in the accessibility community. So they would just be a good one to use.

[00:02:58]
But I think moving forward, and Bootstrap, also very big in the community. But I do think moving forward they're finding either a linter or an automated tool, like lighthouse is gonna be kind of required. It's a really good question. But yeah, I can't think of anything that. And it's tricky too cuz the boiler plates are gonna provide just the basic elements.

[00:03:20]
So hopefully they'll have the language set, they'll have a doc type, they won't have any errors. But as soon as you start adding your own tags, right, we'll need something like it suits you on your own image. We'll need something to verify out. So, that's a very good question.