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...
For further actions, you may consider blocking this person and/or reporting abuse
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:
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?
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!Ah, true! Thank you for your answer and your post. I just saw your website — it's amazing! The styling, the content!
Thank you so much! 💫
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.
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 🤣
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!
Excellent, and thanks for your support! 🌟
As Always Steph, excellent work here thank you for the deep dives.
Thanks for your support, John! It's great to know folks find them useful 😊
You're #1 in my book of CSS contacts!
Awesome !
Thanks so much for your job!!!
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.
Thanks for the feedback and I’m so glad it worked for you 🙌
I loved that hover intent trick! Will definitely keep it in mind
I re-sensitized myself to it now when I visit other sites that don't consider it 🤣
That font is lovely ;)
Hello @5t3ph , and the responsive menu in the mobile phone? I have a lot of items.