引言
弹出式界面（Pop-up）在现代 Web 应用程序中广泛使用。尤其是对于 Web 应用程序的表单验证，警告框，提示框，消息框等功能。这些弹出式界面的设计和代码实现对于 Web 应用程序的可访问性非常重要。
在本文中，我们将讨论通过设计和代码实现无障碍的弹出式界面。我们将涵盖必须的设计策略和有关代码实现的技术，最后给出示例代码。
无障碍的弹出式界面设计
无障碍的弹出式界面应该考虑用户的不同需求和能力，确保对所有用户界面的可用性和可访问性。设计策略如下：
1. 使用正确的弹出式界面
使用不当的弹出式界面会导致用户的疲劳感或歧义。例如，错误的颜色，文本或文本大小可能会使信息更加容易被忽略或误解。正确的弹出式具有清晰，简洁且易于理解的格式。
2. 使用高可见度的颜色
在弹出式界面中使用高可见度的颜色非常重要，在设计弹出式界面时这一点尤为重要。这可以使信息更加易于理解，同时还可以加强界面的可访问性。例如，在更改表单验证消息时，应使用明亮的颜色，以便用户更容易注意到。
3. 使用措辞准确的文本和语言
在弹出式界面中使用正确和准确的措辞和语言是非常重要的。如果在警告框或错误消息中使用不合适的词语，会导致用户困惑或误解。确保提示或警告信息的文本准确清晰，不含有任何模糊或极端的措辞。
4. 提供适当的反馈
适当的反馈可以增强用户体验。换句话说，确保用户知道何时出现新的弹出式界面或警告消息，以及何时可以操作它们。这可以使用音频反馈或视觉指示来实现。
5. 附加视觉和文字指南
附加视觉和文字指南可以为用户提供关于如何使用弹出式界面的更多细节。这可以通过向视觉不良或视觉受损的用户提供命令行或其他辅助工具来实现。
无障碍的弹出式界面实现
在实现无障碍的弹出式界面时，有以下技术：
1. 使用 ARIA 属性
ARIA 属性可用于向屏幕阅读器用户提供更多关于弹出窗口的信息。ARIA 规范提供了一些角色和状态，可以用来定义弹出窗口的类型和行为。
例如：
<div role="dialog" aria-modal="true" aria-labelledby="dialogTitle" aria-describedby="dialogSubtitle"> <h2 id="dialogTitle">表单提交错误</h2> <p id="dialogSubtitle">所有必填字段都必须填写。</p> <button type="button" aria-label="关闭弹出式窗口" onclick="closeDialog()">X</button> </div>
2. 合理使用焦点
确保当弹出窗口出现时，焦点处于正确的控件上。同时，当用户关闭窗口时，焦点应返回到原始控件上。
在上面的示例中，我们使用了 onclick 事件来关闭弹出窗口，同时还提供了 aria-label 属性，可用于描述按钮的文本（以便屏幕阅读器用户知道按钮的用途）。
3. 通过 CSS 和 JavaScript 控制弹出式窗口
使用 CSS 和 JavaScript 控制弹出窗口是另一种实现无障碍性的方式。例如，可以在使用 CSS 定义的伪类中包含弹出窗口的位置信息。在用户打开弹出窗口时，使用 JavaScript 显示或隐藏弹出窗口。
在以下示例中，我们使用了 JavaScript 和 CSS3 来控制弹出窗口：
<label for="username">用户名</label> <input type="text" id="username" name="username" aria-describedby="usernameHelp" required> <div class="popup" id="usernameHelp"> <span>用户名必须至少包含 8 个字符。</span> <button type="button" onclick="hidePopup()">Close</button> </div>
以上代码中，我们使用 aria-describedby 属性指定了要显示的弹出窗口的控件 ID。当用户在 <input> 元素上输入字符时，该文本框后面的伪类将显示。
-- -------------------- ---- ------- ------------------------------ - -------- --- -------- ------ --------- ------ ---- -- ----- -- ------ -- ------- -- ----------------- ---------------- ------------ - ------------------------------ - ------ - -------- ------ --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ----------------- -------- ------- --- ----- ----- -------- ----- ------------- -
在上面的 CSS 代码中，我们使用伪类 :after 显示半透明黑色画布，同时使用 :hover 显示也可以达到这一目的。我们使用 JavaScript 来隐藏或显示窗口：
function hidePopup() {
document.getElementById("usernameHelp").style.display = "none";
}通过这些实现，达到无障碍性的目的。
示例代码
以下是一个无障碍的弹出式窗口的示例代码：
-- -------------------- ---- ------- ------- ------------- ------------------------------------ ---- ------------- ----------------- ----------------------------- --------------------------------- ------------ --- ---------------------------- -- ------------------------------------ ------- ------------- -------------------- --------------------------------- ------ -------- -------- ------------ - ----------------------------------------------- - -------- ----------------------------------------------- - -------- ------------ - ----------------------------------------------- - ------- - ---------
集成更多辅助功能
除了上述实现之外，还可以使用其他无障碍技术来增加弹出框窗口的可访问性。例如，使用 WAI-ARIA 规范的 role 属性来标识弹出窗口的角色，可以为屏幕阅读器用户提供更多信息。
结论
无障碍的弹出式界面对于 Web 应用程序的可访问性至关重要。遵循设计和实现策略以及使用 WAI-ARIA 规范可以创建可访问性、可用性和友好性都很好的弹出式界面。希望本文可以帮助读者创建无障碍的弹出式界面，从而为用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677160b86d66e0f9aacdf0af