Ancestors

Toot

Written by Richard Rutter on 2025-01-18 at 18:32

What I learned by creating a dark mode toggle https://clagnut.com/blog/2437 #css #design #typography

=> More informations about this toot | More toots from Richr@mastodon.social

Descendants

Written by Luke Dorny on 2025-01-18 at 18:38

@Richr wow, great write up. Will add it to my list of best ways to do this task.

=> More informations about this toot | More toots from Luke@typo.social

Written by Richard Rutter on 2025-01-18 at 23:03

@Luke thanks Luke. file it under possible ways to achieve this task. I doubt it's the best, but I certainly learned a surprising amount. Including that reduction in font weight of 15%, which was a lot more than I expected.

=> More informations about this toot | More toots from Richr@mastodon.social

Written by Luke Dorny on 2025-01-19 at 03:49

@Richr Always givin' back, arn'tcha, buddy? Respect.

=> More informations about this toot | More toots from Luke@typo.social

Written by Myles Lewando on 2025-01-18 at 19:11

@Richr Great article! I recently added a light/dark mode toggle to my website using a checkbox and CSS icons, but I might revisit it after reading this.

=> More informations about this toot | More toots from codemacabre@social.coop

Written by Curtis Wilcox on 2025-01-18 at 21:03

@Richr

When I try VoiceOver for Mac (14.7.1, Safari 18.2) with implicit , the SVG's provides the radio button's name, no problem. However, there are known problems with implicit labelling and voice control software so it's best to always use explicit labelling (for, id).

However in VoiceOver for iOS (18.2.1), the radio buttons are unnamed. This may be considered an iOS bug but it's solved by adding role="img" to each .

Alternately, use aria-labelledby to point to ids on the elements as an effective workaround (I'd still leave the explicit labelling in place, again for voice control). An advantage to this is you can then add aria-hidden="true" to each so they're not in the reading order, only the radio buttons are.

https://codepen.io/ccwilcox/pen/WbeKJBg?editors=1000

I would make focus styling for the SVGs more apparent so there's a clear difference between when they're selected (one always is) and when they're focused and selected.

=> More informations about this toot | More toots from cwilcox808@c.im

Written by Curtis Wilcox on 2025-01-18 at 21:07

@Richr

A downside to using radio buttons instead of s is when navigating by keyboard, focusing a radio also activates it (I consider this a mistake from when HTML forms were originally made but now we're stuck with it).

Keyboard navigating from System to Dark requires temporarily activating the Light theme. I'd consider enabling Light mode when one wants Dark more jarring than the reverse so changing the radio order to System, Dark, Light could help.

=> More informations about this toot | More toots from cwilcox808@c.im

Written by Richard Rutter on 2025-01-18 at 22:10

@cwilcox808 thanks Curtis. I’ll give all that a try.

=> More informations about this toot | More toots from Richr@mastodon.social

Written by Roel Nieskens on 2025-01-22 at 13:13

@cwilcox808 @Richr Is there an advantage to delegate the titling of an interactive element (here, the radio button) to a inside the , as opposed to putting the title in an aria-label on the radio buttons directly?

=> More informations about this toot | More toots from pixelambacht@typo.social

Written by Azraph on 2025-01-19 at 09:48

@Richr I was looking for ways to do this recently, none of which was concerned with accessibility. Thanks a lot for explaining the whole process, and for sharing!

=> More informations about this toot | More toots from azraph@fosstodon.org