1

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

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

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

4

2 回答 2

3

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

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

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

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

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

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

于 2019-11-04T19:20:54.217 回答
1

这里的答案是它取决于你的形式。

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

在表单模式下,屏幕阅读器旨在在表单中的字段之间跳转。

这意味着如果您在输入之间散布了任何纯文本,它将被跳过。

这显然是一个可访问性问题。

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

事实上,对于用户之前填写的表格,保留表格原样可能是有益的,因为熟悉的布局将表明这是他们之前输入的信息,并为您的表格和其中的信息提供上下文。

如果这不是用户输入,那么我建议将其从表单中更改出来,因为它会给页面增加不必要的复杂性。

于 2019-11-04T20:22:40.090 回答