Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Improve Keyboard Accessibility of Submenu Navigations using CSS

    Lindsey KopaczLindsey Kopacz
    htmlHTML 5

    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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 0:00 Here, we have a navigation. When you hover over this navigation item, you'll see that the submenu appears. However, when you tab to them, so tab, tab, it doesn't open.

    0:14 Let's quickly go over the html. We have a