什么是无障碍？
无障碍是指让所有用户在使用同一软件或硬件时都能够获得相同的使用体验，无论是身体上、视觉上、听觉上还是认知上存在何种差异。因此，无障碍涉及到残障人士、老年人、低视觉人群、低听力人群等用户的需求。
常见无障碍问题
1. 屏幕阅读软件无法识别页面内容
在一些页面上，屏幕阅读软件可能无法正确的识别出页面元素，导致这些元素无法被语音输出。这种问题常常出现在图片、按钮、表单元素等地方。
2. 焦点控制问题
当用户使用键盘进行操作时，焦点控制非常重要。如果焦点控制异常，可能会导致用户无法使用键盘进行相应的操作，进而影响整个使用体验。
3. 不充分的语意化标记
无障碍设计需要特别关注语意化标记的重要性。如果页面上的标记不够准确，屏幕阅读软件就会读错或者不读出来。
解决方案
1. 添加 alt 属性
为图片添加 alt 属性可以让屏幕阅读软件读出图片的信息。如果图片是用作链接的，需要在 alt 属性中添加相应的信息。
示例代码：
<img src="example.jpg" alt="这是一张示例图片。">
2. 合理使用 tabindex 属性
对于常规的 HTML 元素，可以通过 tabindex 属性来设置聚焦顺序，确保键盘用户可以按照合理的顺序操作页面元素。同时，要避免使用负值或超出正常tab order的值。
示例代码：
<!-- 按钮的 tab order 为 1 --> <button tabindex="1">按钮</button> <!-- 文本框的 tab order 为 2 --> <input type="text" tabindex="2">
3. 使用语意化标记
使用正确的 HTML 标记可以使得屏幕阅读软件更好地识别页面内容，进而提供更好的使用体验。
示例代码：
-- -------------------- ---- -------
-------------
-------------------
---- ---- ----- --------- ---
-------
-------
-----------
-----------
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------结论
无障碍设计是一项需要长期关注和持续优化的任务，无论是从使用者还是法律规定的角度，都需要考虑到无障碍的要求。上文中提到的几种无障碍问题及其解决方案，只是其中的一部分，需要在项目中具体情况下做细化的针对性的实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ca5589babaf620fb1ba7a