随着互联网的不断发展，现代化的网站和应用程序已经成为人们工作和生活的必要工具。但是，我们往往忽视了一部分观众对于使用网站和应用的艰难，特别是那些身体有障碍或功能有限的用户。
障碍设计指的是将网站和应用程序设计成适用于所有人的界面，而不仅仅是健康的人。它可以让身体残缺或功能有限的人士更容易地使用你的网站或应用程序。
为什么需要无障碍设计？
虽然现代化的网站和应用程序可以给人们带来便利，但是，对于很多人来说，并不是一件轻松的事情。事实上，有很多人在使用网站和应用程序时遇到了困难或失望。
下面是为什么无障碍设计非常重要的原因：
- 包容性：无障碍设计意味着将设计感官考虑到用户群体中的第三方，不论他们经历过什么。这种设计可以让特定的能力和困难没有问题的人们融入到社区中。
- 企业责任：通过无障碍设计，企业实际上将其责任传达给所有人，包括那些可能面临更大挑战的人。
- 涉及更多的人：大约有15%的全球人口存在各种障碍。无障碍设计可扩大你的用户群。
如何做无障碍设计？
为了是你的网站和应用程序无障碍设计，你需要遵循一些合适的原则，使你所创建的内容适用于所有人，而不仅仅是健康的人。
下面是一些无障碍设计的原则：
通用性
这意味着用户可以使用他们选择的方法来访问你的内容。这些方法包括键盘、指针设备、语音和视觉反馈。应用通用原则，无论用户如何接近你的应用，都可以访问应用，优先考虑键盘访问，这对于一些用户来说是最容易使用的。
HTML提供了一种标准语义来描述网站内容。将HTML标记格式应用于站点的元素和结构，以使人们使用更多的辅助技术可访问。
可视性
用色盲友好的颜色、对比度强的颜色、容易分辨的图片、更大的字体、易读的文字等等，使信息在任何条件下都可读，例如：
-- ------------- -- ---- - ---------- ----- ------------ ---- ------------ -------- ----------- ----------------- -------- ------ ----- - --- --- --- --- --- -- - ------------ ----- ------ ----- - - - ------ -------- ---------------- ----- -------------- --- ----- -------- --------------- ---- - ------- - ----------------- -------- - ------------ - ------------- -------- ------------- ---- -------- ----- -
可听性
通过辅助技术提供声音和音乐效果。例如，当视力障碍者通过网站键入文本时，会自动读出文本内容。
-- --------------------------------------- --- ---------------- - -------------------------------------------- ----------------------------------
单一的语义
避免在页面上使用大量的HTML标记和样式。应该尽量减少“div”标记或样式修饰符。只使用平易近人的标记或者针对特定语义的 HTML 元素。
-- -----
---- ------------------
----
------ --------------------
------ ---------------------------
------ -----------------------------
-----
------
-- ------
----
--- ------------------- ----------------------
--- -------------------- ----------------------------
--- ---------------------- --------------------------------
-----这些原则可以协助你设计无障碍的网站以达到更好的用户体验。
结论
良好的无障碍设计可以让每个人更容易地使用你的网站或者应用程序。只要你按照通用可访问性标准和惯例进行设计，结合高质量的听觉、视觉、和可审计的代码编写风格，你就可以使你的内容更易于访问，而且可以覆盖到更广泛的受众。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721c82f2e7021665e08bcc8