本文探讨在 Firefox 中禁用 <input type="date"> 的键盘编辑能力、保留原生日历控件可访问性的合规方案，强调避免破坏 WCAG 键盘可访问性要求，并提供安全、语义正确的替代实现。
本文探讨在 firefox 中禁用 `` 的键盘编辑能力、保留原生日历控件可访问性的合规方案，强调避免破坏 wcag 键盘可访问性要求，并提供安全、语义正确的替代实现。
Firefox 是少数默认允许用户通过键盘直接编辑 <input type="date"> 值的浏览器（如输入 2024-05-20），而 Chrome 和 Safari 则通常仅响应日历弹出选择。开发者有时试图“禁用键盘输入”以强制用户使用日历控件，但直接阻止键盘操作（如 onKeyDown={e => e.preventDefault()} 或 readonly）会严重违反 WCAG 2.1 标准中的「键盘可访问性」原则（Success Criterion 2.1.1）。
根据 W3C WCAG 2.1 指南，所有功能必须可通过键盘完全操作——包括日期输入。readonly 会禁用日历按钮（Firefox 下表现为灰显不可点击），而拦截 keydown 事件则使屏幕阅读器用户、键盘导航者无法输入或修正日期，构成可访问性障碍。
✅ 推荐合规方案：使用 pointer-events: none + tabindex="-1" 配合视觉反馈（仅限非关键表单场景）
若业务逻辑确需“引导用户仅通过日历选择”（例如避免格式错误），应采用不影响键盘可访问性的方式：
.date__input[aria-disabled="true"] {
background-color: #f9f9f9;
color: #666;
cursor: default;
}
.date__input[aria-disabled="true"]::-webkit-calendar-picker-indicator {
opacity: 1;
}
/* Firefox 专用：禁用文本区域点击/聚焦，但保留日历图标可点击 */
@supports (-moz-appearance: none) {
.date__input[aria-disabled="true"] {
pointer-events: none;
}
.date__input[aria-disabled="true"]::-moz-native-anonymous {
pointer-events: auto; /* 确保日历图标仍可交互 */
}
}<input
className="date__input"
type="date"
key={t.id}
value={t.factStart?.toISOString().split('T')[0] || ''}
onChange={(e) => handleChangeInput(e, index, 'factStart')}
// ✅ 合规做法：不加 readonly，不拦截事件；仅通过 CSS 视觉引导
aria-label="请选择开始日期（使用日历控件）"
/>⚠️ 重要注意事项：
- 不要使用 readonly 或 disabled 属性来“防输入”——它们会破坏表单提交与可访问性；
- 不要绑定 onKeyDown/onInput 并调用 preventDefault()——这将阻断辅助技术用户的合法输入；
- 若需强校验，应在 onChange 中验证日期有效性并给出清晰错误提示（如 <span role="alert">日期格式不正确</span>）；
- 始终确保日历图标在所有浏览器中可聚焦、可按 Enter 或 Space 触发——这是 WCAG 的强制要求。
总结：禁用键盘输入不是前端控制问题，而是可访问性责任问题。真正的解决方案不是“屏蔽”，而是增强引导、强化验证、尊重用户输入方式。让日期输入既安全可靠，又对每位用户真正平等可用。
