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

Question

我正在为客户端评估一些代码，并且在他们的HTML中遇到了一些问题，在这些地方，他们正在渲染具有input属性和静态readonly的{​​{1}}字段。这些字段中的数据将永远无法在相关页面上进行编辑，因此我认为，一开始它们不应为value字段，因为它在语义上似乎不正确，但更重要的是，这可能会导致以下问题：使用屏幕阅读器。我知道使用input甚至是只读的元素，都可以使该元素获得焦点，但是可用性在这里并不重要。

我发现this question提出了同样的问题，但是从2013年开始，只有一个人做出了回应，这似乎不是权威性的答案。

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

Answer 1

在文本或文本区域类型的输入上使用禁用的输入没有什么错。它是HTML5 specification的一部分，大多数主要的浏览器/屏幕阅读器组合都可以很好地处理它。

出于某些原因，人们希望使用只读输入而不是静态文本：

• 只读输入可以接收键盘焦点，默认情况下不会显示静态文本。
• 表单的制表符顺序中包含只读输入，将跳过静态文本。
• 只读输入将作为表单的一部分提交数据，而静态文本则不会。

尽管它是一个较旧的页面，this article使用readonly属性进行了一些屏幕阅读器测试，但在进行一些小警告后，结果通常是令人满意的。我怀疑此后的支持可能会有所改善。

此外，caniuse website展示了该元素对浏览器的广泛支持。

如果适合该用例，我会毫不犹豫地使用此属性。

Answer 2

这里的答案取决于您的表格。

遇到输入时，屏幕阅读器将进入表单模式。

在表单模式下，屏幕阅读器被设计为在表单的各个字段之间跳转。

这意味着，如果在输入之间散布了纯文本，则将被跳过。

这显然是可访问性问题。

假设您的表单结构正确，则在readonly输入中显示信息不会有问题。

实际上，对于用户之前填写的表单，将表单保持原样可能是有益的，因为熟悉的布局将指示这是他们先前输入的信息，并为您的表单及其上下文提供了上下文。

如果这不是用户输入的内容，那么我建议您将其更改为表单以外的形式，因为它会给页面增加不必要的复杂性。