Hacker News Reader

Comment by FrontAid | Hacker News Reader

Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression.

Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.

View on HN

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.

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

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.

Bootstrap has been pushing accessibility since v4, I believe.

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.

This seems more like a gallery of art/starting point than a "use this as-is", so I'm sad to see this comment on the top of HN since as a show of what can be accomplished with checkboxes it's amazing.

We front-end devs would benefit from a lot more works of art like this, and then people trying to implement them into real systems would need to make them accessible. Similar to how we benefit greatly from Dribbble. If we don't allow for unrestricted just artistic bits like this, then creativity suffers.

Counterargument to myself: the click to copy though makes it seem like it's ready to use, and many newer devs would just use them straight away. It's on the hands of more senior devs to tell them that these snippets, similarly to many StackOverflow ones, need to be adapted to integrate in an actual app for things like accessibility, uniformity, etc.

I agree with the sentiment but there are problems besides accessibility here:

1. Crosses and squares being used instead of check marks.

2. Circles being used as containers instead of boxes.

3. Toggle switches being presented as checkboxes.

Maybe 5-10 of these are good inspiration for checkboxes.

I am so sad anyone can look at this amazing resource and with a straight face say that only 10% of it is valid as an inspiration. It's a magnificent source of inspiration! Sure some are not perfect, but that doesn't detract from the overall goal.

They're fine.

In other news:

Nuclear power plant steering group improves reactor proposal! Committee stalls debating shade of yellow to be used for lines in parking lot.

Naming element types by their style or form (box) rather than features in an implementation that encourages separating style leads to a more general problem.

Incidentally most of them _are_ focusable by the keyboard but just aren't tabbable.

I'm using a Chrome plugin Vimium - one of the shortcuts 'f' (documented as opening links) actually highlights all focusable elements. Using this feature shows most of the checkboxes are interactive.

Edit: I guess the reason for me pointing this out is hopefully there's an easy way to make these more accessible for keyboard users.

Good point. Indeed looks like only a few have. I'll try to add focus styles to all of them in the future. Thanks!

And if you use React, the react-aria library is excellent for this. See e.g. the useCheckbox hook: https://react-spectrum.adobe.com/react-aria/useCheckbox.html

Though if your "checkbox" is to take effect immediately, consider using a toggle button: https://react-spectrum.adobe.com/react-aria/useToggleButton....

Came to the comments to note the same. And to add that several has very poor color contrast.

They look great, but I would warn developers to use them as inspiration but not as-is.

How amazing it would be if we could style checkboxes using CSS and not have to replace them with images.

Reply on news.ycombinator.com