 So with the site mostly done from a visual point of view, I wanted to go back and take a look at accessibility. Now, I'm not an accessibility expert. I know it much less than I understand other things, like performance or CSS or whatever. So I wanted to show it because it's a journey I'm going on to improve my understanding in this area. And so I at least wanted to show you the changes that I made or at least kind of how I checked some of the changes that I made on the site. So on screen, I have I'm going to enable voiceover. Welcome to OS 10. Voiceover is on. System preferences, accessibility, window, help button. OK. It's definitely on because it's talking at me, which is kind of what you'd hope would be. You're currently on the button. To click this button, press Control, Option, Space. OK. I don't want to do anything. Don't talk. I'm talking. I'm talking. You don't talk. Stop it. OK. What I'm going to do is I'm going to dive into the page. And then this is before I made my changes. OK. All right. Chrome, Chrome Dev Summit, 2016, window, footer, visited link. Chrome Dev Summit. OK. It'll talk again. It has the thing about talking. You are currently on a link inside of a banner. To click this link, press Control, Option, Space. The help tag is go to home page. OK. Go to home page. Seems like a good thing. OK. So to keep this video brief, I'm just going to kind of show only a couple of changes that I've made. But you can extrapolate that I've made changes to all the templates around the site off the back of this all being well. Let me see if I got this right. Navigation for items. Oh, no, this is the old build. Oh, dear. Let's have a look. System term, NPM run build. Chrome, Chrome Dev Summit, 201, banner, three items. Visited link. Chrome Dev Summit, list four items. Schedule list. OK. This is the old one. Right. Yep. I know you're going to talk. I'm going to go across to the list. List four items. Now it's not a list. This is the thing. It's actually a nav. You are currently on the list inside of a banner. See, I'm not. I'm not. I'm in a navigation. Admittedly, inside of a banner, I'll take that. So that's one thing that isn't right. And actually, when we look at the source code in a moment, in fact, let me just switch off. No, I'll show you the other bit as well. We can use it's like control left, right arrows to kind of skip through elements. Visited. End of list. End of list, OK. Visited link. Watch the live stream now. Seemed good. End of back. Heading level one. Chrome Dev Summit. Also seems good. Complimentary one item. Not a complimentary. Connect with Chrome engineers and other leading developers for a two-day exploration of building beautiful and performant experiences. Sounds good. End of complimentary. Not a complimentary. Visited link. Schedule take a look over the agenda. It feels like you should be giving me a little bit of a gap there like a full stop. Visited link. Code labs check out our step-by-step coding guides. Visited link. Location Chrome Dev Summit is at SFJAZZ. SFJAZZ. Not really. It's at SFJazz. And I understand why, screen reader. You are currently on a link inside of HTML content. To click this link, press Control, Option, Space. I can understand why a screen reader wouldn't understand that it's SFJazz. That it would think it's SFJAZZ or ZZ for me because English. So what I will do is I will temporarily switch off voiceover. Let's do that. System preferences. Stop it. Stop it. Oh, no, no, no, no, no. Stop it. OK. So there's a small chance it can be a little bit stressful when it's talking at you, especially when you're trying to record a video explaining. Yeah. Right, let me move the build on. I think the build I want is that one. Yeah, add labels and whatnot. And we'll do a fresh build. So now you can see when I do that. And let's see if the code is there as well. Let's go and find where would be a good place. I think the masthead is certainly one place. You can see that the masthead graphic, which is that SVG debacle. Let's call it what it is, the debacle that was, has an Aria label of now masthead. And then I've added this masthead image title. So that's going to be something that should hopefully be announced as well. Things like titles that's gone on as well. In the head, maybe, or in the header? Did I put it in the header? It's in the header. In the header. Or is it a head? Which one is it? Whoa, hang on. That's weird. Why are they saying the same thing? That's not the right thing. Or has it got itself confused? It might have got itself confused. OK, I'll tell you what we'll do. We'll just look at it in the source code of the page. That'll do it. Instead, we now have a nav called menu nav. And instead of there being a list, they're just divs. And because this is set to display flex, this is fine. They're individual items each with an anchor. I probably don't even need the divs, actually. I might just remove those and put the class straight onto the anchor. That would probably be even tidier, less markup. I might just do that today, in fact. What an idea. And then here's another little thing that I did, which I just want to show. Here, this is after a chat with, let me zoom in. After a chat with Jake Archibald, my colleague, hopefully many of you know Jake. If you don't, he's one of my colleagues. I said that. So now Chrome Dev Summit is at SF and then Jazz in lowercase. And then this in between it, you might be thinking, what on earth is that? The answer is it's the Unicode character for a non-visible space. So that it renders as SFJazz together, but it's actually pronounced as SFJazz. So we're kind of doing the visual thing as well as the screen reader thing. And then I use a CSSText to transform to bring that all to uppercase, which is why it's wrapped in a span you see. That will do the trick. Now with that said, I can now switch on voiceover once more. It's going to talk at us again. Welcome to OS 10. Voiceover is on. System preferences, accessibility, window, help button. OK. And we'll start hopefully at the top again. Schedule, select visited link. Chrome Dev Summit, banner three, navigation four items. Navigation four items, better. Visited link, visited link. Location, end of navigation. Visited link, watch the live stream now. End of banner, heading level one. And? Mask head, Darren Fisher delivering the keynote at Chrome Dev Summit 2015. Image. I would have said 2015, but whatever. Connect with Chrome engineers and other leading developers for a two-day explore. Yep. Visited link, schedule. Take a look over the agenda. That's because I used an after there to put a full stop in. Visited link, code labs. Check out our step-by-step coding guides. And that after has an opacity of zero and? Visited link, location. Chrome Dev Summit at SFJazz. Yes. Visual system preferences. Right. So basically, that's what I've been doing is I've been going through making sure that there's tab focus. And when you tab between things or you use the focus shifting in Voiceover, I'm not even sure what that's properly called. That it announces the things that I expect it to announce in the way that I would expect them to be announced. So most of the time, it's a case of putting titles on things or alts on images, or things like the Masked head where there isn't a, like I'm using multiple elements to kind of achieve the effect or whatever. I'm having to use ARIA role or just role equals image, for example. And then ARIA label equals. And then what I would put in an alt text should it have been an image. The other thing, let me just see if I can switch it on quickly. If not, I will show you how one does it. Yeah, so it's not switched on on here. So let's go to Chrome Flags and Developer Tools Experiments. We'll enable that. Re-launch. And now, inside of the DevTools settings, we have the Experiments. And there's an Accessibility Inspection. And it is always worth pointing out that these Experiments could be dangerous and, but let's make that bigger. They could. They could be dangerous and may require restart. And they could cause other issues. So switch them on at your own peril. But anyway, it'll switch on the Accessibility Inspection. And then let's take our inspect here. And there's now an Accessibility tab down here. And you can see the name, which is location. Chrome Dev Summit is at SFJazz, Contents, and what its role is. So you can very quickly, if you just want to check without actually switching on a screen reader or anything like that, you can have a do with that and switch that on and play around with that. And hopefully it will tell you all the right kinds of things or your labels. And we'll just try that on the Mast Head. Let's see. I think it's on Mast Head itself, maybe? Well, maybe the Mast Head graphic. Mast Head graphic. There we are. Role of image and area label of what we'd expect. And as you can see, it bears out that when I actually use at least voiceover anyway, that I'm getting the right kinds of things. And now it's still more work to do in this area, because the side nav I'll need to put on inert. And if you've not heard of inert, we will link to Rob Dodson's inert polyfill AliCasts, which you should definitely watch. It's a very straightforward way of saying, this thing is not visible right now. And I'll probably need that if I'm going to do a sliding in and outside nav. In fact, he actually talks about a previous side nav I built in that episode. And also, I need to find a way of making sure that the tab focus is sort of locked into the side nav when it's out, because it's kind of like a modal. Anyway, all that and more, you'll discover if you watch AliCasts. So as always, check out the code on GitHub. You can say hello to me in the comments. I've been responding to a lot. If I've missed your comment, I'm very sorry. Keep trying. You can say hello to me on Twitter at Aero Twist. And I will, of course, see you in the next entry. Yes, that's when I'll be back. Brilliant. Have a good day.