HTML 原生不支持 readonly 属性用于 checkbox/radio，而 disabled 会移除焦点和语义相关性；本文详解符合 WCAG 的替代方案：优先使用 aria-disabled="true" 配合 JavaScript 阻断交互，并保持表单控件在焦点流中、可被屏幕阅读器准确识别其当前状态。
html 原生不支持 `readonly` 属性用于 checkbox/radio，而 `disabled` 会移除焦点和语义相关性；本文详解符合 wcag 的替代方案：优先使用 `aria-disabled="true"` 配合 javascript 阻断交互，并保持表单控件在焦点流中、可被屏幕阅读器准确识别其当前状态。
在构建可访问、语义清晰且符合真实业务语义的只读表单时，复选框（<input type="checkbox">）和单选按钮（<input type="radio">）是一类特殊挑战——它们没有原生 readonly 属性，aria-readonly 也未被 W3C ARIA 规范允许（ARIA Issue #1309 明确指出该属性对非文本输入无效），且浏览器对其支持极差或完全忽略。
直接使用 disabled 虽能阻止交互，但会带来三重可访问性缺陷：
- ✅ 视觉上灰显，但 ❌ 移出键盘 Tab 顺序（无法聚焦）；
- ❌ 屏幕阅读器通常播报 “dimmed” 或 “unavailable”，暗示“此控件当前无关/不可用”，而非“已填写、仅作展示”；
- ❌ 表单提交时该字段值不会被包含（
disabled控件不参与序列化），破坏数据完整性。
因此，推荐采用以下兼顾语义、可访问性与功能完整性的组合方案：
✅ 推荐方案：aria-disabled="true" + event.preventDefault() + 显式状态标注
<label class="readonly-checkbox">
<input
type="checkbox"
id="newsletter-optin"
name="newsletter_optin"
value="1"
checked
aria-disabled="true"
aria-label="Newsletter subscription: selected (read-only)"
>
Subscribe to our newsletter
</label>// 阻断所有交互方式（鼠标、空格、Enter）
document.querySelectorAll('input[type="checkbox"][aria-disabled="true"], input[type="radio"][aria-disabled="true"]')
.forEach(el => {
el.addEventListener('click', e => e.preventDefault());
el.addEventListener('keydown', e => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
}
});
});? 为什么
aria-disabled="true"是当前最优解？
- 它明确向辅助技术传达：“此控件相关但不可编辑”（vs
disabled的“不相关”）；- 保留控件在 Tab 顺序中，满足键盘用户导航连续性；
- 支持
:focus-visible样式，可添加视觉焦点反馈；- 所有主流屏幕阅读器（NVDA、JAWS、VoiceOver）均正确播报其
checked/selected状态 +aria-disabled语义（如：“Subscribe to our newsletter, checked, read-only”）。
⚠️ 关键注意事项与增强实践
-
永远不要省略
aria-label或<label></label>包裹：确保屏幕阅读器能准确关联描述与状态。若使用视觉隐藏标签，需配合sr-only类：<label> <input type="checkbox" aria-disabled="true" checked> <span class="sr-only">Newsletter subscription: </span> <span aria-hidden="true">Subscribe to our newsletter</span> </label>
服务端必须校验！
前端禁用交互仅为用户体验层防护，恶意用户仍可篡改 DOM 或绕过 JS。后端需严格校验只读字段值是否与原始提交/数据库记录一致，拒绝任何非法变更。避免 jQuery 反转勾选等“伪只读”技巧：
如this.checked = !this.checked会导致状态闪烁、AT 报读混乱，且违反 WCAG 4.1.2（名称、角色、值），不被推荐。替代方案对比（不推荐但需了解）
| 方案 | 是否保持 Tab 顺序 | 是否提交值 | 是否传达“相关但只读” | 可访问性评级 | |------|------------------|------------|------------------------|--------------| |disabled| ❌ | ❌ | ❌（传达“不可用”） | ⚠️ 不符合语义 | |aria-disabled="true"+ JS 阻断 | ✅ | ✅ | ✅ | ★★★★☆（当前最佳） | | 替换为纯文本 + ARIA roles（如role="checkbox"） | ✅ | ❌（需 hidden input 补充） | ⚠️（复杂，易出错） | ★★☆☆☆（维护成本高） |
✅ 最终建议结构（React/Vue 等框架亦适用）
<!-- 只读模式下 -->
<div class="form-field readonly">
<input
type="checkbox"
name="terms_accepted"
value="1"
checked
aria-disabled="true"
id="terms-accepted-ro"
>
<label for="terms-accepted-ro">
I agree to the Terms and Conditions
</label>
<!-- 提交时仍需 hidden input 保障值传递（如后端依赖 name 提交） -->
<input type="hidden" name="terms_accepted" value="1">
</div>该方案已在主流 WCAG 2.1 AA 合规项目中验证落地，平衡了技术可行性、辅助技术支持度与开发可维护性。记住：可访问性不是“加个 ARIA 就完事”，而是以用户意图为中心——当用户返回查看已提交表单时，他们需要的是清晰、可信、可感知的状态陈述，而非一个被“锁住”的控件。
