文档

除了结构之外,在构建和设计数字无障碍功能时,还有许多支持性 HTML 元素需要考虑。在“学习无障碍功能”课程中,我们介绍了许多元素。

本模块重点介绍一些非常具体的元素,这些元素不太适合归入任何其他模块,但有助于您了解。

网页标题

HTML <title> 元素用于定义用户即将体验的网页或屏幕的内容。它位于 HTML 文档的 <head> 部分,相当于网页的 <h1> 或主要主题。标题内容会显示在浏览器标签页中,有助于用户了解自己访问的是哪个网页,但不会显示在网站或应用本身中。

单页应用 (SPA) 中,<title> 的处理方式略有不同,因为用户不会像在多页网站上那样在页面之间导航。对于 SPA,document.title 属性的值可以手动添加,也可以通过辅助软件包添加,具体取决于 JavaScript 框架。向屏幕阅读器用户播报更新后的网页标题可能需要额外的工作。

描述性网页标题既有利于用户,也有利于搜索引擎优化 (SEO),但请勿过度添加大量关键字。由于当 AT 用户访问网页时,系统会首先播报标题,因此标题必须准确、独特、具有描述性,同时还要简明扼要。

撰写网页标题时,最佳做法是先“前置”内部网页或重要内容,然后再添加任何前面的网页或信息。这样,辅助技术用户就不必再听他们已经听过的信息。

错误做法
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
正确做法
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

语言

网页语言

网页语言属性 (lang) 用于设置整个网页的默认语言。此属性已添加到 <html> 标记中。应向每个网页添加有效的语言属性,以便向辅助技术 (AT) 表明应使用哪种语言。

建议您使用双字符 ISO 语言代码,以扩大 AT 覆盖范围,因为许多 AT 不支持扩展语言代码

如果完全缺少语言属性,辅助技术会默认使用用户设置的语言。例如,如果 AT 设置为西班牙语,但用户访问的是英语网站或应用,则 AT 会尝试以西班牙语口音和语调朗读英语文本。这种组合会导致数字产品无法使用,并让用户感到沮丧。

错误做法
<html>...</html>
正确做法
<html lang="en">...</html>

lang 属性只能关联一种语言。这意味着,即使网页上有多种语言,<html> 属性也只能有一种语言。将 lang 设置为网页的主要语言。

错误做法
<html lang="ar,en,fr,pt">...</html>
不支持多种语言。
正确做法
<html lang="ar">...</html>
仅设置网页的主要语言。在这种情况下,语言为阿拉伯语。

版块语言

您还可以使用语言属性 (lang) 在内容本身中切换语言。基本规则与完整网页语言属性相同,只不过您需要将其添加到相应的页内元素,而不是 <html> 标记。

请注意,您添加到 <html> 元素的语言会向下级联到所有包含的元素,因此请务必先设置页面顶级 lang 属性的主要语言。

对于以其他语言编写的任何页内元素,请将该 lang 属性添加到相应的封装容器元素。这会替换顶级语言设置,直到该元素关闭。

错误做法
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
正确做法
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iframe

iFrame 元素 (<iframe>) 用于在网页中托管其他 HTML 网页或第三方内容。它实际上是将另一个网页置于父网页中。iframe 通常用于广告、嵌入式视频、网站分析和互动式内容。

为了让您的 <iframe> 易于访问,您需要考虑以下几个方面。首先,每个具有不同内容的 <iframe> 都应在父标记内包含一个标题元素。此标题可为辅助技术 (AT) 用户提供有关 <iframe> 内内容的更多信息。

其次,根据最佳实践,最好在 <iframe> 代码设置中将滚动设置为“自动”或“是”。这样,低视力人士便可以滚动浏览 <iframe> 中的内容,否则他们可能无法看到这些内容。理想情况下,<iframe> 容器的高度和宽度也应灵活可变。

错误做法
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
正确做法
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>