This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Exercise 1: Solution" Lesson
[00:00:00]
>> Jon Kuperman: So that was the first exercise. We had a couple of little things that I messed up on that I was gonna cover really quick. So the first one, well the first big one which was addressed and we gonna cover this in a later section but apparently someone ran the navigation through a tool and the color contrast isn't enough to meet.
[00:00:19] Either double or triple A compliance, so we're gonna, we'll actually take a big look at colors, I do apologize. I picked a Bootstrap theme that I thought would looked nice and assumed it would be accessible, but we'll go ahead and fix that later. Somebody had mentioned the use of main tags.
[00:00:40] Hoping people can see over here and why they use a main tag. I think that looking at it, a main is not the correct tag to use here. The basic idea is going for a div is pretty much meaningless in HTML, and so wanting to have something like article or section or something to give more semantic meaning to what each area represents.
[00:01:05] Which can be used, but different screen readers use them in nicer ways to kind of announce what's going on. But I think if I had all to do over again, that a section tag would be more appropriate for all of these. And so yeah, I would go ahead I hadn't changed those to sections, going forward in this.
[00:01:21] I also, actually, after it was mentioned, I think that main also only gets to be used once in a document. As far as having context and those get treated kind of as divs afterwards so I think it didn't do much good there. But I would probably use sections, tThe big thing is like, on a single paged website like this.
[00:01:40] Denoting each area as something more than just another div on the page, right? Like this is something to be kind of looked at as an article or a section or something like that. Also, this used to have a focus.js file, so I think some people that were kind of hopping ahead or looking in the console saw that focus js is failing.
[00:02:03] We're not using that. So sorry about that still being in there. I think, in an attempt to make this easy, it's just, there's no server. So it's just duplicates of [INAUDIBLE] HTML file. So yeah, I think that if you do a search with your text editor, you'll see two reference [INAUDIBLE] To that, which you can just remove or you can just ignore.
[00:02:20] The errors not gonna, you know, not gonna cause a problem but there's no, there's no need for a focus JS file. All we're gonna cover focus in the next exercise, but if anybody saw that council error. That's not a big deal there. I think that was everything. I think I got everything that was mentioned in chat.
[00:02:39] If there's something I missed, feel free to put it in there. And then we can go ahead and cover some of this Stuff, so, this was the example that I was talking about where I had it where if you would click on something like tabindex then, you would start tabbing.
[00:02:51] It used to take you all the way back to the top of the document but, Chrome very cleverly has made that not necessary but, you can still kinda get used to things like, you know, like starting at the top of a document and then, I've got this relatively link up here Boy.
[00:03:07] Boom. And then tabing through and seeing what that is like. And then tabing through a form and shift tabing back up. I think that is kind of like the big takeaways here, is that I just wanted people to get some experience with it. And then one thing you might notice with the form is that You can fill out all of these different things and you can experiment with the arrow keys and stuff.
[00:03:26] Hit remember me. And then when you go to cancel or submit it just kind of takes you back up to the URL bar here. And so this gets us into one of, if not the biggest antipattern inaccessibility. Which is if we pop over here to the actual code...
[00:03:41] We'll notice that these two things, while they look like buttons, they are not actually buttons, they're dibs. And people do this quite often. I think one of the biggest things is that there's a lot of styles that come with the button tag and people kind of don't want to deal with that so they think An easier way would be to take a div and then you have a nice, clean slate as far as css goes.
[00:04:03] The problem is, and this goes back to Jack's comment at the beginning of that, there's a ton of functionality and meta information attributed to these attributes, to these tags, I mean. Different HTML elements, and so, you know, buttons are tabable, div's are not. And then buttons, you can hit space and Enter on them, and divs you can't do that.
[00:04:25] So you can start kind of getting into all these things where it's always a better approach to use the right element. And then spend some extra time on your CSS for it because it's so easy to miss and to give ...to give them the right class. And they look great and, you know what I mean, but they just don't have any of that functionality that comes with it.
[00:04:46]
>> Speaker 2: Would using an anchor tag be a good thing?
>> Jon Kuperman: It gets you some of the way. Again, it's like kind of just, and we'll get into some of the specifics, but, yeah, like so anchor tags have some of that stuff, right. So you can tab to them, which is really nice and you can hit enter on them which is really nice as well.
[00:05:02] But there are few things that they don't like one thing is that anchors will read differently to screen readers than buttons and anchors traditionally mean we are taking you to another location, right? Whereas like an input type submit or a button that's something that all the screen readers all know kinda of how to work with.
[00:05:20] But also miss things like an anchor has a onclick event built into it but it doesn't have the same onKeyDown functionality that a button would have. You know what I mean, so you kinda get into these. So it's like, and we actually have an example where we can turn a div into a fully accessible button if you wanted to.
[00:05:40] So there are always ways, like when we get into ARIA, a lot of what ARIA is is allowing you to kinda Give functionality to different elements. But yeah, I think I would always, if it all possible, using the right element is like the best place to start. So yeah, so we could go ahead as far as the buttons go like we could just go ahead and turn these into buttons.
[00:06:01] Okay, I don't wanna get too lost on the code. We could also turn this and an input type submit so people know that it's attached to the form that we're in. Another example of HTML giving you free. I can't think of the word but you know stuff that works like that so if you have it as a button tag that's not really right because then you're gonna need an onclick.
[00:06:23] Listener for the button that submits the form right? But really like an input type submit gives you all that functionality, you guys can like whatever. Functionality so like an input type submit all HTML know that when that thing is interacted with. Submit the form and what form that they're attached to so then the only difference there is it takes a value instead of having this stuff.
[00:06:47] So I could do something like that so we've got this div was changed into a button and this one was changed into input type submit so if I go back over here and I'm up in my form with my visual indicators. You're doing all that stuff and then I hit remember me and now I can cancel.
[00:07:07] It goes back to the top also I can hit submit. It's a little bit tough to see cuz it's blue but there is a visual indicator there going back and forth those two buttons. I'm so again like not to get lost in the weeds of code but just the kind of understand from a user's perspective that we took this form that could not be filled out before by keyboard only or screen reader user.
[00:07:26] And now have it up with minimal HTML changes able to be filled out. And yeah, the only other thing was those skip links which I had put in my slides but yeah, the basic idea you could do something like. You can stick it up at the very top here.
[00:07:42] You can do like a, and then it goes to you can kinda choose where you wanna to go to. I guess main ID main, maybe main give it a class or maybe an ID of skip link, and then give it to some tasks like skip to main navigation.
[00:08:04] Give it a closing tag, so now when I refresh, we'll see, actually we won't see. There it is at the very top, this link here and so now all we wanna do is just a little bit of CSS. So it is the first thing like if we refresh the page and then I hit Tab, you can see the focus comes around.
[00:08:22] So now we just wanna hide it unless it's focused basically. So we can go in our CSS and we could do something like grab ahold of that skip link and position absolute at top whatever I said like hide it by 50, put it in the top left corner.
[00:08:40] I don't know, give it some padding or something, we can see how this looks but, background: red; color: white; or something like that. So it's really obvious, so now, I think my server is little caching, hold on a second. If anybody has, I don't know why I'm running this on a server, I guess I could just open it up.
[00:08:59] But if anybody's running on a server, you might wanna watch out for [INAUDIBLE] caching. So now, the skip link's hidden but now we can see it all. So, the first tab, doesn't have it anything, So, now the last stop we need to do is just give it that focus selector.
[00:09:12] So, we do skip-link:focus and we give a top: 0; something like that restart my silly server again. I won't do anymore on the server, come on. What have I done? Sorry about that. So go in here and we can just give it some z index as many as we can, okay, cool.
[00:09:38] So now you have this page here and you hit tab on it and skip to main navigation, comes down and if you ignore it, it goes back away. And then, if you go ahead and hit it, it brings you the welcome to our first exercise. So that's the basic idea, there.
[00:09:50] Sorry the index thing was a little bit bumpy, but again, without getting caught in the weeds of the code. Just some things that you're starting to really communicate with users here and just making things a lot easier, yeah?
>> Speaker 3: Dave P, is saying the rule of thumb is for the A anchor tag to navigate to another page.
[00:10:10] Or within the page, and the button element tag is for doing something on the page.
>> Jon Kuperman: Yeah, anchors, exactly, you're moving you somewhere else. And then again, also- cuz it gets a little bit tricky with, single page websites still make sense to use an anchor cuz you are moving the location even though it's staying.
[00:10:32] So cool. So yeah, I think like Yeah, basically just kinda wanted to get everybody started with like tabbing around and experiencing some frustrations that might be there. And then some pretty easy solutions to them, cool.
>> Jon Kuperman: All right, so, again more things that we can kinda start checking off our list.
[00:10:53] Page Functionality, all Page Functionality is available using the keyboard unless it can't be done. So, you kind have, if you have like for example here, it's like a free hand drawing section like, that's not gonna be able to be done with the keyboard. But, anything as far as like inputting on a form, clicking links, all that kind of stuff.
[00:11:13] Keyboard focus is never locked or trapped at a particular page element We might cover that, we have like a whole section on keyboard tracts. But basically you should always be able to keep moving around on the page. And again, kind of like this triple a all page functionalities available using the keyboard.
[00:11:29] So I guess now might be a good time, there's a question right before we started the excercise about triple A. So basically, with all this accessibility stuff, there's three levels of compliance to it. Which you can see on my slides, and this is from the WebAIM.org, so there's Level A, Level A, Level AAA.
[00:11:48] Oftentimes, the second level of compliance is double A, but these are two. So it's basically like I can't get the word but, triple A means that it has A compliance, AA compliance and triple so, basically, it's like a list of things that build. So, like A compliance might be like, you know, all page functionality Values available is on the keyboard, unless it can't be reproduced.
[00:12:09] And as so, our site now is A compliant but if we had a drawing thing, it wouldn't be AAA compliant because AAA compliant means it's a harder one to achieve basically. So there's these three levels, A, AA, AAA each one includes all the requirements of the platform plus the new ones.
[00:12:25] And you can see all those on the webAIM's site, so then you can Depending on what you hit, be our site's AA compliant. It's not AAA compliant because we have this free hand drawing tool, which is important to our users, and we can't do that with a keyboard.
[00:12:38] Things like that does that make sense? I think somebody had asked on chat.