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?
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!
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! 💫