无障碍 Web 设计是指为所有人提供可访问的网站和应用程序，包括那些有视觉、听觉、身体和认知障碍的人。在设计无障碍 Web 界面时，需要考虑到用户的不同需求和使用方式，以提供更好的用户体验。本文将介绍无障碍 Web 设计中常见的界面优化技巧，包括键盘可访问性、语义化 HTML、ARIA 标记、颜色对比度等。
键盘可访问性
键盘可访问性是指用户可以使用键盘或其他辅助技术，如屏幕阅读器、语音识别等，来浏览和操作网站。在设计无障碍 Web 界面时，需要确保所有功能都可以通过键盘访问，而不仅仅是鼠标或触摸屏。以下是一些常见的键盘可访问性技巧：
- 为所有交互元素添加焦点样式，以便用户可以看到当前所选元素。
- 使用 tabindex 属性指定元素的焦点顺序，以便用户可以使用 Tab 键在元素之间导航。
- 在交互元素上添加键盘事件，以便用户可以使用键盘执行相应的操作。
以下是一个示例代码，演示如何使用键盘事件来实现一个下拉菜单：
-- -------------------- ---- -------
------- -------------------- -------------------- -----------------------------------
--- ------------------ --------------------------------- ------------
--- ------------------ ------------ ----------
--- ------------------ ------------ ----------
--- ------------------ ------------ ----------
-----
--------
----- -------------- - -------------------------------------------
----- ------------ - -----------------------------------------
---------------------------------------- -- -- -
----- -------- - -------------------------------------------- --- ------ -- ------
-------------------------------------------- -----------
------------------- - ---------
---
---------------------------------------- ------- -- -
-- ---------- --- --------- -
-----------------------
-
---
---------在上面的示例中，我们使用了 aria-haspopup 和 aria-expanded 属性来指示下拉菜单的状态，使用 role="menu" 和 role="menuitem" 属性指定了菜单和菜单项的角色，使用 hidden 属性来控制菜单的显示和隐藏。在键盘事件中，我们使用了 event.key 属性来检测按下的键，并使用 focus() 方法将焦点返回到按钮上。
语义化 HTML
语义化 HTML 是指使用 HTML 标签正确地描述内容的意义和结构，以便屏幕阅读器和搜索引擎可以更好地理解网站的内容。以下是一些常见的语义化 HTML 技巧：
- 使用
header、main、footer等标签来标记页面的不同部分。 - 使用
h1、h2、h3等标签来标记标题和子标题。 - 使用
p、ul、ol等标签来标记段落和列表。 - 使用
img标签的alt属性来提供替代文本，以便屏幕阅读器可以读出图片的内容。
以下是一个示例代码，演示如何使用语义化 HTML 来标记一个简单的网页：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- ---- ----------
-------
------
--------
------- ---- -------
-----
----
------ --------------------
------ ----------------------
------ ----------------------
-----
------
---------
------
---------
---------- ----------
------ ---- ---- ---- ---------------------------------------------
----------
---------
------------- ----------
-------- ---- --------------------------------------------------
----------
-------
--------
------- - ---- --- --- --------
---------
-------
-------在上面的示例中，我们使用了 header、nav、main、article、footer 等标签来标记页面的不同部分，使用 h1、h2、p 等标签来标记标题、段落和列表，使用 img 标签的 alt 属性来提供替代文本。
ARIA 标记
ARIA（Accessible Rich Internet Applications）是一组用于增强用户界面可访问性的属性和角色。在设计无障碍 Web 界面时，可以使用 ARIA 标记来补充 HTML 标签，以提供更多的语义信息和交互支持。以下是一些常见的 ARIA 标记：
aria-label：为没有文本标签的元素提供可访问的标签。aria-describedby：为元素提供描述性文本，以便屏幕阅读器可以读出。aria-hidden：将元素从屏幕阅读器中隐藏，以避免重复或不必要的信息。aria-live：指定元素的内容是否应该立即通知屏幕阅读器。
以下是一个示例代码，演示如何使用 ARIA 标记来提高下拉菜单的可访问性：
-- -------------------- ---- -------
------- -------------------- -------------------- --------------------- -------------------------------------------
--- ------------------ ----------- ----------------------------------
--- ------------------ ------------ ----------
--- ------------------ ------------ ----------
--- ------------------ ------------ ----------
-----
--------
----- -------------- - -------------------------------------------
----- ------------ - -----------------------------------------
---------------------------------------- -- -- -
----- -------- - -------------------------------------------- --- ------ -- ------
-------------------------------------------- -----------
------------------- - ---------
---
---------------------------------------- ------- -- -
-- ---------- --- --------- -
-----------------------
-
---
---------在上面的示例中，我们使用了 aria-controls 属性来指定下拉菜单的 ID，使用 aria-labelledby 属性来指定按钮的 ID，使用 role="menu" 和 role="menuitem" 属性指定了菜单和菜单项的角色。
颜色对比度
颜色对比度是指两种颜色之间的亮度差异。在设计无障碍 Web 界面时，需要确保文本和背景颜色之间有足够的对比度，以便所有用户都可以轻松地阅读和使用网站。以下是一些常见的颜色对比度技巧：
- 使用高对比度的颜色组合，如黑色和白色、蓝色和黄色等。
- 使用 Web Content Accessibility Guidelines（WCAG）定义的颜色对比度标准，例如 4.5:1 或 7:1。
- 使用 CSS 的
background-color和color属性来控制文本和背景颜色。
以下是一个示例代码，演示如何使用 CSS 来控制颜色对比度：
-- -------------------- ---- ------- ---- - ----------------- ----- ------ ----- - - - ------ ----- - ------ - ----------------- ----- ------ ----- ------- ----- -------- ------ ----- -------------- -------- - ------------ - ----------------- -------- ------ ----- - ------------ - -------- ----- ----------- - - - --- -------- -
在上面的示例中，我们使用了黑色和白色、蓝色和白色等高对比度的颜色组合，使用了 WCAG 定义的颜色对比度标准，使用了 CSS 的 background-color 和 color 属性来控制文本和背景颜色，使用了 outline 和 box-shadow 属性来控制焦点样式。
总结
通过键盘可访问性、语义化 HTML、ARIA 标记和颜色对比度等技术，可以提高无障碍 Web 设计的可访问性和用户体验。在设计无障碍 Web 界面时，需要考虑到用户的不同需求和使用方式，以提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc98ba1886fbafa49fc716