CSS checkbox examples • Hacker News Board

Re: CSS checkbox examples

#31

Post by lopis » Tue, Nov 01, 2022, 10:18 AM UTC

FrontAid wrote: post #13

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.

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.

Re: CSS checkbox examples

#32

Post by [deleted] » Tue, Nov 01, 2022, 10:24 AM UTC

guivr wrote: post #15

FrontAid wrote: post #13

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.

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

[deleted]

Re: CSS checkbox examples

#33

Post by rollulus » Tue, Nov 01, 2022, 10:26 AM UTC

How did it become normal in software to refer to describe your own work as beautiful?

Re: CSS checkbox examples

#34

Post by franciscop » Tue, Nov 01, 2022, 10:27 AM UTC

FrontAid wrote: post #13

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.

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.

Re: CSS checkbox examples

#35

Post by quickthrower2 » Tue, Nov 01, 2022, 10:27 AM UTC

It is missing this one https://www.andy.works/words/the-most-satisfying-checkbox

Re: CSS checkbox examples

#36

Post by flurdy » Tue, Nov 01, 2022, 10:28 AM UTC

Number 44 has issues internationally as it toggles between a tick and a cross.

I now live in a country which uses ticks to check a box, but I grew up in a country that uses crosses to check a box and had no idea what a tick was until I moved here.

Re: CSS checkbox examples

#37

Post by quickthrower2 » Tue, Nov 01, 2022, 10:28 AM UTC

rollulus wrote: post #33

How did it become normal in software to refer to describe your own work as beautiful?

The work here is just curation. The checkboxes were made by other people.

Re: CSS checkbox examples

#38

Post by amsterdorn » Tue, Nov 01, 2022, 10:29 AM UTC

No real-world application will sacrifice function for form. The web is an accessible platform, not a "beautiful" one.

Re: CSS checkbox examples

#39

Post by alpaca128 » Tue, Nov 01, 2022, 10:47 AM UTC

amsterdorn wrote: post #38

No real-world application will sacrifice function for form. The web is an accessible platform, not a "beautiful" one.

I'm not sure we use the same web. "Accessible" or "function over form" are the exact opposite of how I'd describe it.

Re: CSS checkbox examples

#40

Post by omnimus » Tue, Nov 01, 2022, 10:57 AM UTC

lol768 wrote: post #29

FrontAid wrote: post #13

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.

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 elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.

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.