什么是无障碍性？
无障碍性(Accessibility)是指在设计、开发网站、APP等数字产品时，要考虑到所有用户，包括身体上、认知上、视力、听力、运动能力上有不同的需求用户。无障碍性目的是使所有用户都能平等地使用数字产品。我们通过在设计和实现方面遵循一些规范和最佳实践，就能让更多的人访问和使用我们的数字产品。特别是对于盲人、聋哑人、颜色视觉障碍、老年人等用户，无障碍性的要求是比较高的。
为什么需要无障碍性？
首先，无障碍性是一种应该被高度关注的价值观。所有用户平等访问数字产品不能被忽视。其次，无障碍性是政府或大公司对于数字产品的要求之一。例如：反歧视法、全球化的目标等。而且，现在越来越多的用户也开始体会到了无障碍性的重要性。
无障碍性指南
使用语义化
语义化是为了使阅读体验更好。语义化标记不仅能够增强用户的阅读体验和SEO结果，还能够帮助需要依赖结构化数据的读屏软件、语音软件更好地理解网站内容。
示例：
<!--不语义化--> <p style="font-size: 30px;">这是一段介绍...</p> <!--语义化--> <h2>这是一段介绍</h2>
增加页面的可访问性
例如：增加键盘操作，让用户能够通过按下不同的按键与网站进行交互；适当增加对鼠标光标及焦点事件的控制；添加音频、图片、视频的描述文字等。
下面是一些增加页面可访问性的实践：
- 使用合适的URL URL
- 使用语义化的HTML
- 提供alt文本来描述图像、按钮等
- 显示图像包含文字的附加描述
- 提供获取帮助内容的方式
- 使用ARIA 属性等
禁止滚动弹性和固定头部
在移动端浏览网页时，通常希望页面不再向下滚动以防止误操作，同时也不希望页面一旦滚动了就无法再回到页面顶部。这时可以使用CSS或者JS来禁止滚动弹性和固定头部。
-- -------------------- ---- -------
----------
---- -
--------------------------- ------
-
--------
------ -
--------- ------
---- --
-------- -----
------ -----
-增加对颜色偏障离用户的支持
我们可以应用一些技巧来帮助那些有视力问题的用户。
- 使用对比度高的色彩
- 在设计颜色时考虑到色盲用户的需求
- 避免仅用颜色来传递信息
无图片和JavaScript时的备选方案
在一些情况下，用户的设备可能不支持JavaScript或图片加载情况很慢。为了增加页面的无障碍性，我们需要为这些情况提供发展的解决方案。
示例：
<!--当图片无法加载时，显示“图片无法加载”--> <img src="picture.png" alt="图片无法加载">
对标准的HTML指南进行检查
最后，还要对标准的HTML指南进行检查：
- 意义
- 标记独立
- 形式上的跨浏览器一致性
总结
无障碍性是建造互联网世界的一个极为重要的价值观。通过实践已为行业提供了的无障碍性指南，我们可以让我们的数字产品更加符合人们的需求。口号是：一视同仁，平等无限。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ddd37968c7c53b003bcb3