除了结构之外,在构建和设计数字无障碍功能时,还有许多支持性 HTML 元素需要考虑。在“学习无障碍功能”课程中,我们介绍了许多元素。
本模块重点介绍一些非常具体的元素,这些元素不太适合归入任何其他模块,但有助于您了解。
网页标题
HTML <title> 元素用于定义用户即将体验的网页或屏幕的内容。它位于 HTML 文档的 <head> 部分,相当于网页的 <h1> 或主要主题。标题内容会显示在浏览器标签页中,有助于用户了解自己访问的是哪个网页,但不会显示在网站或应用本身中。
在单页应用 (SPA) 中,<title> 的处理方式略有不同,因为用户不会像在多页网站上那样在页面之间导航。对于 SPA,document.title 属性的值可以手动添加,也可以通过辅助软件包添加,具体取决于 JavaScript 框架。向屏幕阅读器用户播报更新后的网页标题可能需要额外的工作。
描述性网页标题既有利于用户,也有利于搜索引擎优化 (SEO),但请勿过度添加大量关键字。由于当 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>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>