Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Improve Keyboard Accessibility of Submenu Navigations using CSS

    Lindsey KopaczLindsey Kopacz
    cssCSS
    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

    Code

    Code

    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
    Discuss

    Discuss