上查看所有课程
可访问性是指尽可能让更多用户能够使用你的网站。它有助于残疾人士以及使用移动设备或缓慢互联网连接的人。
使 HTML 可访问的方法
可以通过确保为正确的目的使用正确的 HTML 元素来使 Web 内容可访问。使 HTML 可访问的一些主要方法如下：
- 语义化HTML
- 良好的替代文本
- 正确使用标题
- HTML lang 属性
- 描述性的链接文本
我们将详细了解每种方法。
语义化HTML
语义 HTML 意味着为正确的目的使用正确的 HTML。如果你需要在网页上放置一个按钮，请使用 <button> 标签，而不是 <div> 标签。例如：
<button> 标签
<button>Login</button>浏览器输出
<div> 标签
<div>Login</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="A white cat sleeping on a chair">在这个例子中，一只白猫睡在椅子上会被屏幕阅读器读出来，这有助于视障人士理解网页上显示的图像。它也有利于网速慢的人。
正确使用标题
标题有助于构建文档结构。标题使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 标签定义。
<h1>Online tutorial</h1>屏幕阅读器使用标题进行导航。不同类型的标题指定了页面的大纲。标题有助于屏幕阅读器准确地向用户传达上下文。
HTML lang 属性
<html> 标签中的 lang 属性向浏览器、翻译软件、屏幕阅读器等标识网页的主要语言。例如：
<html lang="en">
/* rest of the page content in english */
</html>在这里，lang = "en" 指定页面内容为英语。
描述性的链接文本
HTML 链接文本应清楚地解释读者点击它将获得什么信息。
一个好的链接应该总是在锚标签内包含相关的文本。
点击此处、访问 是链接文本的糟糕示例。
描述性链接文本的好例子是 访问 HTML 链接了解更多关于 HTML 链接的信息、访问 Programiz 学习编程 等。
Web 可访问性标准
Web 可访问性依赖于多个协同工作的组件，其中一些如下所述：
- Web 内容 - 指网站的任何部分，包括文本、图像、表单和多媒体。这是我们在 HTML、CSS 和 JS 中编写的代码。
- 用户代理 - 是人们用来访问 Web 内容的软件。
- 授权工具 - 是人们用来开发 Web 内容的软件或工具，包括 Web 编辑器、文档转换工具等。
注意： 在某些国家/地区，在网站上实施可访问性甚至是法律的一部分。