https://github.com/chrisnajman/accessible-dark-mode-toggle-button

An accessible dark mode toggle button using the ARIA-pressed attribute
https://github.com/chrisnajman/accessible-dark-mode-toggle-button

accessibility html-css-javascript toggle-buttons

Last synced: 4 months ago
JSON representation

An accessible dark mode toggle button using the ARIA-pressed attribute

• Host: GitHub
• URL: https://github.com/chrisnajman/accessible-dark-mode-toggle-button
• Owner: chrisnajman
• License: mit
• Created: 2023-06-02T09:38:12.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-13T12:48:09.000Z (over 2 years ago)
• Last Synced: 2025-08-07T04:49:00.149Z (10 months ago)
• Topics: accessibility, html-css-javascript, toggle-buttons
• Language: HTML
• Homepage: https://chrisnajman.github.io/accessible-dark-mode-toggle-button/
• Size: 46.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Accessible Dark Mode Toggle Button

- [Website (Git Pages)](https://chrisnajman.github.io/accessible-dark-mode-toggle-button)

- [View on Codepen](https://codepen.io/Naj-codepen/pen/JjmgWXM)

## Description

An accessible dark mode toggle button employing `ARIA` attributes for screen reader users.

Additionally, visual cues (icon, on/off text) are provided for sighted users.

## Accessibility

- The `ARIA-pressed` attribute indicates the button state to screen readers.

- The `ARIA-hidden` attribute hides the SVG icon and CSS `content` text from screenreaders.

- Keyboard navigation via the `Tab` key focuses the button.

## CSS

- CSS variables are used for the dark and light themes.

- The `content` property prints 'on' or 'off' according to the state of the button.

## Javascript

- Button state is saved to local storage, so the chosen theme persists.

- ES6 (no transpilation to ES5)

## Sources

- [`ARIA-pressed` information (and more) from Inclusive Components/Toggle Buttons](https://inclusive-components.design/toggle-button/)

- ['Moon' icon from Free Box Icons (click SVG tab for code))](https://boxicons.com/?query=Moon)

## Testing

- Tested on:

  - Windows 10

    - Chrome

    - Firefox

    - Microsoft Edge