无障碍视频播放器的 controls 必须可键盘操作、语义明确，且所有控件需有准确的 aria-label 或 aria-labelledby；原生 controls 属性不满足要求，因其默认缺乏语义、状态不可知、键盘支持不一致；须为播放/暂停、静音、进度条、全屏等控件显式设置 ARIA 属性并同步状态，确保符合 WCAG 2.1。
无障碍视频播放器的 controls 必须可键盘操作、语义明确，且所有控件需有准确的 aria-label 或 aria-labelledby，确保屏幕阅读器用户能清晰理解功能和当前状态。
controls 属性本身不满足无障碍要求
controls 是 HTML5 原生属性，仅启用浏览器默认控件栏（播放/暂停、音量、进度条等），但这些控件：
- 默认缺乏足够语义：例如“播放按钮”可能只被读作“button”，无动作说明
- 状态不可知：暂停状态下，按钮仍显示为“播放”，屏幕阅读器无法自动告知当前是“暂停中”还是“可播放”
- 键盘焦点顺序和可操作性因浏览器而异，部分控件（如进度条）可能未正确暴露滑块角色或值变化
必须为每个控件显式设置 aria-label 或 aria-labelledby
不能依赖视觉文本（如图标旁的“播放”文字）——若该文字未以可访问方式关联，屏幕阅读器将忽略它。正确做法：
- 播放/暂停按钮：
aria-label="播放"或动态更新为aria-label="暂停"，配合aria-pressed="true/false"表示切换状态 - 静音/取消静音：
aria-label="静音"/aria-label="取消静音"，并同步更新aria-pressed - 进度条：
role="slider"+aria-label="视频进度"+aria-valuenow、aria-valuemin、aria-valuemax，实时反映位置 - 全屏按钮：
aria-label="进入全屏"，切换后改为aria-label="退出全屏"
额外关键要求：状态同步与键盘支持
仅加 aria-label 不够，还需保障交互逻辑符合 WCAG 2.1：
- 所有控件必须能用 Tab 键聚焦，Enter/Space 键触发，方向键控制滑块（如音量、进度）
- 播放状态、静音状态、全屏状态需通过 ARIA 状态属性（如
aria-hidden、aria-live区域）或属性变更实时通知 - 若自定义控件隐藏原生 controls，务必用
controlslist="nodownload noremoteplayback"配合 ARIA 抑制原生控件干扰 - 字幕/音轨切换菜单需有
aria-haspopup="menu"、aria-expanded，选项用role="menuitemradio"并标明当前选中
验证建议
上线前务必实测：
- 用 NVDA/JAWS + Chrome/Firefox 测试朗读内容是否准确、状态是否同步
- 纯键盘操作（Tab/Shift+Tab/Enter/Space/方向键）走完整流程，确认无焦点丢失、无不可触发控件
- 使用 axe 或 WAVE 工具扫描 ARIA 属性缺失、重复 ID、role 冲突等问题
- 检查
元素是否包含aria-label或aria-labelledby（用于描述视频整体用途，如aria-label="新闻报道：台风登陆实况"）
