From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Improve accessibility of off-screen navigation

Improve accessibility of off-screen navigation - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Improve accessibility of off-screen navigation

“

- [Narrator] To finish off the menu, we need to add two more features and they both have to do with accessibility. The first one has to do with keyboard navigation. So if you listen closely, you can hear me tab through the different items on this view. That's the Skip to Content link. The next one is the Menu button and then here, I'm navigating inside the main menu. The problem is, you can't see what I'm doing right now. If you were using a screen reader, you would actually get the menu items read out to you. But I'm not using a screen reader, I'm looking at the screen. So right now I can't see the focus. Only when I tab past the menu do I get into the content I can actually see and hear my focus has shifted to the first card item. This is an accessibility problem for two reasons. The first one, if you are using a visual browser, you can't see what's going on and it seems as if the tab button isn't doing anything. The second problem is if you are using a screen reader and you want to…

Contents