如何制作无法修改的可访问只读复选框/单选？

Question

我正在为各种输入类型制作可重用的输入组件，并且我正在尝试找出推荐的方法来实现可访问的只读输入 - 该输入不应该能够被修改。

例如，如果有一个表单仅提交一次，并且用户想要返回并查看他们填写的内容。

它的输入应该如何渲染？

readonly

属性对于复选框和单选按钮无效（

aria-readonly

同样适用），因此虽然它适用于基于文本的输入，但我需要复选框和单选按钮的替代方案。

具有禁用属性的输入将从 Tab 键顺序中删除，并且有人指出

disabled

表示输入不相关 - 这不是意图。

<label>
  <input type="checkbox" disabled />
  A checkbox
</label>

我尝试的另一个解决方案是在不处于编辑模式时根本不使用输入。对于文本输入来说这很容易，但对于许多其他输入类型来说这似乎并不理想。

确保屏幕阅读器仍然可以理解原始操作将是一个新的挑战 - 例如，对于无线电组输入，我想确保我正确地传达“这个选项位于这些无线电选项之间，而这个选项被选中了”。

这似乎不是一个很好的解决方案 - 手动尝试并传达输入将给出的相同信息。

可以使用

aria-disabled="true"

，并手动防止输入更改。但这与

disabled

有同样的问题——它没有传达正确的状态“相关，但不可编辑”。

<label>
  <input id="my-checkbox" type="checkbox" aria-disabled="true" />
  A checkbox
</label>

document.getElementById("my-checkbox")?.addEventListener("click", event => {
  event.preventDefault();
})

Answer 1

不会将此保存为最终答案，因为可能仍然有更好的解决方案，并且似乎正在进行一些关于

disabled

状态的意图的一般性讨论。

但是，目前 - 我最终选择了使用

aria-disabled

手动阻止编辑的解决方案。

原因是复选框和单选按钮没有只读的概念（甚至

aria-readonly

也有不稳定的支持），人们通常得到的解决方案是禁用输入，所以我认为通过使用将其保持在选项卡顺序中

aria-disabled

而不是

disabled

- 是一个不错的妥协。

我发现一些围绕该主题的 GitHub 问题对我的决定很有帮助：