这是一篇由陈慧晶撰写的精彩文章，她在文章中向我们介绍了如何通过键盘使单选按钮可访问的过程。我特别喜欢她讨论的四种可供我们使用的选项，这些选项可以隐藏单选输入并将其替换为充当切换按钮的卡片集
当我们隐藏输入元素时，我们大多数人都会搞砸键盘导航部分。有几种方法可以使某些内容不可见或隐藏
- clip-path: polygon(0 0)
- display: none
- opacity: 0
- visibility: hidden
对于自定义单选按钮（或复选框），不建议使用选项 2 和 4，因为屏幕阅读器将无法读取默认的单选元素。这也阻止我们在隐藏的输入上使用 :focus 伪元素，因此这些选项都被排除在外。
这让我们只剩下选项 1 和选项 3。我有点喜欢选项 1，因为 clip-path 很有趣。Clip-path 创建一个剪裁区域，该区域定义元素的哪一部分可见。此剪裁区域可以是基本形状，也可以是引用剪裁路径元素的 url。
此外，在谈到样式和可访问性时，值得查看 Scott O’Hara 的 可访问性优先的样式表单组件存储库 和 Dave Rupert 的 可访问组件的营养卡片。