4 ms·

Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/checkboxes https://tailwindui.com/components/application-ui/forms/check...) are

by lol768 4y ago

Tailwind UI's checkboxes (https://tailwindui.com/components/application-ui/forms/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.

dmitriid 4y ago
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".
- miiiiiike 4y ago
  What framework uses divs as lists without accessibility hints? I can't think of, or find, a major one that does.
  - dmitriid 4y ago
    You will not believe this, but it's called Semantic UI: https://semantic-ui.com/elements/list.html https://semantic-ui.com/elements/list.html
    - miiiiiike 4y ago
      Look at that.. My god. Point conceded.
- addandsubtract 4y ago
  Bootstrap has been pushing accessibility since v4, I believe.
omnimus 4y ago
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.
rudasn 4y ago
Looks like it needs javascript though. Doesn't work for me on chrome mobile without JS.
- mpeg 4y ago
  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.
  - dmitriid 4y ago
    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.
- XzAeRosho 4y ago
  Those are pictures. Not actual demos.

by lol768 4y ago

dmitriid 4y ago

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

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

omnimus 4y ago

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.

rudasn 4y ago

Looks like it needs javascript though. Doesn't work for me on chrome mobile without JS.

mpeg 4y ago
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.
- dmitriid 4y ago
  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.
XzAeRosho 4y ago
Those are pictures. Not actual demos.