DEV Community

Cover image for CSS-Only Accessible Dropdown Navigation Menu

CSS-Only Accessible Dropdown Navigation Menu

Stephanie Eckles on April 23, 2020

This is the seventh post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend deve...
Collapse
 
sylwiavargas profile image
Sylwia Vargas

I love your post — thank you! I really think everyone should be designing with accessibility in mind.
I listened to Chance Strickland's talk "Thar Be Dragons: Rebuilding Native UIs on the Web" at this year's MagnoliaJS conference and he spoke exactly about rebuilding dropdowns and how to make them accessible. One of the features he mentioned was that when using keyboard navigation, you should be able to:

  • use arrows to select the item from the dropdown;
  • type the letters (in case the dropdown is long) and it should only feature the items you need (e.g. "pa" should give me the options say "pastry" and "paprika")

These features are not available on your page — as soon as I select the dropdown with the keyboard, if I want to use keyboard navigation, the whole page scrolls down unless I use "tab" but that's counterintuitive. Would it be possible to include the arrows or dynamic typing?

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks! I think this may be two different types of dropdown intent - my example here is intended for lists of links which is a pretty anticipated pattern using semantic HTML, whereas you may be referring to rebuilding form dropdowns perhaps in JS in which case what you've noted is absolutely correct. For navigating links on a page, tabbing is expected as the keyboard interaction. This is also navigable via VoiceOver in expected ways - announced as a nav landmark, and the example noted where the list items refers to the list title via aria-labelledby. An important distinction, thanks for bringing it up!

Collapse
 
sylwiavargas profile image
Sylwia Vargas

Ah, true! Thank you for your answer and your post. I just saw your website — it's amazing! The styling, the content!

Thread Thread
 
5t3ph profile image
Stephanie Eckles

Thank you so much! 💫

Collapse
 
hamstu profile image
Hamish Macpherson

Wow Stephanie! This is so awesome I don't even know where to start. Way to go! 👏I love the hit of nostalgia this gave me too with the bits about IE7 (* shudders involuntarily *) and hoverIntent!

Keep up the great work.

Collapse
 
5t3ph profile image
Stephanie Eckles

You are too kind! 😊 It was fun to make, probably the best example so far of how much CSS has improved over the years. I'm glad someone out there can share my IE7 pain 🤣

Collapse
 
victorekpodecodedigital profile image
victorekpo-decodedigital

Awesome !

Collapse
 
jwp profile image
John Peters

As Always Steph, excellent work here thank you for the deep dives.

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks for your support, John! It's great to know folks find them useful 😊

Collapse
 
jwp profile image
John Peters

You're #1 in my book of CSS contacts!

Collapse
 
katiekatsup profile image
kat

Oh wow this is awesome. Recently needing to build an accessible, super lightweight drop down this is really handy! 😄 Will make sure to checkout the rest of your series too!

Collapse
 
5t3ph profile image
Stephanie Eckles

Excellent, and thanks for your support! 🌟

Collapse
 
feministclickback profile image
tina

I LOVE this post. Thank you! It's great to find developers who put accessibility first. I used this to create a language switcher for my site and it works like a charm.

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks for the feedback and I’m so glad it worked for you 🙌

Collapse
 
voluntadpear profile image
Guillermo Peralta Scura

I loved that hover intent trick! Will definitely keep it in mind

Collapse
 
5t3ph profile image
Stephanie Eckles

I re-sensitized myself to it now when I visit other sites that don't consider it 🤣

Collapse
 
modibodilika profile image
Modibo Sissoko

Thanks so much for your job!!!

Collapse
 
madza profile image
Madza • Edited

That font is lovely ;)

Collapse
 
gusbemacbe profile image
Gustavo Benedetto Conti Papi

Hello @5t3ph , and the responsive menu in the mobile phone? I have a lot of items.