Website Accessibility

Website Accessibility Exercise 1: Setting up an A11y Project

This course has been updated! We now recommend you take the Website Accessibility, v2 course.

Check out a free preview of the full Website Accessibility course:
The "Exercise 1: Setting up an A11y Project" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will on converting a page to create an accessible form and add a skip link for improved keyboard navigation.

Get Unlimited Access Now

Transcript from the "Exercise 1: Setting up an A11y Project" Lesson

>> Jon Kuperan: We're gonna get started with a little bit of interactivity. I always like to do my workshops with like a lot of interaction cuz I just feel like it sticks a lot better. So I have this project .bag A couple of things, so yeah one that I didn't cover is since accessibility is a really long word it often gets abbreviated as a11y or ally, it can be referred to.

[00:00:25] That was a small thing. The other one is that, so this project doesn't require any server or anything like that. So if you're not a Git user, you can just download it as a zip from that link, and it's just some HTML files. So you can just open the index.html with your browser, you don't need to have any terminal, nothing running.

[00:00:43] And also throughout these activities, there's gonna be challenges, but don't worry about an elegant, or like, functional programming solution to these challenges. We're really trying to focus on the user here, so jQuery's included on every page, and I would just like as you're working on it, just do whatever it to get working.

[00:01:02] And then also I always to encourage people to pair up and work together or do chit chat about things. If you go to the site, learn ally, download the zip or git clone it, you'll see a main index .HTML and you can open that up and it's got a page that looks like my slides, which is awesome.

[00:01:20] Anyway, and it's got an exercise on the very first one, keyboard navigation. And so these are the two things that we're gonna work on is that, we've got a form at the bottom which can't be submitted with a keyboard. So we're gonna try to look into why that is.

[00:01:34] And also there's no skip links so we're gonna try to implement that skip link concept that we talked about earlier.
>> Speaker 2: Another question.
>> Jon Kuperan: Yeah.
>> Speaker 2: Ben is asking, regarding focus event listeners in JavaScript, any opinions on which interactioned events should trigger form input validation and user feedback.

>> Jon Kuperan: Yeah. That's really good. So we have a form right? And we want to do some things like front end validation or any kind of feedback. There's a couple of approaches there. I think that one thing that you could do, it's interesting. So as far as feedback, I think it depends on what order you want it to come in.

[00:02:16] So if you have feedback that should be given before the user starts filling it out, like if it says name, but you really need first and last name, or something like that. I think doing an on focus would be good. That input element when it's focused.
>> Jon Kuperan: Say something.

[00:02:35] As far as validation goes, yeah, it's a little bit tricky. I mean you could do some form of validation on key up or something like that. You could even put it in a set time out, maybe. So as they're typing, you're validating or as they stop typing, you're validating.

[00:02:49] I think a common approach that I see is like a set time out that runs and is checking for when the user stops typing and does some validation. You could also do an on leave event, so when they leave that one, give them some validation. I think the thing I'd worry about with leaving is that it might be a little bit annoying, so you type in your name and then you go to the next one and it's like hey go back, it's telling you to go back up, so maybe the time out would be nice for that.

[00:03:13] I think it really depends on the use case. Is it a good piece of information for them to know before they go in? Another thing which we're gonna talk about in depth is some of the cool stuff you can do with aria labels which we'll get into later.

[00:03:25] But that might be a really good place to put a good idea of what's required of that form field, and what the validation is going to be. And a label that would get read by screen readers. So yeah. We'll cover a little bit of that, but I think, yeah.

[00:03:39] I guess if it's, if it's needed before you fill out ID, to put it into a label or in an unfocused event. And then I would probably just have a listener going for when they stop typing and do validation that way.