前言
在设计 Web 页面时，我们通常会考虑到用户友好性，但有些人可能会忽略一部分使用较困难的用户，例如视力受损、听力受损、智力障碍等，他们需要用到一些特殊的工具才能够访问页面，这就需要我们去了解 Web 无障碍技术了。
什么是 Web 无障碍技术？
Web 无障碍技术（Web Accessibility，简称 Web A11y）指的是通过一系列技术手段，为使用特定辅助功能的用户提供平等、可访问的 Web 内容，使得那些被互联网内容和应用排除在外的用户可以同样获得信息和实现服务。
Web A11y 技术不仅可以帮助有障碍的用户可以更容易地访问网站，还可以提高普通用户体验，同时也有助于网站的 SEO 优化。
Web A11y 的实现
语义化 HTML 标签
语义化的 HTML 标签可以减少屏幕阅读器与浏览器的工作量，也方便搜索引擎解析页面结构。比如，不要使用 div 代替 h1 - h6 标签、不要使用 span 代替 button 标签等。
例如，以下代码块是语义化标签实现的例子：
-- -------------------- ---- -------
--------
---------------
-----
----
------ ---------------------
------ ---------------------
------ ---------------------
-----
------
---------alt 属性和 title 属性
alt 属性和 title 属性可分别添加在 img 标签上和链接标签上。针对视力受损的人群，screen reader 会读取 alt 属性中的文字，尽管图像不可见；而 title 属性则可为所有人群提供额外的说明。
<img src="picture.jpg" alt="这是一个图片" /> <a href="#" title="这是一个链接">点击这里</a>
颜色对比度
颜色不充分对比会使页面的阅读体验变得困难。Web A11y 技术建议使用对比度工具检查页面的颜色对比情况，并对低对比度的部分进行修改。
标签结构
正确的标签结构可以帮助屏幕阅读器等辅助功能工具有效地理解页面结构和内容。合理使用 header、main、nav、article、aside、footer 等语义化标签可提高页面可访问性。
-- -------------------- ---- -------
--------
---------------
-----
----
------ ---------------------
------ ---------------------
------ ---------------------
-----
------
---------
------
---------
---------------
-------------
----------
-------
----------------
--------------
--------
-------
--------
-------------
---------Web A11y 的好处
提高用户体验
通过遵循无障碍技术标准和实践，Web 网站可以更好地为所有用户提供优质的体验。例如，对于视力不好用户，允许他们放大和缩小网站，并对网页内容进行更高的对比度设置，有助于他们更好地使用 Web 网站。
遵守法律法规
随着 Web 网站的普及，政府机构和组织制定了一些 Web 无障碍性条例和规范。为了遵守法律法规，这些 Web 无障碍规范经常被併入到组织的标准操作模式之中。因此，网站的访问者不但可以更好地访问网站内容，还能够更好地接受到来自组织的信息。
总结
Web A11y 技术应该是 Web 页面设计过程中的一个不可或缺的部分，如果合理使用 Web A11y 技术，可以让那些无法通过常规方式访问网站的用户同样获得优质的体验。作为前端开发工程师和 Web 设计师，我们应该在设计和实现 Web 页面时始终保持人性化设计，为无障碍用户提供平等、可访问的 Web 内容。
示例代码
以下代码是一个 Web 无障碍技术实现的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
-- ------------ --
- -
------ --------
----------------- --------
-
-- ------------- --
---- -
------ -----
----------------- -----
-
--------
-------
------
--------
---------------
-----
----
------ ----------- ----------
------ ----------- ----------
------ ----------- ----------
-----
------
---------
------
---------
---------------
-------------
----------
-------
----------------
--------------
--------
-------
--------
-------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9d92348841e98945f280f