From the course: React: Accessibility

Unlock the full course today

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

Solution: Implementing focus and skipping content

Solution: Implementing focus and skipping content - React.js Tutorial

From the course: React: Accessibility

Start my 1-month free trial

Solution: Implementing focus and skipping content

“

(upbeat music) - [Instructor] Here's just one sample solution for this challenge. In my navigation component on line 12 I added another anchor tag, gave it the href of learn more and a class name of skip link. In the learn more component, I was sure to add an ID of learn more also so that that anchor can target this section. In the CSS file for the navigation I added the skip link class and a key value pair of transform with translate to hide it off screen and a transition for the transform also. Once the skip link is focused on, the transform we'll bring the link on screen. Let's take a look at this implemented. As I start to tap through the page you can see that the skip navigation link comes on screen. If I continue to tab through the page, it disappears. Let's return to that skip navigation link and hit Enter. You can see that it brought me down to the learn more section, and that's it.

Contents