From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Improve accessibility of off-screen navigation - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Different off-screen navigation options2m 7s
-
(Locked)
Off-screen to cover navigation overview2m 43s
-
(Locked)
Set up the main grid3m 36s
-
(Locked)
Position the navigation area on the grid4m 15s
-
(Locked)
Hide the navigation area off canvas1m 50s
-
(Locked)
Create a reveal effect using JavaScript3m 45s
-
(Locked)
Improve accessibility of off-screen navigation3m
-
(Locked)
Overview of sliding navigation panel1m 15s
-
(Locked)
Create an overflowing grid3m 30s
-
(Locked)
Slide content in and out of the canvas4m 7s
-
(Locked)
Bonus: Animate the sliding effect6m 53s
-
(Locked)
-
-