原生 time/date 输入框需补全无障碍属性才真正可用：必须设置 id+label（或 aria-label）、time 类型需用 aria-describedby 说明 24 小时制，自定义日历须管理焦点流、键盘导航及禁用状态语义。
原生 <input type="time"> 和 <input type="date"> 天然支持基础无障碍，但必须补全关键属性，否则屏幕阅读器会跳过、误读或无法操作。
为什么原生 time/date 输入框不等于“已无障碍”
浏览器虽内置语义，但实际体验取决于你是否显式提供上下文。常见问题包括：
- 没加
label或aria-label→ 屏幕阅读器只读“编辑框”，不知是时间还是日期 - 用
placeholder替代label→ 语音助手无法识别目的，且 placeholder 在输入后消失 - 禁用原生图标（如
::-webkit-calendar-picker-indicator { display: none }）却未提供替代触发方式 → 视力障碍用户失去操作入口 - 自定义日历弹窗未管理焦点流 → 用户 Tab 到弹窗后无法进入、Esc 无法关闭、选中后焦点丢失
必须设置的三个无障碍属性
对每个 <input type="date"> 或 <input type="time">，以下三项缺一不可：
-
id属性（唯一） + 对应的<label for="xxx">→ 这是最可靠、兼容性最好的方式，所有主流读屏器都优先解析label - 若无法使用
label（如设计限制），则必须加aria-label="会议开始时间"，不能只靠title——title不被大多数读屏器默认朗读 - 对
type="time"，明确补充单位说明：例如aria-describedby="time-hint"+<div id="time-hint" class="sr-only">24 小时制，格式为 HH:MM</div>，避免用户混淆 AM/PM
自定义日历弹窗的焦点与键盘控制要点
一旦你用 Flatpickr、vanillajs-datepicker 或手写日历替换原生控件，无障碍就从“浏览器负责”变成“你全权负责”：
立即学习“前端免费学习笔记（深入）”；
- 弹窗打开时，用
el.focus()将焦点移到第一个可交互元素（如“上月”按钮或首日单元格） - 支持方向键导航：←→ 移动到相邻日期，↑↓ 跳转上下周，Enter 确认选择；Tab 应在弹窗内循环，而非跳出
- 按
Escape必须关闭弹窗，并将焦点返回原始input元素 - 每个日期单元格需有
role="gridcell"、tabindex="-1"，选中状态用aria-selected="true"动态更新 - 不要依赖
onMouseOver或onClick单独绑定事件 —— 键盘用户需要onKeyDown捕获Enter和Space
容易被忽略的时区与语言细节
无障碍不只是“能读出来”，还要“读得准”：
-
<input type="time">的 value 是本地时区，但屏幕阅读器可能按系统语言读成“两点三十分”或 “14:30”。若业务强依赖 UTC，应在aria-label中明确标注：“会议时间（UTC+0）” - 中文环境别依赖
toLocaleDateString()渲染日历标题 —— 它在某些读屏器下会读出冗长的“2026年8月26日星期三”，而用户只需要“八月”和“星期三”两个词。建议手动拼接aria-label="${monthName} ${weekDay}" - 禁用日期（如节假日）不能只靠视觉灰度，必须加
aria-disabled="true"和aria-hidden="true"，否则键盘用户仍会聚焦到该格并困惑为何无法选择
