什么是无障碍访问（Accessibility）？
无障碍访问是指通过一定的技术手段，使得在残障人士、老年人和特殊人群面临的困难得到一定程度的缓解，使得网络资源能够更为广泛地被人类社会所利用和分享，进而构建一个更为包容的信息社会。
为什么要关注无障碍访问？
- 社会责任：合理促进公平竞争，增强企业社会责任感。
- 法律法规：国内外越来越多的法规要求网站遵循无障碍标准。
- 用户需求：障碍用户也会是你网站的访问者。
无障碍的好处
- 提升用户体验，使得更多用户能够访问你的网站、应用。
- 无障碍规范与SEO优化有着高度重叠性，遵循规范能够提升网站收录和排名。
- 提升品牌形象，展示企业的社会责任感和人文关怀。
- 减少无效诉讼，因为越来越多的法律规定规定网站必须遵循无障碍标准。
无障碍访问标准
无障碍访问标准分为两个主要部分：
- Web Content Accessibility Guidelines (WCAG)，Web内容无障碍访问指南。
- Accessible Rich Internet Applications (ARIA)，可访问的富互联网应用。
WCAG
WCAG 包含四个主要原则：Perceivable（可感知性）、Operable（可操作性）、Understandable（易理解性）、Robust（鲁棒性），其中每个原则包含了若干要求和技术指南。
1. Perceivable
Perceivable 原则要求网页的内容和组件应该与所有的用户，包括残障人士和老年人士一样可感知。这包括以下要求：
- 提供适当的文本替代品，使非文本内容可通过屏幕阅读器等工具呈现。
- 提供可以放大的文本、可调节大小的页面内容和布局，方便用户阅读。
- 相似功能应该使用相同的表现形式，以降低困扰用户的复杂程度。
2. Operable
Operable 原则要求网页内容和组件的导航和操作在各种用户代理中都应该可用。这包括以下要求：
- 所有用户可以使用键盘或其他输入设备来访问和导航网站内容，而没有必要纯粹依赖于鼠标。
- 所有用户可以有足够的时间足以解读和使用页面上的内容，而没有其他无法控制的事件干扰。
- 所有用户都可以获得和操作不易抖动的内容，不会对阅读和操作构成干扰。
3. Understandable
Understandable 原则要求网页内容和组件应该清晰，易于理解。这包括以下要求：
- 为不同的用户提供内容的不同表述，使得用户不会因为他们自身而无法理解所提供的内容。
- 提供页面词汇表，方便用户查看关键词的含义。
- 提供一致的布局和导航，使用户方便找到需要的内容。
4. Robust
Robust 原则要求网站应该能够各种设备上稳定地运行和显示，并且应该与未来的技术和辅助技术兼容。这包括以下要求：
- 为可能使用特殊软件、辅助技术或辅助设备的用户留下余地。
- 提供无障碍交互设计，使得页面布局和各种交互设计易于理解。
- 提供极少的必填项和验证规则，以降低用户使用难度。
ARIA
ARIA 是一个文档，其中定义了一些规范和属性，开发人员可以使用这些规范和属性，来为网站和应用程序提供辅助性功能，使得障碍用户可以方便的浏览网站或使用应用。
ARIA 的主要功能包括：
- 角色（Application role，widget role）：定义部件或元素的角色，提供正确的交互处理和辅助技术呈现（比如 aria-hidden=”true/false”属性）。
- 属性（State and property）：定义状态和属性，这些属性和状态不被DOM和HTML表单元素覆盖，如行间距和文本对齐（比如 aria-disabled=”true/false”属性）。
- 描述（Description）：定义描述性文本，特别是对于某些组件类型，如元素输入提示（比如 aria-describedby=”ID”属性）。
简单实例
--------- -----
----- ----------
------
----- ----------------
----------------------
-------
------
---- ------------------
----
------ ----------------------
------ --------------------------
------ -------------- -----------
------ ---------------- -----------
-----
------
----- ------------
------------------
-----------------------------------------------------
----- --------------
------ ----------------------------
------ ------------- ----------- --------------
------- -----------------------------
-------
---------
--------
----------------
---------
----
------ ---------------------
------ ---------------------
------ ---------------------
-----
----------
-------
------- -------------------
-----------------
---------
-------
-------结论
通过本文的介绍，我们了解了无障碍访问的定义、其重要性和好处，并介绍了无障碍访问标准中 WCAG 和 ARIA，以及在实际开发中所使用的一些示例代码。开发一个遵循无障碍标准的网站，对于我们的社会是一件有意义的事情，也是我们应该去关注的事情。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721da622e7021665e090f78