Keyboard Accessibility 101: Basics You Can’t Ignore

Join Natalie Garza and Natalie MacLees on the AAArdvark Accessibility Podcast as they discuss the importance of keyboard accessibility in web design. The episode highlights why some users rely on keyboards instead of mice or touchscreens and provides key insights and practical tips for ensuring websites are fully navigable via keyboard. Topics covered include the importance of using semantic HTML, testing custom components thoroughly, and understanding native keyboard interactions.

Natalie Garza: Hello everybody, and welcome to the AAArdvark Accessibility Podcast. I’m Natalie Garza, I’m one of the co-hosts, and with me today is,

Natalie MacLees: Natalie MacLees, the other co-host.

Natalie Garza: and she is a digital accessibility expert here to answer our questions on today’s topic, which is keyboard accessibility 101, the basics you can’t ignore.

So we’re gonna talk about why keyboard accessibility is important and some key notes on when you’re testing for keyboard navigation on your website.

Why Keyboard Accessibility Matters

So why doesn’t everyone just use a mouse or tap on their phones to navigate a website? Why keyboards?

Natalie MacLees: Well, not everybody can do that. Not everybody has hands. Not everybody has hands that they can move. So we have lots of different cases where people aren’t able to use a mouse or a touchscreen reliably.

So sometimes it’s limited mobility. Sometimes it can be cognitive disorders or fine motor control issues. Like you can move your hand, but you don’t have a lot of control over exactly where it goes.

If you have no vision or limited vision, you can’t see where a mouse cursor is on a screen and you can’t tell where to tap on a touch screen so you don’t have any other option other than to use a keyboard to navigate around the screen, and also sometimes just power users don’t wanna move their hand off the keyboard.

They’re going too fast. They’re setting their keyboard on fire, just going through too fast. No time to move your hand over to the mouse.

Natalie Garza: Yeah. Even everyday users like you use Control-C, Control-V to copy/paste. I’m sure a lot of people do. That’s a form of keyboard navigation too.

Natalie MacLees: Yeah, which, you know, you could do that with your mouse. You could right-click with your mouse and say copy and paste, but you could also do it with your keyboard. So anything you can do with a mouse, you can do with a keyboard.

Natalie Garza: And a lot of assistive devices, although they don’t look like keyboards, they fall under the same category as keyboards.

Natalie MacLees: They get treated as a keyboard by the computer. Yeah. As far as the computer is concerned, it’s a keyboard that’s attached. The computer can’t tell the difference.

Natalie Garza: Exactly. Alright, so that’s why keyboard and navigation are so important.

Ensuring Keyboard Accessibility on Your Website

So how do we translate that into our website? How can we make sure that people using only keyboards can access everything on a site?

Natalie MacLees: Yeah, we have to make sure that we’re not building anything that only works with a mouse. And where that usually happens is when we’re building custom components and not using semantic HTML. So the easiest fix is to just always use semantic HTML.

Whenever you can, you wanna try to do that, and HTML has gotten to be a lot more robust, a lot more powerf...