There are still a few a11ythings to consider.
You don't need to utilize the checkbox hack for the accordion, there's a tag for that: /.
When you use the checkbox hack, the input comes up in the form controls pane of screenreaders, where it doesn't really belong.
You didn't escape or wrap your tags properly, so we can't see the tag you tried to tell us. From my experience, I guess they are <details> and <summary>.
Focus then arrow keys. Trouble is that there's no visible focus indicator. I seem to remember trying an implementation like this a while back but it didn't quite work right if JAWS was running.
I've tried to do something similar to the star rating, with the keyboard navigation and accessibility in mind.
It's not ideal but it tries to take into account accessibility and keyboard navigation as far as possible.
Markup is semantic, but you can add aria tags according to your use case. These examples also work with basic keyboard navigation.
There are still a few a11ythings to consider.
You don't need to utilize the checkbox hack for the accordion, there's a tag for that: /.
When you use the checkbox hack, the input comes up in the form controls pane of screenreaders, where it doesn't really belong.
Also, giving an an empty href lets browsers consider it as a navigational element, where your example behaves like a button. The contents of a modal will also never be tab-able. The semantic tag for a modal would be , but I wouldn't know how to toggle that without js. I can't really think of a pure css solution that considers these points, though.
You didn't escape or wrap your tags properly, so we can't see the tag you tried to tell us. From my experience, I guess they are
<details>and<summary>.How do you operate the star rating with the keyboard?
Focus then arrow keys. Trouble is that there's no visible focus indicator. I seem to remember trying an implementation like this a while back but it didn't quite work right if JAWS was running.
I've tried to do something similar to the star rating, with the keyboard navigation and accessibility in mind.
It's not ideal but it tries to take into account accessibility and keyboard navigation as far as possible.
Code Example