文档

在针对数字无障碍进行设计和设计时，除了结构之外，还有许多辅助性 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 会尝试朗读带有西班牙语口音和节奏的英语文本。这种组合会导致数字商品无法使用，并让用户感到失望。

错误做法
<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>

iFrames

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>

检查您的掌握程度

测试您对文档无障碍功能的掌握情况。

您的网站是一本多语言在线教科书，一页显示多种语言。要让辅助技术知道文案语言的最佳方式是什么？

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