在前端开发中，模态框是非常常见的组件，它可以帮助我们在页面中展示一些重要的信息或者让用户进行一些操作。但是，如果模态框不是无障碍的，那么就会给一些用户带来不便。本文将介绍如何用 HTML 和 CSS 制作有吸引力的无障碍模态框。
什么是无障碍模态框
无障碍模态框是指可以让所有用户都能够使用的模态框，包括视觉障碍者、听力障碍者、身体障碍者等。这种模态框需要考虑到键盘焦点、语义化、ARIA 属性等方面，以确保所有用户都能够顺利地使用它。
用 HTML 和 CSS 制作无障碍模态框
下面是一个简单的 HTML 结构，用于制作无障碍模态框。
-- -------------------- ---- -------
---- ------------- ------------- ----------------- ----------------------------- -------------------------------------
---- -----------------------------
---- -----------------------
---- ----------------------
--- ---------------------- ----------
------- -------------------- ----------------- ----------------
------
---- ------------------- -----------------------
----- -------
------
------
------这个 HTML 结构包含了一个 div 元素，它有一个 role 属性，表示它是一个模态框。aria-modal 属性表示这个模态框是一个阻止后面内容的交互的模态框。aria-labelledby 属性用于指定模态框的标题，aria-describedby 属性用于指定模态框的描述。
模态框的样式可以用 CSS 来控制。下面是一个简单的 CSS 样式，用于制作有吸引力的模态框。
-- -------------------- ---- ------- ------ - --------- ------ ---- -- ----- -- ------ ----- ------- ----- -------- ----- ---------------- ------- ------------ ------- -------- ----- - --------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- - --------------- - ----------------- ------ -------- ----- -------------- ---- ----------- - - ---- ------- -- -- ----- - -------------- - -------- ----- ---------------- -------------- ------------ ------- -------------- ----- - ------------- - ------- ----- ----------------- ------------ ------ ----- ---------- ----- ------- -------- - ------------ - ----------- ------ ----------- ----- -
这个 CSS 样式包含了模态框的样式，包括背景色、边框、阴影等。其中，.modal__overlay 是用来制作模态框的遮罩层的，它的背景色是半透明的，可以让用户知道后面的内容被遮挡了。
如何让模态框无障碍
上面的 HTML 和 CSS 可以制作一个有吸引力的模态框，但是它并不是无障碍的。下面是一些技巧，可以让模态框变得无障碍。
1. 使用键盘焦点
无障碍模态框应该可以使用键盘来浏览和操作。这意味着用户可以使用 Tab 键和箭头键来在模态框中移动焦点。在上面的 HTML 中，我们没有为模态框中的元素设置 tabindex 属性。这意味着用户无法使用键盘来访问模态框中的元素。
为了让模态框具有键盘焦点，我们需要为模态框中的每个可交互元素设置 tabindex 属性。例如，我们可以为模态框中的关闭按钮设置 tabindex 属性，使用户可以使用键盘来关闭模态框。
<button class="modal__close" aria-label="Close Modal" tabindex="0"></button>
2. 使用语义化标签
无障碍模态框应该使用语义化标签，以便屏幕阅读器和其他辅助技术可以正确地解释模态框的内容。在上面的 HTML 中，我们使用了 role 属性来定义模态框的角色。这是一种解决方案，但是更好的方法是使用语义化标签，例如 dialog 元素。
<dialog class="modal" aria-labelledby="modal-title" aria-describedby="modal-description">
<h2 id="modal-title">Modal Title</h2>
<button class="modal__close" aria-label="Close Modal"></button>
<div class="modal__body" id="modal-description">
Modal Content
</div>
</dialog>3. 使用 ARIA 属性
ARIA 属性可以帮助屏幕阅读器和其他辅助技术正确地解释模态框的内容。在上面的 HTML 中，我们已经使用了一些 ARIA 属性，例如 aria-modal、aria-labelledby 和 aria-describedby。这些属性可以帮助屏幕阅读器正确地读取模态框的标题和描述。
4. 测试无障碍性
最后，我们需要测试模态框的无障碍性。这可以通过使用屏幕阅读器和其他辅助技术来完成。如果模态框可以被正确地解释和操作，那么它就是无障碍的。
结论
本文介绍了如何使用 HTML 和 CSS 制作有吸引力的无障碍模态框。我们学习了如何使用键盘焦点、语义化标签和 ARIA 属性来提高模态框的可访问性。最后，我们还学习了如何测试模态框的无障碍性，以确保它可以被所有用户使用。希望这篇文章能够帮助你制作无障碍的模态框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675add404b9d41201abc9008