Improve Keyboard Accessibility of Submenu Navigations using CSS

InstructorLindsey Kopacz

Share this video with your friends

Send Tweet

In this lesson, we are going to use the :focus-within pseudo class as a CSS only way improve the accessibility of a navigation menu.

If I were to use :focus on the <li>, it wouldn't work because the list items have a tabindex of -1.

:focus-within represents an element that has received focus or contains an element that has received focus. So when it's child, the anchor, receives focus, we can use the same thing that we do on the hover effect. Be wary of browser support though!

If you have to support IE and Edge check out my other lessons: Expand a Menu on a Focus Event to Improve Accessibility and Collapse a Submenu on the Blur Event to Improve accessibility