DEV Community


Discussion on: You can create these elements without JavaScript

tirthaguha profile image
Tirtha Guha

Would these be accessible, with semantic markup and aria attributes? Sorry, posting from mobile, so can't verify.

adrianbdesigns profile image
Adrian Bece Author

Markup is semantic, but you can add aria tags according to your use case. These examples also work with basic keyboard navigation.

iamschulz profile image
I am Schulz

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.

Thread Thread
khuongduybui profile image
Duy K. Bui

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>.

simevidas profile image
Šime Vidas

How do you operate the star rating with the keyboard?

Thread Thread
cattjames profile image
James Catt

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.

Thread Thread
konrud profile image
Konstantin Rouda

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