A polyfill for the HTML switch element
4 months ago
- #web-development
- #accessibility
- #polyfill
- A checkbox can become a switch, applying the ARIA switch role, which represents 'on' and 'off' states instead of 'checked' and 'unchecked'.
- The polyfill enhances contrast for users with prefers-contrast settings and supports high contrast modes in Windows and Firefox.
- macOS's 'Differentiate without color' setting adds visual indicators to switches, supported by the polyfill via high-contrast detection.
- Switches address accessibility challenges like interaction uncertainty (tap vs. slide) and label clarity ('on' as current or resulting state).
- The polyfill supports various writing modes and text directionality via the dir attribute.
- The switch element was proposed for HTML in 2018, with ongoing discussions and a pending PR as of 2023.
- The polyfill follows a progressive enhancement pattern, similar to customizable <select> elements.
- Available on npm and GitHub, the polyfill includes detailed usage instructions and a demo showcasing features like writing modes and styling options.
- Acknowledgments to contributors for accessibility advice, testing, feedback, and performance improvements.