search

filiph / edgehead

MOVED:
https://github.com/filiph/egamebook
44 stars 3 forks source link

[Accessibility] Choice buttons should be keyboard accessible #9

Open citelao opened 6 years ago

citelao commented 6 years ago

This is similar to #2.

Repro

The choice buttons cannot be accessed with keyboard 😞!

Potential mitigations

Buttons should really be <button>s.

If they can't be, tagging them with a role="button" is awesome—but you should also give them a tabindex="0" so they can receive keyboard focus. When they are disabled, they need aria-disabled="true" and a tabindex="-1".

With real <button>s, though, you get this all for free! Just add the disabled attribute when they're disabled. This would fix #2 as well 😁

citelao commented 6 years ago

See also http://html5doctor.com/on-html-belts-and-aria-braces/

You'll probably also want to extract help text into a different button. They can still be stylistically grouped.

In this case, I would probably show the help text by default (using aria-describedby to link the information) and then stop showing it on new moves once the user understands it. This is so that users don't have to tab twice to get to the options they like. You might also consider binding up and down arrows to move focus between choices.