4 ms·
> annotate using the minimum of JS to set the minimum of ARIA attributes that clearly improve accessibility Yes, like aria-expanded="true" on a <button> that o
by extra88 5y ago
> annotate using the minimum of JS to set the minimum of ARIA attributes that clearly improve accessibility
Yes, like aria-expanded="true" on a <button> that opens a custom disclosure widget instead of using the CSS-only :checked ~ .foo hack I was responding to. The actual hiding/revealing of the related content can still be done with CSS alone using [aria-expanded="true"].
Here's a bunch of checkbox hack examples [0]. The custom radio buttons and checkboxes and the push toggles are fine (the use-case is fine, I didn't closely examine everything about the implementations), the rest should be done some other way that probably involves buttons with JavaScript.
[0] https://css-tricks.com/the-checkbox-hack/ https://css-tricks.com/the-checkbox-hack/
- runarberg 5y agoCustom radio buttons and checkboxes are remarkably easy if you style the <input> it self using `appearance: none`. With multiple background images and masks there is really no need for a complicated sibling selectors and <label> setup: <label> <input type="checkbox"> <span class="label">Some label</span> </label> input[type="checkbox"] { appearance: none; /* ... */ } input[type="checkbox"]:checked { /* ... */ } input[type="checkbox"]:indeterminate { /* ... */ } input[type="checkbox"]:disabled { /* ... */ }
- extra88 5y agoThat's good to keep in mind. No IE support for `appearance` but it can be used in such a way that it's just a more ordinary input in that browser. There are still more things you can do within a label. This is a good article on improving methods of visually hiding the actual inputs. https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/ https://www.sarasoueidan.com/blog/inclusively-hiding-and-sty...