随着互联网越来越普及，无障碍性 Web 设计也越来越受到关注。无障碍性 Web 设计指的是尽可能地让所有人都能够访问和使用网站，包括视力障碍、听力障碍、语言障碍、认知障碍等等。下面是无障碍性 Web 设计中常见的 10 个错误及如何修复它们。
1. 不良的颜色选取
颜色对于不同的人来说有着不同的含义，因此应该妥善地选择颜色。遵守 WCAG 标准，应该使用高对比度的颜色，以让页面易于阅读和易于浏览。另外，为了更好地让页面可访问，应该使用 Web 安全颜色而非自定义颜色。
示例代码
---- - ----------------- ----- ------ ----- -
2. 大量的动画
动画虽然可以增强网站的美观度，但是对于患有注意力障碍或者视力障碍的人来说可能造成困扰和干扰。因此，在设计动画方面需要慎重考虑，最好遵从 WCAG 标准，并提供适当的设置选项供用户自行关闭动画。
示例代码
---------- - ---------- ---- -- ------ --------- - ---------- ---- - -- - -------- -- - --- - -------- ---- - ---- - -------- -- - -
3. 错误的 HTML 结构
正确的 HTML 结构可以帮助屏幕阅读器读取你的网站并更好地为用户提供信息。例如，使用无序列表来显示相关链接或使用标题标签以增加页面结构。同时正确的 HTML 标记还可以帮助跨浏览器和跨设备的兼容性。
示例代码
---- ------ -------------------------- ------ -------------- ----------- ------ ------------------------- ----- -------- ---------- --------- ------- ------- ---------
4. 不合适的图片描述
对于患有视力障碍的人来说，能否正常理解图片是至关重要的。因此，应该给每个图像添加一个清晰而简短的描述文字来阐明图片的含义。此外，当图片被格式化时，应该遵循 WCAG 标准来为其定义正确的高度和宽度。
示例代码
---- --------------- ------ ------ ------- -- - ---- ------- -- - --------- ----------- -------------
5. 不良的表单设计
对于视力障碍的人来说，无障碍性表单的设计可能会有所不同。例如，需要在文本标签前放置有意义的文本以提供表单字段的信息。在使用下拉框和单选框时，也需要保证可访问性。
示例代码
------
------ ------------------------
------ ----------- --------- ----------------
------ ----------------------------
------- ----------- --------------
------- --------------------------
------- ------------------------------
-------------
--------------- ------------------
------ ------------ -------- ------------ ------------
------ -------------------------
------ ------------ --------- ------------ -------------
------ ---------------------------
-------6. 无法放大
放大页面对于患有视力障碍的人来说非常重要，因此应该确保页面设置支持放大。最好遵从 WCAG 标准，并提供适当的放大并激活选项，以便用户根据其视力选择适合的大小。
示例代码
---- -
---------- -----
-
------ ---- ------ --- ----------- ------ -
---- -
---------- -----
-
-7. 不良的链接标记
在网站中，链接标记是非常重要的，因为它为用户提供了浏览的方式。为拟装链接时，应该遵循 WCAG 标准，以增加用户体验，并使访问无障碍。
示例代码
-- -------- ---------------- -- ------------------
8. 无法禁用无序音频
无序音频可能会对一些听力障碍的用户造成不便。因此，应该在播放音频时遵循 WCAG 标准，并在网页上提供音频停止和暂停的选项。
示例代码
------ --------- ------- --------------- ------------------ ---- ------- ---- --- ------- --- ----- -------- --------
9. 无法禁用自动播放视频
类似于无序音频，自动播放视频可能会干扰到一些听力障碍的用户。应该在视频播放时遵循 WCAG 标准，并在网页上提供视频停止和暂停的选项。
示例代码
------ --------- ------- --------------- ----------------- ---- ------- ---- --- ------- --- ----- ---- --------
10. 不良的键盘导航
键盘提供一种无鼠标的导航方式。因此，在设计时需要确保键盘导航的可用性。遵循 WCAG 标准，并确保网站可以通过键盘来浏览和使用。
示例代码
------- ---------------------------- ----------- -------- -------- ------------ - ------------ --------- - ---------
总结
以上是无障碍性 Web 设计中常见的 10 个错误及如何修复它们，它们可以帮助我们更好地了解如何让我们的网站更加无障碍。无障碍性 Web 设计不仅可以帮助视力障碍等人群使用，还可以提高整体的用户体验，从而对网站的流量和受众产生积极的影响。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e6f446f6b2d6eab3249f9f