html - 只读输入元素与非输入元素

Question

我正在为客户评估一些代码，并且在他们的 HTML 中遇到了一些地方，他们正在渲染input具有readonly属性和 static的字段value。这些字段中的数据将永远无法在相关页面上编辑，所以我的想法是，它们input首先不应该是字段，因为它在语义上看起来不正确，但更重要的是，可能会给使用屏幕阅读器的人带来问题。我知道，使用input，甚至是只读的，您可以获得元素获得焦点的能力，但可用性与这里无关。

我发现这个问题问同样的问题，但它是从 2013 年开始的，只有一个人回答，而且看起来不像是一个权威的答案。

对于如何呈现可能最初来自用户输入但现在呈现为与可访问性相关的只读数据的数据，是否有明确的标准或最佳实践？

标签： htmlaccessibilityweb-accessibility

Answer 1

在 text 或 textarea 类型的输入上使用禁用的输入没有任何问题。它是HTML5 规范的一部分，大多数主要的浏览器/屏幕阅读器组合都能很好地处理它。

人们想要使用只读输入而不是静态文本有几个原因：

• 只读输入可以接收键盘焦点，静态文本默认不接收。
• 只读输入包含在表单的 Tab 键顺序中，静态文本将被跳过。
• 只读输入将作为表单的一部分提交数据，静态文本不会。

虽然这是一个较旧的页面，但本文有一些使用该属性的屏幕阅读器测试readonly，结果总体上是有利的，但有一些小警告。我怀疑从那时起支持可能会有所改善。

此外，caniuse 网站显示了对该元素的相当广泛的浏览器支持。

如果它适合用例，我会毫不犹豫地使用这个属性。