除了结构之外,在设计应用时,还需要考虑许多支持 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>
检查您的理解情况
测试您对文档无障碍功能的掌握情况。
您的网站是多语言在线教科书,在一个页面上显示多种语言的内容。向辅助技术传达文案所用语言的最佳方式是什么?
<html>
元素中添加所有语言。例如 <html lang="en,lt,pl,pt">
lang
属性只能关联一种语言。<html>
设置主要 lang
,并为内容采用其他语言的任何元素设置其他语言。<html>
语言属性来读取文档。如果您有多语言文本,请务必使用正确的两个字母 ISO 代码向相应元素(例如章节或段落)添加 lang
属性。