DEV Community

Accessibility first: DropDown (Select)

Andrew Bone on March 07, 2019

For a while, I've been musing over how to take the un-customisable select element and make an accessible, jQuery-esc select menu. Of course if you ...

Read full post

Ben Sinclair • Mar 10 '19

I like the way you're using details and radio to make this work. I've gone with replacing the select with radios and styling it up before, but this is better. At first I didn't think it felt semantically correct, but after a little bit of thought I've changed my mind.
I really like enhancing details as a dialog box though, that's cool.

Andrew Bone • Mar 10 '19

Thanks, I like trying to think of ways to move simple JavaScript actions over to native HTML. I really love this stuff 😁

jhfisherSB • Mar 31 '19

Very interesting article!!

this.container.addEventListener('keyup', e => {
[...]
case 40: // DOWN
[...]
this.setChecked(this.options[current <= this.options.length ? current + 1 : this.options.length - 1].querySelector('input'));
[...]

should be either

this.setChecked(this.options[current + 1 < this.options.length ? current + 1 : this.options.length - 1].querySelector('input'));

this.setChecked(this.options[current < this.options.length -1 ? current + 1 : this.options.length - 1].querySelector('input'));

Otherwise a TypeError occurs when the last option is already active and the "down" button is pressed.

cheddar • Mar 12 '19

Appreciate the concept for this! But it doesn't work with VoiceOver on Mac and not functional at all on Edge. Seems worthless.

Andrew Bone • Mar 13 '19

There was a big glaring bug that was making it work less than ideally anyway, which is now fixed, I've also added an aria-label to make the voice-over line up with combo-boxes.

Andrew Bone • Mar 12 '19

I'll look into voiceover not working, that means I've made a mistake.

As for no Edge support, that's true but Edge will be moving over to the Blink engine 'soon' at which point it will work 🙂

benjarlett • Jul 27 '22 • Edited

I was gonna use this, but the no voiceover thing stopped me. I see details should be happy on edge looking on caniuse.com

Andrew Bone • Jul 27 '22

Yep, edge is now chrome based so has all chrome's capabilities. Also I fixed the voice over issue back then and updated the post 🙂

Andrew Bone • Mar 7 '19

Ping @emmawedekind 🙂

Andrew Bone • Mar 8 '19

Here's a preview of something else I'm working on, it's based what I learnt with this project 😀

Debove Christopher • Mar 13 '19

I just liked how you did it. But it seems to not be compatible on IE, did you know that? And how would you do it for this browser?

Andrew Bone • Mar 13 '19

<details> doesn't work with either IE or Edge, Edge will soon support it though. As for IE, it is possible to polyfill the features in but generally, I wouldn't support IE.