清空只读输入字段

Empty readonly input fields

据我所知,只读字段主要由纯键盘用户使用,因此他们可以专注于输入和 copy/paste 包含的值。但是没有价值的领域呢?是否应该将它们视为 disabled,因为它们不向用户携带任何信息,从这个角度来看,这就像禁用按钮一样。

编辑: 这些字段是来自各种来源的元数据,如果它们是空的,很可能它们代表什么都不重要,因为如果它们无法更新,它不会为上下文添加任何值。

简答

不,它们应该保留为 readonly

长答案

您需要考虑何时使用每一个:

readonly

readonly 字段用于向人们显示信息。

如果该字段恰好为空,它仍应返回,因为人们可以看到该字段存在并且不包含任何信息。

这对于使用屏幕 reader 的人来说是一样的,他们到达该字段,看到它是 readonly,得到宣布的字段并且它目前是空的。所有有用的信息。

这个信息在回读表格的时候也会自动读出来,很有用。

disabled

但是,

disabled表示此时不能修改该字段。

某些屏幕 reader 默认情况下不会读出这些内容,除非您特别关注 JS 等字段

VoiceOver 将跳过禁用的字段 - 如果您需要可访问的信息,这就没有用(例如,如果这是对先前输入的信息的确认,跳过整个字段可能会导致混淆并导致人们返回检查他们没有遗漏表格上的任何内容。

那么对于空字段应该使用哪个?

readonly 如果这是将信息中继回用户。他们仍然可以聚焦字段,听到字段标签并且它是空的。

disabled 如果此控件当前在页面上没有任何作用(而且不太可能!),因为它将被完全跳过。

disabled 应谨慎使用,因为我之前提到 some screen readers (VoiceOver) will skip disabled fields..

一般来说,规则是——用户是否需要知道该字段被保留/为空白——使用 readonly。在输入信息时,该字段是否不会被使用/不相关,请使用disabled.

如果有疑问使用readonly,它比错误的disabled属性造成的伤害要小。