Website Accessibility Exercise 4: Solution

Transcript from the "Exercise 4: Solution" Lesson

[00:00:00]
>> Jon Kuperman: So during that break I had probably the smallest little exercise which was just going over ARIA roles, HTML5 elements, things like that. So I think the example that I included, yeah it's just this little page that doesn't look like too much. But if we were to go into the code for it,

[00:00:26]
>> Jon Kuperman: Basically we could just see a couple of things, it's kind of up to you. I mean, I use the word article and class article to hint that this could probably be an article tag in HTML. A lot of this stuff's subjective, but I think in general with how good HTML5 is and how gracefully it falls back.

[00:00:42] You just don't wanna have a million divs basically all over the place when you could have something that did a little bit more. So if you wanted to you could change these to articles, and then you could even give them. Like we talked about for the old browsers or old screen readers, role="article".

[00:00:59] Also like I mentioned before, content structure, so seeing as this Semantic HTML is the top of logical structure it should be in h1. And so we can choose that, turn h1 and even if we wanted we could put a class on it. We could give it a class of smaller and then we could go ahead and resize that with CSS to make it smaller if we wanted.

[00:01:25] So yeah, similarly make those article, role="article", something like that. Okay we've got a third one here.
>> Jon Kuperman: Which will just make it a little bit nicer when it's being read to your users, if I spell it right, cool. And then we could float those or do whatever we want, as needed.

[00:01:48] Another thing is just being wary of your content instructor, so if we go back over here and I turn back on my screen reader. And then I hit Ctrl-Option-U, and then I go over to the right, to headings. It looks a little bit disjointed, so it'll be like, we have Semantic HTML as the top one now which is great.

[00:02:08] But then these are really all just articles, some of them are in h3, and one's in h4. So again, just like kinda cleaning through, how would you people to navigate the site? I would assume you'd want this to be the h1 like we changed it and these probably are h2's.

[00:02:21] They should be top level things that you wanna click on. So again, if you wanted to go back, let me turn the screen reader off. If you wanted to go back in and just change, let me find the first one, probably all of these to h2's.
>> Jon Kuperman: Something like that, give that a refresh.

[00:02:37] We don't wanna use CSS to make them float or make them a little smaller. Then I turn my screen reader back on and go to our,
>> Jon Kuperman: To headings again. And that looks pretty nice, so if somebody's coming to this site. It's contrived but assuming that you had a lot of real content on here, like news articles or something like that.

[00:02:54] It would be really nice for them to hit this and it would say New York Times. And then article titles would be like "Trump did something silly" or whatever it is. Now this recording isn't gonna be timeless cuz I made a political joke, that's too bad. Okay so yeah, so basically having a little bit of understanding for how people might be browsing your site.

[00:03:14] When we do all those CSS tricks they're changing them to h2's to make them smaller. It's only having a good effect on sighted, on visual users. Where it's actually having a really bad effect on people that may be viewing it in other ways. So cleaning this up so that it works well for both groups is fantastic.

[00:03:33]
>> Jon Kuperman: Go ahead and turn the screen reader off again, or not.
>> Jon Kuperman: Get me out of here.
>> Jon Kuperman: Okay cool, so going back into it, and this one's really good too. I think that we're gonna get into tools later where you can kind of run an audit of sites.

[00:03:52] But I do think in general those important kinda checklists items, like using the right markup, is applicable for buttons and form fields. But it's also applicable for your headers and your HTML5 tags too. Okay cool, so some more like checklists that we can get off, semantic markup for the headings and lists, great.

[00:04:10] And then the reading and navigation order is logical and intuitive. So again kinda going back you can use voice over as heading section to kinda a quick spot check. But again, your h1 is down your h5's or whatever you use. That should really outline the structure of your content in a logical way.

[00:04:29] Like title of your whole page, each article title, and then maybe article sub title. Whatever you wanna have should be logical and ordered that way. And then going in the robust, these ones are interesting to be Level A compliant. Are they talking about HTML and XHTML validation? So I think this is something that used to be really common practice, really required if you were gonna launch a site.

[00:04:54] And I feel like it's kind of gotten less and less popular over the years for some reason. But the W3 has its own validator, validator.w3.org. And you can put in any website into that or even copy paste HTML and it'll catch spec areas. Like if you don't have a closing tag when you need one or if you have an attribute that doesn't belong to an element, all sorts of things like that.

[00:05:16] I feel like yeah, that used to be like everybody did it and now day I feel like nobody does it, but it's important to do.
>> Speaker 2: I thought the functionality is built into a lot of linters now days.
>> Jon Kuperman: So you can get some cool stuff. If you're using eslint you can get some neat stuff about attributes that don't belong.

[00:05:34] But if you're using a big dynamic app, like sometimes you can have elements accidentally appearing outside of other. You can still run into a decent amount of problems. Same thing with your like meta tags in the head and some things like that which can get caught in validator but might not get caught in a linter.

[00:05:55] But they do go a really long way.