禁用表单控件的Tab焦点无障碍测试问题及解决方案咨询

一、禁用输入框是否应获得Tab焦点？ #

根据WCAG（Web内容无障碍指南）标准，禁用状态的表单控件（包括输入框、单选/复选框）默认不应被Tab键聚焦。因为禁用控件本身不可交互，聚焦它对用户没有操作意义，屏幕阅读器也会识别其disabled属性并告知用户该控件不可用，无需额外聚焦。

二、禁用输入框无法聚焦的缺陷解决方案 #

如果业务上需要让用户感知到这个禁用控件的存在（比如显示必填提示但暂时无法编辑），可以用以下两种替代方案：

• 移除disabled属性，改用readonly（仅适用于输入框）：readonly控件能被Tab聚焦，屏幕阅读器会提示“只读”，同时用户无法编辑内容。代码示例：

  <input class='value' type='text' readonly id='value'>
  

• 保留disabled属性，但在控件旁边添加可见的文本说明，同时用aria-describedby关联控件和说明文本，让屏幕阅读器读取控件状态时同步说明原因：

  <input class='value' type='text' disabled id='value' aria-describedby='disable-note'>
  <span id='disable-note'>当前条件不满足，无法编辑此内容</span>
  

三、禁用单选/复选框的键盘交互说明 #

禁用的单选按钮和复选框同样不应被Tab键聚焦，也没有专门的键盘快捷键能直接聚焦它们。如果需要让用户知晓这些控件的存在及状态，同样可以参考上面的方案：要么改用只读逻辑（如果适用），要么添加关联的状态说明文本，确保屏幕阅读器能传达完整信息。

内容的提问来源于stack exchange，提问作者Victor