在现代 Web 应用程序中，动态 UI 已经成为常态。然而，如果没有妥善的管理处理，可能会导致一些无障碍用户（如盲人）无法访问您的应用程序。在这篇文章中，我们将讨论如何通过良好的设计来管理动态 UI，以确保您的应用程序包含无障碍元素，向所有用户提供良好体验。
概述
动态 UI 涉及到添加、删除或更改 HTML 元素或内容。这可以是用户交互的结果，例如单击按钮，通过内容过滤器更新视图，或更新原始文本以显示新数据。动态 UI 可以大大增强用户体验，但对于无障碍用户而言，这会导致诸多挑战。
例如，屏幕阅读器在页面加载时会读出 DOM 树的内容。如果这些内容在后来被更改，那么屏幕阅读器可能无法得到更新的信息。同样地，键盘是许多无障碍用户的首选操作方式，因此如果您的 UI 只能通过鼠标访问，那么他们可能会面临很大的挑战。
这就是为什么我们需要考虑无障碍设计的原因。让我们看看如何通过精心设计的办法来克服这些问题。
如何管理动态 UI
1. 添加结构化标题
标题是屏幕阅读器跳转到特定区域的关键指示物。对于动态 UI，标题可以帮助盲人用户挑选并直接跳转到他们需要的内容区域。为了实现标题的最佳设计往往需要提前规划，因为正确的标题内容应该自然反映您应用程序的类别结构。
假设我们有一个交互性网站，列表元素是动态加载进来的。在加载新列表项时，您应该针对语境为其添加结构化标题元素（如 h2，h3 等）。 您可以通过让标题文字或数据与相关联的 UI 元素进行映射，例如为“价格交易所”页面区域中添加带有字符“数百万美元”的 h2 标题。请确保使用视觉隐藏技术来防止屏幕阅读器重复读取已被隐藏的标题。
-- -------------------- ---- -------
---- ----- -- ----- ---
---- --------------------
--- -----------------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
---- ---- ---
---- --------------------
---- ----------------------
------------------------
----- ---------------------
----- ----------------------
----- -----------------------
------
------2. 提供视觉反馈和 ARIA 属性
当动态 UI 的状态发生变化时，我们要记得提供反馈。例如，在搜索时，在搜索区域下方添加 "Loading ..." 状态信息，以告诉用户正在加载数据。请记住，盲人无法看到您的 UI 更改，因此需要使用可访问性功能提醒屏幕阅读器何时发生 UI 更改。
ARIA 属性是一种增强 UI 可访问性的技术，适用于适应无障碍用户的特殊情况。使用 ARIA 属性可以向屏幕阅读器更好地传达 UI 更改信息。例如，您可以使用 ARIA 规则来禁用被隐藏的菜单项或导航链接。 请确保在每个 ARIA 情况中都有适当的屏幕阅读器提示。
-- -------------------- ---- -------
---- ------------------- ------- --- -- ---
---- ------------------
------
------ ----------- ------------------------
------- -----------------------------
-------
---- ------------------------------------
------
-- ------------------------ -------- ---- ---
-- -- -----
-- -- ------
-- -- --------
-- --------- ------ ---------- ---------- -------------
-- ----
----- ----------- - ---------------------------------------------
----- ------------ - ------------------------------------------------
----- ------------- - ------------------------------------------
-------- ------------- -
-----------------------
--------------------------------------- ----------
--------------------------------------- --------
----------------------- - -------------
----------------------------------------- --------
------------------------------------------ --------
-- ------
------------- -- -
-------------------------------------------
----------------------- - --- ------- -------
---------------------------------------------
----------------------------------------------
-- ------
-
-------------------------------------- --------3. 键盘导航
许多无障碍用户只能使用键盘导航。例如，盲人用户通常使用键盘固件（JAWS, NVDA 等）进行导航。 因此，我们必须考虑使用键盘的交互设计来管理动态 UI。通过使用 tabindex 属性或隐藏链接，可以使动态 UI 成为无障碍遍历途中的绝佳交互体验。请记住，键盘支持应与鼠标支持同等重要。
-- -------------------- ---- ------- ---- ------------------ ----- ----- --- ------ ------ --------------------------- ------ ------------- ----------- ------------------------ ------- ----------------------------- ------- -- ---------------------------- ----- ---- - ------------------------------- -------- ------------- - ----------------------- ----- ---------------- - ---------------------------------------- ------------- -------- ----------------------- - ------------------------------- --------
结论
管理动态 UI 是构建无障碍 Web 应用程序的关键部分。在实现动态交互 UI 同时，我们必须考虑利用无障碍的设计原则，以确保我们的应用程序适用于所有用户。如此一来，我们可以使社会流动人群获得更好的访问和生活质量，同时也增加了我们的应用程序的用户群体。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f382a8e1e8e99bfaf7c665