如何使用 HTML、CSS 和 JavaScript 创建可访问性更高的网站
随着移动设备和智能设备的普及，不同用户的设备、网络、浏览器使用习惯、驱动力等等有了很大的不同，而如果一个网站不具有良好的可访问性，就会使某些用户无法使用/享受到网站的服务，损害用户体验，并可能造成商业损失。本文旨在探讨 HTML、CSS 和 JavaScript 这三个前端开发技术如何能够改善网站的可访问性。
- HTML
HTML 是网页的语言，是构建结构的基础。提高网站的可访问性，就需要从 HTML 这个层面开始实现。以下是一些 HTML 的可访问性相关技巧：
1.1 使用语义标签
语义标签能够让搜索引擎更好的理解你的页面内容，同时也便于阅读。例如使用 <nav> 标签来定义导航菜单，使用 <main> 标签来定义主要内容等等。
1.2 提供良好的页面结构
网页结构能够让好的页面结构让屏幕阅读器和搜索引擎很容易理解和使用。使用良好的网页结构可以使网站更易于使用和理解。
1.3 使用 alt 属性注明图片的描述信息
声音和视觉障碍用户无法看到图片的内容，因此必须为每个 img 元素提供描述性文本。可以使用 alt 属性提供描述信息。
- CSS
CSS 帮助网页外观更漂亮、具有确定的显示效果。而对于易用性来说，CSS 的作用也很重要。以下是一些 CSS 的可访问性相关技巧：
2.1 增大可点击区域
对于手指操作，点触小的区域往往很难点击到。因此，需要保证可点击区域为较大的区域。我们可以使用 padding 和 margin 来增大可点击区域。
2.2 不要使用颜色作为唯一的指示符
对于色盲彩色视觉障碍的用户，如果颜色是唯一的指示符，就会无法访问。因此，我们需要使用图案，形状或图标等等元素以便于色盲用户更好的理解页面内容。
2.3 不要使用固定大小的文本
对于老年用户而言，大小适当的文本非常重要。因此，我们如果可以将文本大小变得更大，便可以增加该网站的可访问性。这点在 CSS 中可以使用 rem、em 或者百分比等等相对大小单位。
- JavaScript
JavaScript 可以增强网页的功能，并且与 HTML、CSS 一样，也需要考虑页面可访问性。以下是一些 JavaScript 的可访问性相关技巧：
3.1 让网站的行为预见性
如果网站的行为很难预见，就会影响用户体验。因此，我们必须使网站的行为可预见性。例如，在使用模态框等功能时，要确保键盘重定向功能仍可工作。
3.2 注重焦点控制
对于鼠标无法操作网站的用户，键盘是他们访问网站最常用的工具。这在焦点控制时非常重要。焦点应该正确地放置在感兴趣的对象上，应该有聚焦状态指示并且可翻转。
3.3 使用 WAI-ARIA
许多 HTML 标记不足以提供足够的信息来描述面临其前面的对象。WAI-ARIA 是一个覆盖Web内容（如文档和网络应用程序）的语义元数据集的可测量指导方针集。如果想要更好的使用 JavaScript 实现可访问性，就需要更多地了解 WAI-ARIA 规范。
总结
不断改进页面可访问性非常重要。从 HTML、CSS、JavaScript 不同的方面，都可以提高页面的可访问性。本文介绍了一些关于提高页面可访问性的技巧和方法，包括使用语义标签、提供良好的页面结构，使用 alt 属性注明图片的描述信息，增大可点击区域，不要使用颜色作为唯一的指示符，不要使用固定大小的文字，提高行为预见性，注重焦点控制，使用 WAI-ARIA 等等。希望本文能够让你更好地了解如何为网站提供更好的可访问性。
示例代码：
-- -------------------- ---- -------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
------
--------- ----------
---
----- ----- ----- --- ----- ----------- ---------- ----- ----- --- ---- ---- - ------ ------- -------- --- ------ ----- -------- ------- --------- ---- ------- --------- ----- -- ------- -- ----- ---- --------- ---------- -------- ---- ----- --- ---- -------- ------ --------- --- ----- ------ --- ----- -- ---------- ----- -------- -- -- --------- ---------- ---- ----- -------- -------
----
---- ---------------------- -----------
-------
-- -------------------- ---- ------- --- -- - ------- -- -------- -- ----------- ----- - --- -- - -------- ------------- ------- ---- -------- ---- ----------------- -------- - ---- - ---------- ------- ------------ ---- - - - ------ -------- - ------- - ------ -------- -
-- -------------------- ---- ------- -- ------- -------- -------------------- ---------- - --------- - --------------------------------- ------------ ------------------------------ ---- -------------- - -- ----- -------- ------------------ - -------------------- - -------- --------------------- ----------- - -- ----- -------- ------------ - ----------------------------------------------- - ------- --------------------- ---------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f13eebf6b2d6eab3b13c0e