在网页无障碍访问规范中，禁用表单元素的可发现性是容易被忽略的细节。很多开发者认为给表单元素添加disabled属性就完成了禁用逻辑，却没考虑到屏幕阅读器等辅助工具可能无法正确识别这类元素的状态，导致视障用户无法感知元素存在或不知道禁用原因。
禁用表单元素的默认无障碍表现
原生的disabled属性会让表单元素自动从tab键序中移除，同时大部分屏幕阅读器会直接跳过这类元素，不会朗读元素内容和状态。这意味着如果用户不是通过视觉浏览页面，很可能根本不知道页面存在这个禁用的表单元素，也无法了解它被禁用的原因。
我们可以通过一段简单的代码验证默认表现：
<form> <label for="username">用户名</label> <input type="text" id="username" name="username" disabled placeholder="请输入用户名"> <button type="submit" disabled>提交</button> </form>
上述代码中，两个禁用元素默认不会被屏幕阅读器朗读，用户无法感知它们的存在。
确保可发现性的核心方法
1. 保留元素在可访问树中
如果希望禁用元素仍然能被屏幕阅读器识别，不要直接使用disabled属性，而是用aria-disabled="true"配合自定义禁用逻辑。这样元素会保留在可访问树中，屏幕阅读器可以朗读到元素内容和状态。
对应的实现代码示例如下：
<form> <label for="email">邮箱</label> <input type="email" id="email" name="email" aria-disabled="true" class="custom-disabled" placeholder="请先填写用户名"> </form>
/* 自定义禁用样式，模拟原生禁用效果 */
.custom-disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
// 阻止自定义禁用元素的输入和交互
document.getElementById('email').addEventListener('click', function(e) {
if (this.getAttribute('aria-disabled') === 'true') {
e.preventDefault();
// 可选：给屏幕阅读器发送提示
this.setAttribute('aria-live', 'polite');
this.setAttribute('aria-label', '邮箱输入框，当前不可用，请先填写用户名');
}
});
2. 明确告知禁用原因
仅仅让元素可被识别还不够，需要让用户知道元素为什么被禁用。可以通过aria-describedby属性关联提示文本，屏幕阅读器朗读元素时会同时朗读关联的提示内容。
实现示例如下：
<form> <label for="phone">手机号</label> <input type="tel" id="phone" name="phone" aria-disabled="true" aria-describedby="phone-tip"> <p id="phone-tip" class="tip-text">当前不可用，请先完成账号验证</p> </form>
这里提示文本可以放在视觉可见的位置，也可以隐藏但保留在可访问树中，根据页面设计需求选择即可。
3. 避免滥用隐藏属性
很多开发者会给禁用元素添加aria-hidden="true"或者display: none样式，这会直接导致元素从可访问树中移除，完全无法被辅助工具发现。除非禁用元素确实不需要被任何用户感知，否则不要使用这类隐藏属性。
不同场景的适配方案
场景1：临时禁用的提交按钮
当表单未填写完成时，提交按钮处于禁用状态，需要在用户聚焦到按钮时告知禁用原因，代码实现如下：
<button type="submit" aria-disabled="true" aria-label="提交按钮，当前不可用，请先填写所有必填项">提交</button>
场景2：分组禁用的表单区域
如果一整组表单元素都被禁用，可以给包裹的fieldset添加aria-disabled="true"，同时给legend元素添加禁用原因说明，这样屏幕阅读器会先朗读分组说明，再告知整个分组处于禁用状态。
<fieldset aria-disabled="true"> <legend>个人信息（当前不可用，请先登录账号）</legend> <label for="name">姓名</label> <input type="text" id="name" name="name"> <label for="age">年龄</label> <input type="number" id="age" name="age"> </fieldset>
常见误区排查
- 不要同时使用
disabled和aria-disabled="true"，前者会直接移除元素的可访问性，后者会保留，两者作用冲突。 - 不要给禁用元素设置
tabindex="-1"后又不处理聚焦逻辑，这样用户无法通过键盘聚焦到元素，也无法感知元素状态。 - 禁用元素的提示文本不要放在
placeholder中，屏幕阅读器可能不会朗读placeholder内容，提示信息无法被有效传递。
验证方法
开发完成后可以使用屏幕阅读器（如NVDA、VoiceOver）实际测试，聚焦到禁用元素时，是否能听到元素角色、内容、禁用状态以及禁用原因的说明。也可以使用无障碍检测工具扫描页面，查看是否有禁用元素未被正确识别的报错。
无障碍访问表单元素ARIA属性可发现性disabled_属性修改时间：2026-07-18 09:24:35