在现代的 Web 设计中，无障碍技术越来越受到重视。通过使用无障碍技术，我们可以让网页被更多的人访问，包括使用屏幕阅读器、放大器等辅助工具的残障人士。本文将介绍 80 个无障碍技术的基本要点，帮助你更好地了解无障碍技术，让你的网站更具可访问性。
1. 使用有意义的标题
使用有意义的标题，可以帮助屏幕阅读器和其他辅助工具更好地理解网页的结构和内容，提高用户的使用体验。事实上，一个好的标题不仅可以为残障人士带来好处，也可以提高任何人的阅读体验。
HTML 中有六个级别的标题，分别是 h1-h6。h1 表示最高层级的标题，h6 表示最低层级的标题。请确保在页面中使用适当级别的标题，遵循文档的结构，将文档层次化，并使用有意义的文字。
<!DOCTYPE html>
<html>
<head>
<title>使用有意义的标题</title>
</head>
<body>
<h1>主标题</h1>
<p>这里是一些内容</p>
<h2>次级标题</h2>
<p>这里是一些内容</p>
<h3>三级标题</h3>
<p>这里是一些内容</p>
</body>
</html>2. 提供有意义的文本替换
在对图片、音频、视频等媒体文件描述时，应该提供有意义的文本替换。这样做可以帮助屏幕阅读器用户更好地了解网站内容，同时，如果该文件无法加载，也可以提供有意义的描述信息。
<!DOCTYPE html>
<html>
<head>
<title>提供有意义的文本替换</title>
</head>
<body>
<img src="example.jpg" alt="一只狗在草地上奔跑">
<audio src="example.mp3" controls>
您的浏览器不支持 audio 元素。
</audio>
<video src="example.mp4" controls>
您的浏览器不支持 video 元素。
</video>
</body>
</html>3. 使用语义化的 HTML 标签
使用语义化的 HTML 标签可以让屏幕阅读器等辅助工具更好地了解网站结构和内容。语义化的标签有助于提高可访问性，同时也有助于搜索引擎优化（SEO）。
<!DOCTYPE html>
<html>
<head>
<title>使用语义化的 HTML 标签</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这里是一些内容</p>
</article>
<aside>
<h2>侧栏标题</h2>
<p>这里是一些内容</p>
</aside>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>4. 提供高对比度的颜色方案
提供高对比度的颜色方案可以帮助视力受损用户更好地访问网站。色彩对比的级别应当达到最佳读取性能（通常为 4.5:1），以确保用户可以轻松地阅读文本和其他元素。
button {
background-color: #0069d9;
color: #fff;
border: 1px solid #0069d9;
border-radius: 4px;
padding: 10px 16px;
}
button:hover {
background-color: #0052b3;
border: 1px solid #0052b3;
}5. 使用适当的字体和字号
使用适当的字体和字号可以让用户更轻松地阅读网站内容。应该使用容易识别的字体，字体大小应该尽可能大，但也不要太大，防止出现排版问题。同时，重要的信息应该突出显示。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
h1 {
font-size: 30px;
font-weight: bold;
color: #000;
}
h2 {
font-size: 24px;
font-weight: bold;
color: #333;
}6. 提供键盘导航和焦点指示
提供键盘导航和焦点指示可以帮助键盘用户更好地使用网站。确保所有可交互元素都可以使用 Tab 键进行导航，并提供清晰的焦点指示效果。
button,
a,
input[type="text"],
input[type="button"],
input[type="radio"],
input[type="checkbox"],
select {
&:focus {
outline: 2px solid #ffbf47;
outline-offset: 2px;
}
}7. 使用易于理解的 URL
URL 应该使用易于理解的、以字母和数字为主的文本，而不是含义难以理解的字符和数字。这会帮助用户维护和记住链接，增强可用性。同时，应该尽可能使用永久链接，以确保链接的可用性和稳定性。
<a href="/archives/how-to-write-accessible-code.html">如何编写无障碍代码</a>
8. 使用有意义的链接文本
使用有意义的链接文本有助于提高可读性和可用性，同时还可以帮助残障人士更好地了解链接内容。应该使用精简的、描述性的文字作为链接文本，而不是使用含义不明的文字或 URL。
<a href="/archives/how-to-write-accessible-code.html">如何编写无障碍代码</a>
9. 使用语音输入和音频说明
对于具有听觉障碍的用户，在语音输入和音频说明方面应该提供支持。语音输入接口可以让用户用语音交互完成一些操作，而音频说明可以解释视觉内容的信息。
<!DOCTYPE html>
<html>
<head>
<title>使用语音输入和音频说明</title>
</head>
<body>
<input type="text" x-webkit-speech>
<audio controls>
<source src="example.ogg">
<source src="example.mp3">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>10. 使用 ARIA 属性增强可访问性
ARIA 属性为无障碍设计提供了一种增强可访问性的方法，可以帮助开发人员更好地与辅助技术进行交互。ARIA 属性可以向屏幕阅读器等辅助工具提供更多的信息，以增强可访问性。
<!DOCTYPE html>
<html>
<head>
<title>使用 ARIA 属性增强可访问性</title>
</head>
<body>
<button role="button" aria-pressed="false" aria-label="打开">
<i class="fa fa-bars"></i>
</button>
</body>
</html>11. 使用访问键提供快速导航
为网站设置访问键可以让键盘用户更快地导航，以达到更快的网站访问效率。在访问键中应该选择不与页面快捷键冲突的字母或数字，同时也应该将其与其他辅助工具兼容。
<!DOCTYPE html>
<html>
<head>
<title>使用访问键提供快速导航</title>
</head>
<body>
<a href="#main" accesskey="m">跳转到主内容区</a>
</body>
</html>12. 适当使用动态效果
动态效果可以让网站更具活力，吸引更多的用户。但是，过度使用动态效果可能会导致用户注意力分散，不利于视觉受损人士和其它一些用户的使用体验。因此，应该谨慎使用动态效果，确保它们不会对用户造成困扰。
@keyframes example {
0% {
background-color: #f00;
}
50% {
background-color: #0f0;
}
100% {
background-color: #00f;
}
}
div {
animation: example 5s infinite;
}13. 使用清晰的填写说明
网站中的所有表单都应该有清晰明确的填写说明，以帮助用户更好地理解填写表单的过程。填写说明应该使用简明易懂的语言，尽量不使用专业术语。同时，应提供警告信息以帮助用户识别错误。
<!DOCTYPE html>
<html>
<head>
<title>使用清晰的填写说明</title>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入您的用户名">
<span class="warning">4-16 个字符，由字母、数字和下划线组成</span>
</form>
</body>
</html>14. 使用无障碍模拟器测试
使用无障碍模拟器可以帮助开发人员测试网站的可访问性，以提高网站的质量。无障碍模拟器可以模拟键盘导航、屏幕阅读器、色盲等场景，帮助开发人员更好地了解用户体验。
总结
无障碍技术是一种让网站更加容易被残障人士访问的技术。通过了解基本无障碍技术的要点，并在设计阶段合理融入无障碍技术，可以帮助我们创建具有更好访问性的网站，提高用户的体验和效益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ae226aadd4f0e0ff7aff5f