Create an accessible dropdown navigation

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey

Content Warning: This blog post contains gifs. Want to see this in action? I created a 6 minute video collection! Go To My Free Egghead Collection Hover navigations are pretty simple to do without JavaScript, which is how I usually see them implemented. The HTML and CSS are pretty simple. HTML: CSS: Note: I have used the visually-hidden styling instead of display: none . This is important for accessibility, and you can read more in the link above. I've taken out some of the general styling, but this CSS is what contributes to the hover effect. However, as you can see with the gif below, it doesn't work the same way if you use your tab key. Before we jump into coding, I wanted to share my approach to this problem. First, I want to solve the problem of opening the nav on not only…

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey