文档

除了结构之外，在构建和设计可实现数字无障碍功能的网站时，还需要考虑许多辅助 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 通常用于广告、嵌入式视频、网站分析和互动内容。

若要使 <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 代码。