DEV Community

loading...

Discussion on: Fully accessible Menu components by headless UI tailwindcss

Collapse
inhuofficial profile image
InHuOfficial • Edited

Preword: this comment is not a reflection on your article, it is really well written and thought out, this is just a warning on believing things are accessible when they may not be!

"Fully Accessible"....the accessibility of this is questionable at best.

Why aren't they using an <ul> and <li> for the list of buttons so that screen readers that don't support role="menu" still get a count of options?

Why are they using role="none" on a div, when it has no role in the first place.

Why do they stop you tabbing out of the menu when it is open, that is not expected behaviour?

You should be able to cycle through all items that start with a letter (so if you press d it should go to "duplicate", pressing d again should go to "delete"), which it does not do, it stops at the first item (which can be very confusing).

Similarly if you are on the first menu item pressing up arrow should go to the last menu item. If the focus is on the last menu item pressing down arrow should move to the first menu item.

Anyway - there are probably other issues, by the time I found all of the above I had seen enough!

Oh and WAI-ARIA is your last resort, support is not as great as you may think, even for basic WAI-ARIA attributes, which is why semantics such as <ul> are so important!

Collapse
ceoshikhar profile image
Shikhar Sharma

Funny how the author didn't respond to you.

Collapse
inhuofficial profile image
InHuOfficial • Edited

Give them chance, I only wrote it yesterday afternoon 😜 hehe.

Plus as I tried to make clear it isn’t the authors fault at all, these libraries get touted as accessible, and accessibility requires a depth of knowledge that takes a long time to develop, so most developers have to believe what they are told.

I was just pointing out that most of these “accessible” libraries aren’t and people should be careful!

The fact the author cares about accessibility at all is a big step in the right direction!

Collapse
youhan profile image
Alireza Jahandideh

Author is just re-presenting the docs.

Forem Open with the Forem app