Hacker News new | ask | show | jobs
by lol768 1321 days ago
Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/check...) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper <input type="checkbox"> elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.
3 comments

It's kinda dangerous for the webpage to include the checkbox code to be copied as this. It's commercial product and from seeing tailwind public relations they are super stingy about it.
Looks like it needs javascript though.

Doesn't work for me on chrome mobile without JS.

Javascript is actually great for accessibility, it’s really hard to properly implement WAI-ARIA without it. Most people with screen readers will have js enabled too.
The main reason I can think of is trapping input inside a modal dialog when it's required.

Browsers recently rushed the dialog element and still have no easy solution for this.

Those are pictures. Not actual demos.
Tailwind is one of the vanishingly few css frameworks/css utility collections/css design systems that is really, really good about keeping semantic meaning of things and accessibilty intact, and whose examples show how to implement them correctly.

Almost everyone else is "screw this, we're going to use links as buttons and divs as lists".

Bootstrap has been pushing accessibility since v4, I believe.
What framework uses divs as lists without accessibility hints? I can't think of, or find, a major one that does.
You will not believe this, but it's called Semantic UI: https://semantic-ui.com/elements/list.html
Look at that.. My god. Point conceded.