HTML页面中音频和视频元素的可访问性播控设计-html教程-PHP中文网

加controls仍被屏幕阅读器忽略，因该属性仅提供视觉控件而无语义；需用aria-label/aria-labelledby明确功能，或配合、语义标题；字幕加载静默失败须检查srclang、label、default及mime类型；自定义按钮需role="button"、aria-pressed和aria-live；移动端autoplay muted仍受限，应改用用户交互触发.play()。

html页面中音频和视频元素的可访问性播控设计

为什么加了 `controls` 还被屏幕阅读器忽略

controls 属性只提供视觉控件，不自动赋予语义或可访问性支持。屏幕阅读器可能跳过整个 <video></video> 或 <audio></audio> 元素，尤其当它缺少明确的用途说明时。

必须用 aria-label 或 aria-labelledby 显式声明功能，例如：<video aria-label="产品操作指南（含中文字幕）"></video>
避免空值或泛化描述，如 aria-label="视频" —— 屏幕阅读器会读出来，但对用户毫无意义
若嵌套在 <figure></figure> 中，优先用 <figcaption></figcaption>，它天然被读出；否则确保前后有 <h2></h2> 等语义标题

`<track></track>` 字幕加载失败但控制台没报错

字幕加载静默失败很常见：浏览器不校验 src 是否真实可达，也不抛 JS 异常，只是跳过该 <track></track>。

每个 <track></track> 必须带 srclang 和 label，例如：<track kind="subtitles" srclang="zh" label="中文" src="caption-zh.vtt" default></track>
default 属性不能省略——否则即使文件加载成功，也不会默认启用
检查 Network 面板确认 .vtt 文件返回 200 且 MIME type 是 text/vtt；本地 file:// 协议下多数浏览器会拒绝加载 <track></track>

自定义播放按钮键盘不可聚焦或状态不同步

禁用原生 controls 后手写 UI，很容易漏掉关键 A11y 属性。

每个按钮必须有 role="button"，否则屏幕阅读器不识别为可交互元素
播放/暂停按钮需动态设置 aria-pressed：<button aria-pressed="false">播放</button> → 播放后改为 true
当前进度、音量、静音状态变化，要用 aria-live="polite" 区域播报，例如：<div aria-live="polite" aria-atomic="true">已静音</div>
Tab 键顺序必须合理：“播放” → “暂停” → “跳过片头” → 其他控件；“跳过片头”按钮不能靠 JS 动态插入后脱离焦点流

移动端静音 autoplay 仍被拦截

iOS Safari 和微信 WebView 对 autoplay muted 仍有额外限制：即使加了 muted，首次加载时也可能不触发播放。

不要依赖 autoplay 在移动端生效；改用显式按钮触发 .play()，并捕获 Promise 拒绝：
```
el.play().catch(e => {
console.warn("play() blocked:", e.name);
// 提示用户点击开始
});
```
避免在 DOMContentLoaded 或 load 事件里调用 .play() —— 此时用户尚未与页面交互，iOS 直接拒绝
如果必须自动启动，可在用户第一次触摸任意区域后，缓存该手势并立即调用 .play()

真正卡住人的从来不是标签怎么写，而是浏览器策略、焦点管理、字幕加载链路和状态同步这四点连环咬合。少一个环节，可访问性就断在看不见的地方。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载