在现代网页中，可点击元素无处不在。然而，对于一些使用屏幕阅读器等辅助技术的用户来说，这些元素并不一定易于识别和操作。因此，无障碍设计应当成为前端开发人员关注的重点。
为什么要关注无障碍设计？
许多人面临身体或认知上的障碍，需要依靠辅助技术才能使用互联网。这些技术的功能比较有限，因此在设计网页时，我们需要特别关注一些问题，以便让这些用户也能够完整地浏览和使用我们的网站。否则，这些用户就会遇到诸如不能跳转链接，无法播放视频等问题，这将极大地影响他们的使用体验。
如何让可点击元素更易识别？
以下是一些通过无障碍设计来增加可点击元素识别的方法。
1. 增加元素的对比度
用户对不同颜色的区分能力和对识别图形的能力各不相同。因此，在使用可点击元素时，我们应该设计具有足够对比度的元素，在页面上可以清晰地与其它元素区分开来，避免让用户产生混淆。例如，一个灰色的按钮在浅灰色背景上可能显得比较苍白，难以被用户识别。因此，我们可以改变按钮的颜色，或打造一种与背景颜色形成鲜明对比的背景。
<button style="background-color: purple; color: white">点击这里</button>
2. 添加描述性标签
对于盲人或视野受限者来说，图像或图标是无法识别的，因此，我们应该使用描述性标签，以便这些用户能够使用代码轻松地查找和了解内容。
<a href="https://www.github.com" aria-label="前往 Github" >访问 Github</a>
这里我们使用了 aria-label 属性，该属性使屏幕阅读器能更好地读取页面内容。
3. 增加焦点状态
大多数用户在使用键盘时需要一个可见的焦点状态来确定他们正在使用的元素，以便再次单击或按下单个键时将其激活。我们可以通过CSS来自定义焦点元素的样式，使其更具可视性。
:focus {
outline: 2px solid blue;
}4. 增加键盘支持
对于使用屏幕阅读器或键盘的用户而言，键盘是他们的主要工具，因此设计时应该考虑到键盘的使用方式。例如，如果我们添加了一些交互元素（如工具提示），那么键盘的用户也应该能够使用 Tab 或其他键盘快捷键来浏览这些元素。
<button onclick="console.log('Hello, World!');" tabindex="0">键盘支持</button>我们可以使用 tabindex 属性来定义在用户使用 Tab 键遍历网页时，元素出现的顺序。
结论
通过在可点击元素上增加描述性标签、焦点状态以及键盘支持等方法，我们可以让屏幕阅读器用户和视野受限者更轻松地访问我们的网页。无障碍设计不仅可以提高我们网站的可访问性，也符合伦理责任和社会责任，与社会共同发展紧密相关。以上介绍的这些方法只是无障碍设计的冰山一角，希望广大前端开发人员可以重视无障碍设计，积极推进无障碍设计的研究和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f66d61c5c563ced585c8cd