随着智能设备的日益普及，人们对于应用程序的界面要求越来越高，而无障碍性设计已经成为一种必要性。
无障碍性设计（accessibility design）就是指在设计产品时，考虑到所有人的需求和使用问题，以确保所有人都有机会访问产品，无论他们是健康的人还是有任何障碍的人。
在前端开发这一领域，无障碍性设计的考虑需要成为标配。
无障碍性设计的意义
无障碍性设计是一种给所有人提供使用产品的机会的设计方法。以 web 领域为例，无障碍性设计一方面可以让使用者在没有设备的情况下也可以使用网站功能，另一方面则能使那些有视力、听力、肢体上的障碍的人，能够顺利地访问网站，以达到更好的用户体验。
实现无障碍设计的方式
无障碍性设计需要开发者考虑许多方面以确保在所有人使用应用程序时都能得到正确的体验。这些方面的考虑包括如下内容：
语义化的结构
在构建应用程序时，HTML 代码应该在语义上具有清晰的层次结构。这不仅可以使内容更易于理解和维护，还可以让屏幕阅读器和搜索引擎更加易于识别页面中的内容。
-- -------------------- ---- -------
--------
-----
----
------ --------------------
------ ----------------------
------ --------------------
-----
------
---------
------
---------
-------------
-----------
----------
-------
--------
-----------
---------提供合适的 alt 文本
alt 标签是一种用于图片的属性，当图片无法显示或者由于视力障碍不能浏览时，可以使用 alt 标签提供不可用图片的替代信息。
<img src="example.jpg" alt="这里是一幅描述图例">
如何键盘控制网站
网站的键盘控制操作，是非常必要的无障碍设计要素。对于一些无法使用鼠标操作的用户，可以通过键盘访问网站功能。
通过 tabindex 属性可以设置网页元素的 tab 键顺序。如果单击键盘的 tab 键，它应将焦点定位在网站中的下一个可操作元素上。
<div tabindex="1">我是第一个可以获得焦点的元素</div> <div>我是第二个可以获得焦点的元素</div>
表单元素要素
表单元素的设计同样也需要考虑无障碍设计的相关要素。在进行表单元素设计时，应确保标签使用合适的标签，同时，表单元素也需要通过 label 元素关联相应元素之间的关系。否则，对于那些因视力障碍无法使用鼠标的用户来说，输入数据将变得困难。
<label for="name">姓名</label> <input type="text" id="name" name="name">
配色的选择及对比度
无障碍设计调色板应该优先考虑色彩的对比度，以确保颜色的区分度高。且这里建议使用差异大的颜色，这样更具有关键性，比如 black 和 white。
无障碍性设计的指导
在进行无障碍设计时，建议遵从如下几点：
- 明确无障碍设计的目标并使其成为一个团队共识。
- 在最初的主页设计和构建中就考虑无障碍性设计。
- 把无障碍设计当做一种质量要求，在代码质量审查时与其他要求一起审查。
- 对于高度无障碍性需要的应用程序，进行人工的无障碍性测试。
结论
在做无障碍性设计时，应该考虑到所有人的需求，并且能够以全面的方式满足他们的使用要求。如果您是一个前端工程师，那么本文已经为您提供了有关如何实现无障碍性设计，使您的站点更能够覆盖所有人的使用要求的建议。请务必在开发过程中考虑无障碍性设计的相关问题！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752a1358bd460d3ad96a648