Check out a free preview of the full Website Accessibility, v2 course

The "Focus Management Q&A" Lesson is part of the full, Website Accessibility, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jon answers student questions regarding how to make a notification sound play, how to get started with an existing code base, and how to find where to put aria tags and alt tags.


Transcript from the "Focus Management Q&A" Lesson

>> ARIA live, is there any way to have a sound play? I, there is I just don't think there's anything that ARIA would do to help. So I think that trying to think of the best way to do it. Like basically, I think you would just have to do it with JavaScript and with some kind of Audio API.

So you could like Listen for a change event on the container you can make a sound at that point which I actually think would be really cool. I'm pretty sure Facebook does that. I think if you have like your sound on and you get a notification. I'm not sure if they do it, but for sure like some chat applications do it where when something comes in, you get a notification sound.

So yeah, you there definitely is you could set up like a watcher on that. And then Trigger some kind of audio, but not with the ARIA spec. There's no way to do it with that. Yeah, that's a really good question. So yeah, if you have an existing code base, yeah, like sort of how do you get started?

What's the best practice to get started with things? I do think that, there's a few different approaches, like I think that one. And we'll get into tooling in the next [COUGH] segment. But for example, Chrome Dev Tools, inside lighthouse, there's an accessibility order. So like one place I might get started is just doing that order which will give you a very high level view of some of the bigger things.

And then turning those into tickets and working on them. For sure, like the question mentioned a few specific things like looking for ARIA tags or alt text, or things like that. For that I would recommend setting up a linter for it if possible. So like es lint has some accessibility plugins and react, and angular both have accessibility plugins.

So have you set that up then in your editor as you're working on new files, it would just flag those. And be like, hey, this image doesn't have all text or like, hey this modal doesn't have, has popped up on it. So maybe coming at it from both of those approaches at a basic linter and then also maybe manually do a lighthouse run and.

Make some tickets out of that. And then kind of as it evolved. I think with a lot of those things, especially in big code bases, like it's just not feasible to do like a gigantic refactor of your whole code base. So with a thing like the linter, it's only maybe going to flag on files changed, or whatever.

So kind of setting up a culture of like, hey, when you're in a file, fix any things that are there. I'm creating new components going forward try to adhere to these rules. So, yeah I think those would be two kind of good approaches for it. There's depending on your company and their budget.

There's like really nice resources that I'll link to in a little bit that do accessibility audits for you. They'll give you like a big spreadsheet of all the things, but I think starting out the lighthouse running a linter is really good first step.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now