A polyfill for the HTML switch element
4 months ago
- #web-development
- #accessibility
- #polyfill
- 复选框可以转换为开关控件，通过应用ARIA的'switch'角色来表示'开启'和'关闭'状态，而非传统的'选中'与'未选中'状态。
- 该polyfill为偏好高对比度的用户增强显示效果，同时支持Windows系统和Firefox浏览器的高对比度模式。
- macOS系统的'不以颜色区分'设置会为开关添加视觉标记，该polyfill通过高对比度检测功能实现了对此设置的支持。
- 开关控件解决了可访问性挑战，例如消除交互不确定性（点击还是滑动）以及明确标签含义（'开启'表示当前状态还是操作结果）。
- 该polyfill通过dir属性支持多种书写模式和文本方向。
- 开关元素在2018年被提议加入HTML标准，截至2023年仍在讨论中并有一个待合并的PR。
- 该polyfill采用渐进增强模式，其实现方式类似于可定制样式的<select>元素。
- 该polyfill已发布在npm和GitHub平台，包含详细的使用说明和功能演示，展示书写模式支持、样式选项等特性。
- 特别致谢为可访问性建议、测试验证、反馈意见和性能优化作出贡献的参与者。