文档

除了结构之外，在设计应用时，还需要考虑许多支持 HTML 元素 打造和设计数字无障碍环境。在学习过程中 “无障碍”课程，其中介绍了许多元素。

本单元的重点是非常具体的元素，这些元素并不适合 但最好理解。

网页标题

HTML <title> 元素用于定义用户即将访问的网页或屏幕的内容 体验它位于 以下网站的<head>部分： 一个 HTML 文档，相当于 <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>
<ph type="x-smartling-placeholder"></ph> 不支持多种语言。
正确做法
<html lang="ar">...</html>
<ph type="x-smartling-placeholder"></ph> 仅设置页面的主要语言。在本示例中，语言为阿拉伯语。

版块语言

您也可以在内容本身中使用语言属性 (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>

检查您的理解情况

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

您的网站是多语言在线教科书，在一个页面上显示多种语言的内容。向辅助技术传达文案所用语言的最佳方式是什么？

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