文档

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

本模块重点介绍非常具体的元素，这些元素不太适合任何其他模块，但有助于理解。

页面标题

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

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

描述性页面标题对用户和 搜索引擎优化 (SEO) 都有好处，但不要过度并添加大量关键字。由于标题是 AT 用户访问页面时首先播报的内容，因此它必须准确、独特且具有描述性，但也要简洁。

在编写页面标题时，最佳做法也是“前置加载”内部页面或重要内容，然后添加任何前面的页面或信息。这样，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 设置为西班牙语，但用户访问了英语网站或应用，则 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 通常用于广告、嵌入式视频、Web 分析和交互式内容。

为了使您的 <iframe> 可访问，需要考虑几个方面。首先，每个具有不同内容的 <iframe> 都应在父标记内包含一个标题元素。此标题为 AT 用户提供有关 <iframe> 内内容的更多信息。

其次，作为最佳实践，最好在 <iframe> 标记设置中将滚动设置为“auto”或“yes”。这允许低视力人士能够滚动到 <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>

检查您的理解情况

测试您对文档无障碍功能的知识。

您的网站是一个多语言在线教科书，其中一个页面上显示多种语言。告知辅助技术副本语言的最佳方式是什么？

不用担心，AT 可以自动读取每种语言。
虽然某些 AT 可能具有语言检测技能，但您无法保证 AT 会正确猜测。
在 <html> 元素中包含所有语言。例如 <html lang="en,lt,pl,pt">
lang 属性只能关联一种语言。
为 <html> 设置主要 lang，并在任何包含不同语言内容的元素上设置其他语言。
AT 将主要依赖 <html> 语言属性来读取文档。如果您有多种语言的文本，请确保将 lang 属性添加到具有正确双字母 ISO 代码的相应元素（例如节或段落）。