在日常生活中，存在很多人们可能不为所知的障碍物，但它们确切地存在于生活中的每一天：一位居住在较为安静的社区里的前邻居，一个有色盲问题的同事，一个过度疲劳的学生，以及正在寻找喷泉的盲人游客。无障碍设计是一种在设计网页时考虑到所有这些情况以及其他类似情况的设计过程。它可以大大提高网页的可用性，使其能够扩展，并为所有人提供更好的访问体验。本文将介绍无障碍设计的最佳实践、能够帮助你构建无障碍网站的技巧和简单示例代码的使用。
使用 Aria 标准
Aria（可访问性相关的Internet资源）是一种用于构建无障碍网站的开放性标准。它允许在网页上添加语义元素，指示读屏软件和其他辅助技术如何解释网站。Aria主要集中在添加可访问性信息来描述当前操作的状态和元素的角色。下方是一些实际示例。
-- -------------------- ---- -------
---- -------------------------- ---
------- ---------------- ----- ------------------------------
---- ---------------- ---
---- ---------------
---- ---------- -------------------- ---------------- -------
---- ---------- ------------ ------------------------- -------
---- ---------- ------------ ------------------------- -------
------
---- --------------------------- ---
------ ------------
-------
----
--- ------------------------ ------------------- --------------------------
--- ----------------------- ------------------- -------------------------
--- ------------------------- ------------------- ---------------------------
-----
-------
-------
--- -----------
---------------
-----------
-----------
-----
--- -----------
--------------
-----------
-----------
-----
--------
--------语言选择
在网站的设计过程中，应该设立一种简单的方法，让访问者能够选择网站所使用的语言。这对于有多重语言的网站或者含有多重翻译的网站来说是非常重要的。语言选择也将会通知读屏软件，以便更好地适应语言环境。
以下是一些简单示例，用于让访问者选择网站语言：
-- -------------------- ---- ------- ------- ---------------------------- ------- -------------------------------- ------- -------------------------------- ------- -------------------------------- --------- ------- ---------------------------------------------------- ------- ---------------------------------------------------- ------- ----------------------------------------------------
颜色对比度
对于有些访问者而言，是无法分辨出某些颜色之间细微的变化，从而导致网页的使用可读性非常差。因此应该确保网站中的所有颜色对比度足够，以方便这些访问者区分不同的元素和内容。除此之外，颜色对比度背后的原则对于任何人而言都非常重要，因为对于一些人来说，光线变化或者周围的色彩环境可能也会对颜色对比度造成影响。
以下是一些常见颜色对比度值：
- AA标准：4.5：1
- AAA标准：7：1
可以通过使用以下方法，来检查你的网站颜色对比度是否合规：
- 使用WebAIM颜色对比检查器。
- 使用Chrome浏览器的 Low Vision Simulation。
- Chrome浏览器的颜色选择器也能辅助判断颜色对比度
让我们来看一个例子。下方的图片显示了一个颜色对比度非常低的网站。如果以红色和浅蓝色来显示文字，那么对于颜色失明的用户，将无法区分它们。
我们可以添加一次对比度检查，来保证网站中的颜色足够对比鲜明。下面是代码示例：
-- -------------------- ---- ------- ---- - ----------------- -------- ------ -------- - ------------- - ------ -------- - --------------- - ------ -------- - ----------- - ------ -------- - ------------- - ------ -------- - ------------- - ------ -------- - ------- --------------------- -------------------- -------------------- - ----------------- -------- ------ -------- - - - ------ -------- - ------- - ------ -------- -
焦点管理
对于称为键盘侠的用户，焦点管理是至关重要的。对于鼠标不是一个好的选择的时候，可以通过前后排序来提供用户更好的操作界面，需要进行一些取舍。在一个没有焦点管理的页面中，当用户使用Tab键时，焦点不断地前后移动，不是用户想要的那样。在这种情况下，必须明确指定每个元素的焦点，以及按下Tab键时control的前后移动方向。
以下是几个示例：
-- -------------------- ---- ------- ---- -- -------- ---------------- --- ----------------------- ------ ----------- ------------- ----------------------- ------ --------------- ------------- ------- ---------------- ----------- ---- ------------------------- --- ------ ----------- ------------- ------ --------------- ------------- ------- ---------------- ----------- ---- -------------------- --- ------ ----------- -------
键盘导航
对于无法使用鼠标、轨迹球或其他指针设备的用户而言，键盘导航是非常重要的交互方式。键盘操作应该能够使用户以正确的顺序访问网站上的所有元素，包括链接、表单和其他互动元素，以便用户能够完全使用网站，而不必依赖于指针设备。
以下是一些示例代码：
-- -------------------- ---- ------- ---- -- --- ---------- ----- ------- --- -- ----------------- ----------- ------------------ ------ ---- ----------- --- ------------- --- ------- ------------- -------------- ---------- -------------- ---------- -------------- ---------- --------- ---- ---------- --- ----------- --- ---- ------------ ------------------- ------------- ------ ------------ ------------ ------------- ------------ -- ------ ------------------------------- ------ ------------ ------------ -------------- ------------ -- ------ --------------------------------- ------ ------------ ------------ -------------- ------------ -- ------ --------------------------------- ------
作为一名前端开发者，无障碍设计是网页设计中的一个非常重要的部分。通过使用 Aria 标准、语言选择、颜色对比度、焦点管理和键盘导航这些技术，能够让你的网站更加容易使用和访问。当你的访问者面临着视觉、听力、认知和其他障碍时，这些技术非常有用。请确保将它们包含在你的网站设计过程中，并始终持续进一步扩展你的技能。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67ce08b1e46428fe9e7d5189