如何创建可访问的2状态开关？

Question

创建可访问的2状态开关的方法有很多。（看起来像一个按钮，单击以更改状态）

“开关”：由复选框inclusive-considerations-when-restyling-form-controls创建

<input type="checkbox" role="switch" checked/>

通过复选框创建的“切换按钮”

<input type="checkbox" role="button" aria-pressed="true"/>

“开关”：由按钮ant design创建

<button role="switch" aria-checked="true"></button>

电台Switch Component: Radio Buttons创建的“开关”

优点和缺点如下：

• 开关组件看起来比按钮更像按钮
复选框中的
• 值始终会传输到数组数据中
• 按钮始终用于控制操作，而不是数据容器
• ChromeVox无法读取switch角色。
• 复选框的:checked状态可以通过CSS进行控制
• 如果使用复选框的属性checked则无需编写aria脚本
• 单选键为↑↓←→，复选框的键为space|return|enter

那哪个最好？

此外，如何创建可访问的3状态（或更多）开关？

https://www.w3.org/TR/wai-aria-1.1/#switch

https://www.w3.org/TR/wai-aria-1.1/#button

difference between toggle button and switch