网站无障碍性是指网站可以让所有人都能够访问和使用，无论他们的能力水平如何。对于视力障碍、听力障碍、精神障碍、肢体残疾等人群来说，无障碍网站是必须的。在前端开发中，我们经常可以遇到一些与无障碍有关的问题，下面是一些常见的 Web 无障碍问题及解决方法。
图片标签未添加 alt 属性
图片是无法被视力障碍等特殊人群所观看和理解的。在这种情况下，让 screen reader（屏幕阅读器）阅读器尝试去读取一张没有 alt 属性的图片是没有意义的。因此，我们应该在图片标签中添加 alt 属性来描述图片的意义和内容。
<img src="example.jpg" alt="example image" />
非文本元素只通过颜色来传达信息
有些设计师可能会将元素的状态通过改变颜色来传达，比如说对于一个按钮而言，当鼠标悬停在上面时，其背景颜色会发生改变，让用户知道当前鼠标处于按钮上方。但是，对于盲人等视障人士来说，他们无法看到颜色的变化。因此，我们应该使用音频提示、文本描述、图标等方式来告知他们元素的状态。
.btn:hover {
background-color: #333;
/* 这里也该加上一个提示的 */
color: #fff;
}不清晰的信息标签
当使用屏幕阅读器的人在网站上浏览时，他们希望可以清晰地获得必要的信息。但是，如果 div 或 span 等通用标签被用来包含重要数据时，势必会给用户带来困扰。因此，我们应该使用 <h1> 到 <h6> 标签来区分文本的重要性，通过显式地定义标题级别来促进使用屏幕阅读器阅读内容。
<h1>Heading 1</h1> <p>Paragraph text</p>
音频和视频没有字幕
对于聋哑人士和有听力障碍的人群来说，添加字幕或其它单词辅助效果是非常重要的。比如说，网站的视频通常有讲述，如果没有字幕，这类人群是无法从视频中获取知识的。因此，我们应该为所有的音频和视频文件添加字幕。
<video controls> <source src="example.webm" type="video/webm"> <track kind="captions" src="example.vtt" srclang="en" label="English captions"> </video>
聚焦状态不明显
对于一些特定人群来说，比如老年人和鼠标不灵敏的人，通过键盘对网站进行探索是一种更有效的方式。因此，我们需要为可以让用户聚焦的元素添加锚点，并且在聚焦时能够明确的突出显示。
a:focus, button:focus {
outline: 2px solid #f90;
}结论
在设计和开发 Web 应用程序时，请考虑所有人的需求和使用情况，让您的内容和交互更容易被所有人理解和操作。了解基本的网页无障碍性要求，掌握最佳的实践，这样可以帮助你创建出更好的应用程序，通用的实践可以保证您的面向目标的网站到处都能避免成为障碍因素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6776092d6d66e0f9aa09225a