mdn · yin1999 · Aug 4, 2024 · Jul 29, 2024 · Jul 30, 2024 · Jul 30, 2024
@@ -55,8 +55,8 @@ l10n:
 
 #### 使用浏览器扩展
 
-- [Gif Blocker](https://chrome.google.com/webstore/detail/gif-blocker/ahkidgegbmbnggcnmejhobepkaphkfhl)：适用于 Chrome，Gif Blocker 是一个应用商店提供的扩展。
-- [Gif Scrubber](https://chrome.google.com/webstore/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp)：Gif Scrubber 是一个 Chrome 扩展，允许你像视频播放器一样控制 GIF。它在 **<https://github.com/0ui/gif-scrubber>** 上有一个 GitHub 存储库。
+- [Gif Blocker](https://chromewebstore.google.com/detail/gif-blocker/ahkidgegbmbnggcnmejhobepkaphkfhl)：适用于 Chrome，Gif Blocker 是一个应用商店提供的扩展。
+- [Gif Scrubber](https://chromewebstore.google.com/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp)：Gif Scrubber 是一个 Chrome 扩展，允许你像视频播放器一样控制 GIF。它在 **<https://github.com/0ui/gif-scrubber>** 上有一个 GitHub 存储库。
 - [Beeline Reader](https://www.beelinereader.com/)：Beeline Reader 有一个浏览器扩展，可以设置为灰度和 Dyslexi 字体，等等。
 
 ![显示了 Beeline Reader 在浏览器中用户可以调整的模式的屏幕截图](beelinereader.png)

@@ -63,5 +63,5 @@ l10n:
 - [`aria-haspopup`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性
 - [`aria-activedescendant`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) 属性
 - [`aria-expanded`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性
-- [带有内联和列表自动填充的可编辑组合框示例](https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-both.html)
+- [带有内联和列表自动填充的可编辑组合框示例](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/)
 - [Event.ariaAutoComplete](/zh-CN/docs/Web/API/Element/ariaAutoComplete)
@@ -82,5 +82,5 @@ myHTMLElement.ariaChecked = true;
 - [`<input type="radio">`](/zh-CN/docs/Web/HTML/Element/input/radio)
 - [`aria-pressed`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
 - [`aria-selected`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
-- [双态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html)—w3.org
-- [混合状态复选框示例](https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox-mixed.html)—w3.org
+- [双态复选框示例](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/)—w3.org
+- [混合状态复选框示例](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)—w3.org
@@ -26,7 +26,7 @@ button 角色会向辅助技术（如屏幕阅读器）识别一个元素为按
 ```
 
 > [!NOTE]
-> 如果使用 `role="button"` 而不是语义化的 `<button>` 或 `<input type="button">` 你需要让这个元素可聚焦并定义 {{domxref("Element/click_event", "click")}} 和 {{domxref("Element/keydown_event", "keydown")}} 事件的事件处理器。这包括了对按下 <kbd>Enter</kbd> 和 <kbd>Space</kbd> 的事件的处理，以处理各种形式的用户输入。参见[官方的 WAI-ARIA 示例代码](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)。
+> 如果使用 `role="button"` 而不是语义化的 `<button>` 或 `<input type="button">` 你需要让这个元素可聚焦并定义 {{domxref("Element/click_event", "click")}} 和 {{domxref("Element/keydown_event", "keydown")}} 事件的事件处理器。这包括了对按下 <kbd>Enter</kbd> 和 <kbd>Space</kbd> 的事件的处理，以处理各种形式的用户输入。参见[官方的 WAI-ARIA 示例代码](https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/)。
 
 除了常见的按钮部件之外，使用非按钮元素创建切换按钮和菜单按钮时，应该使用 `role="button"`。
 
@@ -293,4 +293,4 @@ function toggleButton(element) {
 - [`aria-haspopup`](https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup)
 - [HTML5 中强大的原生语义](https://html.spec.whatwg.org/multipage/dom.html#aria-usage-note)
 - [在 HTML 中使用 ARIA 的注意事项](https://www.w3.org/TR/aria-in-html/)
-- [官方 WAI-ARIA 示例代码](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html)
+- [官方 WAI-ARIA 示例代码](https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/)
@@ -213,5 +213,5 @@ l10n:
 - [ARIA：`option` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role)
 - [ARIA：`list` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role)
 - [ARIA：`listitem` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role)
-- [ARIA 最佳实践 – Listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox)
+- [ARIA 最佳实践 – Listbox](https://www.w3.org/WAI/ARIA/apg/#Listbox)
 - [ARIA 角色模型 – Listbox](https://www.w3.org/TR/wai-aria-1.1/#listbox)
@@ -18,7 +18,7 @@ l10n:
 
 ## 如何操作
 
-- [前端开发人员的无障碍性](https://accessibility.digital.gov/front-end/getting-started/)
+- [前端开发人员的无障碍性](https://digital.gov/guides/accessibility-for-teams/)
   - : 美国总务署技术转型服务提供的简要指南，涵盖了几个无障碍性主题，并提供了指南视频和相关 WCAG 参考资料的链接。
 - [无障碍网页编写](https://www.ibm.com/able/requirements/requirements/)
   - : IBM 公开了他们需要满足的无障碍性要求，并提供了交互式的界面。
@@ -28,7 +28,7 @@ l10n:
 使用工具快速检查浏览器中的常见错误：
 
 - [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/)
-- [aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=zh-CN)
+- [aXe](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl%3Dzh-CN)
 - [Lighthouse Accessibility Audit](https://developer.chrome.com/docs/lighthouse/overview/)
 - [Accessibility Insights](https://accessibilityinsights.io/)
 - [<abbr>WAVE</abbr>](https://wave.webaim.org/extension/)
@@ -37,11 +37,11 @@ l10n:
 
 - [axe-core](https://github.com/dequelabs/axe-core)
 - [jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
-- [Lighthouse Audits](https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#using-programmatically)
+- [Lighthouse Audits](https://github.com/GoogleChrome/lighthouse/blob/main/docs/readme.md#using-programmatically)
 - [AccessLint.js](https://github.com/accesslint/accesslint.js/tree/master)
 
 用于在 GitHub 拉取请求中查找无障碍性问题的持续集成工具：
 
-- [AccessLint](https://www.accesslint.com/)
+- [AccessLint](https://accesslint.com/)
 
-尽管最好使用真实用户测试你的 Web 应用程序，但你可以模拟色盲、低视力、低对比度和缩放。你应该始终在没有鼠标和触摸屏的情况下测试你的网站以测试键盘导航。你还可以尝试使用语音命令访问你的网站。尝试禁用鼠标并使用浏览器扩展，如 [Web Disability Simulator](https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)。
+尽管最好使用真实用户测试你的 Web 应用程序，但你可以模拟色盲、低视力、低对比度和缩放。你应该始终在没有鼠标和触摸屏的情况下测试你的网站以测试键盘导航。你还可以尝试使用语音命令访问你的网站。尝试禁用鼠标并使用浏览器扩展，如 [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)。
@@ -179,7 +179,7 @@ _较大并且笔画较宽的文本在低对比度下更容易阅读。因此，
 
 在人类感知中，亮度差异比颜色差异更为重要。这一点很重要，因为亮度对比可以使即使是色盲者也能看到的内容得以开发。有了这样的理解，可以通过调整亮度来改善因亮度较低而难以看清的颜色，将这些颜色与具有对比亮度的另一种颜色放在一起。例如，NASA 对蓝色的一项有趣研究指出，这种低亮度的颜色可以通过*注意确保足够的亮度对比*而变得清晰可见（来源：[与蓝色设计](https://colorusage.arc.nasa.gov/blue_2.php)）。
 
-相对亮度的计算不是随意的。幸运的是，有[在线亮度和对比度检查工具](https://contrast-ratio.com/)可用，甚至有关于计算[相对亮度](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance)的说明。
+相对亮度的计算不是随意的。幸运的是，有[在线亮度和对比度检查工具](https://www.siegemedia.com/contrast-ratio)可用，甚至有关于计算[相对亮度](https://www.w3.org/TR/WCAG21/#dfn-relative-luminance)的说明。
 
 ## 感知颜色
 
@@ -310,7 +310,7 @@ _不止一个“红色”可以被认为是“饱和”的红色_。例如，颜
 - **蓝色还会显著影响亮度和眩光**：[蓝色、眩光和亮度](https://pubmed.ncbi.nlm.nih.gov/31288107/)
 - **红色色调的眼镜可以增加快乐或喜悦感**：[透过”玫瑰色“眼镜看世界：眼镜颜色对视觉情感加工的影响](https://pubmed.ncbi.nlm.nih.gov/31244627/)
 - **红色众所周知会对我们的行为产生显著影响**：[红色如何影响我们的行为](https://www.scientificamerican.com/article/how-the-color-red-influences-our-behavior/)，《科学美国人》，S. Martinez-Conde，Stephen L. Macknik
-- **红色环境**：研究表明，对于那些患有创伤性脑损伤的人，[在红色环境中认知功能降低](https://www.ncbi.nlm.nih.gov/pubmed/20649469)。
+- **红色环境**：研究表明，对于那些患有创伤性脑损伤的人，[在红色环境中认知功能降低](https://pubmed.ncbi.nlm.nih.gov/20649469/)。
 
 ## 参见
 

@@ -28,7 +28,7 @@ WCAG 2.1 是最新且最相关的无障碍标准。使用 WCAG 2.1 可以帮助
 
 ### 什么是 WCAG 2.1？
 
-WCAG 2.1 于 2018 年 6 月 5 日作为官方建议书发布。欧盟于 2018 年 9 月将 WCAG 2.1 作为数字无障碍标准。W3C 发布了一份有关[欧洲地区采用 WCAG 2.1](https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/) 的新闻稿。
+WCAG 2.1 于 2018 年 6 月 5 日作为官方建议书发布。欧盟于 2018 年 9 月将 WCAG 2.1 作为数字无障碍标准。W3C 发布了一份有关[欧洲地区采用 WCAG 2.1](https://www.w3.org/blog/2018/wcag-2-1-adoption-in-europe/) 的新闻稿。
 
 WCAG 2.1 包括：
 

@@ -22,7 +22,7 @@ slug: Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_
 
 ### 原文字幕（caption）和翻译字幕（subtitle）
 
-[原文字幕和翻译字幕不是一回事](https://web.archive.org/web/20160117160743/http://screenfont.ca/learn/)：它们的受众明显不同，传达的信息也不同，如果你不确定它们有什么区别，建议你阅读一下。然而，它们在技术上的实现方式是相同的，所以本文的材料将适用于这两种情况。
+[原文字幕和翻译字幕不是一回事](https://web.archive.org/web/20160117160743/http:/screenfont.ca/learn/)：它们的受众明显不同，传达的信息也不同，如果你不确定它们有什么区别，建议你阅读一下。然而，它们在技术上的实现方式是相同的，所以本文的材料将适用于这两种情况。
 
 在本文中，我们将把显示的文字轨道称为字幕，因为它们的内容是针对难以理解电影语言的健听人士，而不是聋人或重听人士。
 
@@ -304,7 +304,7 @@ WebVTT 的一个不太为人所知和支持的功能是通过 [CSS 扩展](https
 
 ## 浏览器兼容性
 
-[浏览器对 WebVTT 和 `<track>` 元素的支持](http://caniuse.com/webvtt)相当好，尽管有些浏览器在实现上略有不同。
+[浏览器对 WebVTT 和 `<track>` 元素的支持](https://caniuse.com/webvtt)相当好，尽管有些浏览器在实现上略有不同。
 
 ### Safari
 

@@ -44,7 +44,7 @@ slug: Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video
 ### RTSP
 
 > [!NOTE]
-> 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](https://www.mozilla.org/en-US/firefox/os/notes/1.3/)。
+> 实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持，但请留意 [Firefox OS 1.3 支持 RTSP](/Firefox_OS/Releases/1.3)。
 >
 > 某些厂商实现了专有的传输协议，类似 RealNetworks 以及他们的真实数据传输 (RDT)。
 
@@ -69,7 +69,7 @@ RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 
 ## 媒体源扩展 (MSE)
 
-[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) 是一个 W3C 的工作草案，计划用来扩展 {{ domxref("HTMLMediaElement") }} 使其支持使用 JavaScript 来生成用于播放的媒体流。使用 JavaScript 来生成流对于自适应流和时移实时流来说非常好用。
+[Media Source Extensions](https://w3c.github.io/media-source/) 是一个 W3C 的工作草案，计划用来扩展 {{ domxref("HTMLMediaElement") }} 使其支持使用 JavaScript 来生成用于播放的媒体流。使用 JavaScript 来生成流对于自适应流和时移实时流来说非常好用。
 
 比如，[在卸载 MSE 解码器后，你可以通过 JavaScript 实现 MPEG-DASH](https://web.archive.org/web/20170504035455/https://msopentech.com/blog/2014/01/03/streaming_video_player/).
 
@@ -88,7 +88,7 @@ RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。
 DASH 意即基于 HTTP 的动态自适应流，最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE)，这些扩展被[DASH.js](https://github.com/Dash-Industry-Forum/dash.js/)之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块，并且将它“添加”到 {{ htmlelement("video") }}元素正在播放的流中。正因如此，如果我们检测到网络缓慢，我们可以从下一段开始请求低质量（较小）的数据块。这种技术也允许添加广告片段到流中。
 
 > [!NOTE]
-> 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification).
+> 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](https://wiki.webmproject.org/adaptive-streaming/webm-dash-specification)。
 
 ### HLS
 
@@ -152,7 +152,7 @@ Opus 是一个无版权的开放格式，针对不同类型文件使用不同的
 
 [GStreamer](https://gstreamer.freedesktop.org/) 是一个开源的跨平台的多媒体框架，它可以让你创建各种媒体处理组件，包括流式组件。GStreamer 通过它的插件系统，支持了一百多种编码 (包括 MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV，和 FLV。)
 
-GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-soup.html) 和 [shout2send](https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good/html/gst-plugins-good-plugins-shout2send.html) 通过 HTTP 来传输媒体。你也可以集成 Python 的 Twisted 框架或者使用一些类似 [Flumotion](http://www.flumotion.net/features/) (open source streaming software) 的东西。
+GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/documentation/soup/index.html) 和 [shout2send](https://gstreamer.freedesktop.org/documentation/) 通过 HTTP 来传输媒体。你也可以集成 Python 的 Twisted 框架或者使用一些类似 [Flumotion](http://www.flumotion.net/features/) (open source streaming software) 的东西。
 
 至于传输 RTMP，你可以使用 [Nginx RTMP Module](https://github.com/arut/nginx-rtmp-module)。
 
@@ -176,7 +176,7 @@ GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/da
 ## 参见
 
 - [HTTP 实时流式传输](https://en.wikipedia.org/wiki/HTTP_Live_Streaming)
-- [HLS 浏览器支持](https://www.jwplayer.com/html5/hls/)
+- [HLS 浏览器支持](https://jwplayer.com/html5/hls/)
 - [基于 HTTP Live Streaming 的 JavaScript 播放器](https://github.com/RReverser/mpegts)
 - [HTTP Live Streaming 的基础知识](https://larryjordan.com/articles/basics-of-http-live-streaming/)
 - [用于 HTML 5 视频的 DASH 自适应流](/zh-CN/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video)
@@ -185,14 +185,14 @@ GStreamer 的插件如 [souphttpclientsink](https://gstreamer.freedesktop.org/da
 - [DASH 参考客户端](https://dashif.org/reference/players/javascript/1.0.0/index.html)
 - [HTTP 上的动态流式传输](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)
 - [MPEG-DASH 的部署状态](https://www.streamingmediaglobal.com/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-Deployment-96144.aspx)
-- [看，无需插件：使用媒体源扩展和 MPEG-DASH 实时流式传输到浏览器](https://www.bbc.co.uk/rd/blog/2014/03/media-source-extensions)
-- [媒体源扩展 (W3C)](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html)
+- [看，无需插件：使用媒体源扩展和 MPEG-DASH 实时流式传输到浏览器](https://www.bbc.co.uk/rd/blog/2014-03-media-source-extensions)
+- [媒体源扩展 (W3C)](https://w3c.github.io/media-source/)
 - [Icecast](https://en.wikipedia.org/wiki/Icecast)
 - [SHOUTcast](https://en.wikipedia.org/wiki/Shoutcast)
 - [GStreamer](https://en.wikipedia.org/wiki/GStreamer)
 - [通过 HTTP 流式传输 GStreamer 管道](https://coaxion.net/blog/2013/10/streaming-gstreamer-pipelines-via-http/)
 - [在 web 上使用 GStreamer 传输媒体](http://www.svesoftware.com/passkeeper/cms/article/streaming-media-using-gstreamer-web/)
-- [GStreamer 和树莓派](https://nginx-rtmp.blogspot.it/2013/07/gstreamer-and-raspberry-pi.html)
-- [接受媒体源扩展 (MSE) 作为 W3C 候选推荐将加速 dash.js 的使用](http://msopentech.com/blog/2014/01/09/acceptance-media-source-extensions-w3c-candidate-recommendation-will-accelerate-adoption-dash-js/)
+- [GStreamer 和树莓派](https://nginx-rtmp.blogspot.com/2013/07/gstreamer-and-raspberry-pi.html)
+- [接受媒体源扩展 (MSE) 作为 W3C 候选推荐将加速 dash.js 的使用](https://opensource.microsoft.com/)
 - [流媒体系统对比](https://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems)
 - [Mozilla Hacks - 使用媒体源扩展 (MSE) 传输媒体](https://hacks.mozilla.org/2015/07/streaming-media-on-demand-with-media-source-extensions/)
@@ -94,5 +94,5 @@ window.onload = function () {
 
 ## 参见
 
-- [Hyperaudio's Playback Rate Test](http://hyperaud.io/lab/pbr-test/)
+- [Hyperaudio's Playback Rate Test](https://hyperaud.io/lab/pbr-test/)
 - [HTMLMediaElement reference](/zh-CN/docs/Web/API/HTMLMediaElement)