HTML 无障碍性
提示
- HTML辅助功能的重要性:强调了让网站对所有用户,包括残障人士和移动设备用户,更加友好和易于访问的重要性。
- 实现辅助功能的方法:提出了几种方法来增强HTML的辅助功能,如使用语义化HTML、提供良好的替代文本、正确使用标题、设置HTML语言属性和编写描述性链接文本。
- 网络辅助功能标准:介绍了网络辅助功能的组成部分,包括Web内容、用户代理和授权工具,以及在某些国家,将辅助功能整合入网站是法律要求。
辅助功能是指让你的网站尽可能对更多用户友好的实践。它有助于残障人士和使用移动设备或网速较慢的互联网连接的人士。
使 HTML 辅助功能更强的方法
通过确保正确的 HTML 元素被用于正确的目的,可以使网页内容更易于访问。使 HTML 辅助功能更强的一些主要方式如下:
- 语义化 HTML
- 良好的替代文本
- 正确使用标题
- HTML lang 属性
- 描述性链接文本
我们将详细了解每一种方式:
语义化 HTML
语义化 HTML 意味着出于正确的目的使用正确的 HTML。如果你的网页上需要一个按钮,请使用 <button>
标签而不是 <div>
标签。例如,
<button>
标签
<button>登录</button>
浏览 器输出
<div>
标签
<div>登录</div>
<style>
div,
button {
border: 1px solid #767676;
display: inline;
padding: 5px;
background: #efefef;
border-radius: 3px;
font-family: "Arial";
}
</style>
浏览器输出
如你所见,通过一些 CSS,我们也可以使 <div>
看起来像 <button>
。有些人也这样做,但这对辅助功能来说非常不利。按钮有一些内置的辅助功能特性,如果我们使用 <div>
就会错过这些特性。其中包括:
- 可点击
- 可聚焦
- 屏幕阅读器将其读作按钮。
- 它可以通过键盘访问。
- 还有更多。
因此,使用明确定义其内容的适当语义化 HTML,如 <form>
、<article>
、<figure>
、<header>
,比使用像 <div>
或 <span>
这样的非语义标签更好,因为后者不会提供关于内容的任何信息。
良好的替代文本
alt 属性是图像的文本描述。alt 属性的值应描述图像,使得即使图像无法加载,内容仍然有意义。例如,
<img src="cat.jpg" alt="一只白猫躺在椅子上睡觉" />
在这个例子中,一只白猫躺在椅子上睡觉
由屏幕阅读器大声朗读,这有助于视觉障碍人士理解网页上显示的图像。这对网速慢的人也有益处。
正确使用标题
标题有助于构建文档结构 。标题用 <h1>
、<h2>
、<h3>
、<h4>
、<h5>
和 <h6>
标签定义。
<h1>在线教程</h1>
屏幕阅读器使用标题进行导航。不同类型的标题指定了页面的大纲。标题有助于屏幕阅读器正确传达上下文给用户。