An accessible light/dark mode button

Since dark mode is becoming popular I though lets make a toggle button that is accessible to all.

But what do I mean with all? Well it means all users, including those with visual and hearing impairments.

Adding accessibility features

The easiest part will be adding support for screenreaders. This is done by adding aria-label and aria-pressed to the button. This will make sure the current state of the button is available.

To visually show the state of the button color alone is not enough. Since people that are colorblind may not see a difference. Luckly this was easily done by adding in some icons.

During development I stumbled on an article about CSS Logical Properties. Which is a way of changing the layout of an element based on the writing direction. Which was perfect for what I was doing since now I didn't have to create additional right to left styling.

Final outcome

A working example can be found at JSFiddle. (working on an embed)