HTML 对话框元素：增强可访问性和易用性

HTML 对话框元素：增强可访问性和易用性

对话框是添加到应用程序中的常见组件，无论是在网络应用程序中还是在本机应用程序中。传统上，没有一种在网络上实现这些的标准方法，导致许多临时实现在不同的网络应用程序中表现不一致。通常，由于实现的复杂性，对话框中会缺少常见的预期功能。

但是，网络浏览器现在提供标准对话框元素。

为什么使用对话框元素？

原生对话框元素简化了对话框、模式和其他类型非模式对话框的实现。它通过实现已内置于浏览器中的对话框所需的许多功能来实现此目的。

这很有帮助，因为它通过确保满足用户对交互的期望来减轻开发人员在使应用程序可访问时的负担，并且它还可以总体上简化对话框的实现。

基本用法

使用新的

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

然后，如果你想关闭它，你可以调用对话框上的 .close() 方法，或者按转义键关闭它，就像大多数其他模式一样。另外，请注意背景如何使页面的其余部分变暗并阻止您与其交互。整齐！

辅助功能和焦点管理

在让所有用户都可以访问您的 Web 应用程序时，正确处理焦点非常重要。通常，在显示它们时，您必须将当前焦点移至活动对话框，但对话框元素已为您完成。

默认情况下，焦点将设置在对话框中的第一个可聚焦元素上。您可以选择通过在希望焦点开始的元素上设置 autofocus 属性来更改哪个元素首先接收焦点，如前面的示例所示，该属性被添加到关闭 中。元素。

使用 .showModal() 方法打开对话框也会隐式地将对话框 ARIA 角色添加到对话框元素。这有助于屏幕阅读器了解模式已经出现以及屏幕，以便它可以采取相应的行动。

将表单添加到对话框

表单也可以添加到对话框中，甚至还有一个特殊的方法值。如果添加

元素的方法设置为对话框，那么表单将具有一些与标准 get 和 post 表单方法不同的不同行为。

首先，使用此新方法不会发出外部 HTTP 请求。相反，当表单被提交时，表单元素上的 returnValue 属性将被设置为表单中提交按钮的值。

因此给出这个示例表单：

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

登录后复制

登录后复制

从服务器返回所需的响应后，您可以使用对话框上的 .close() 方法手动关闭它。

增强背景

默认情况下，对话框后面的背景大部分是半透明的灰色背景。但是，该背景可以使用 ::backdrop 伪元素完全自定义。有了它，您可以将背景颜色设置为您想要的任何值，包括渐变、图像等。

您可能还希望单击背景来关闭模式，因为这是它们的常用功能。默认情况下，<对话框> element 不会为我们做这个。我们可以对对话框进行一些更改以使其正常工作。

首先，需要一个事件侦听器，以便我们知道用户何时单击离开对话框。

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

登录后复制

这个事件监听器单独看起来很奇怪。每当单击对话框（而不是背景）时，它似乎都会关闭该对话框。这与我们想做的相反。不幸的是，您无法侦听背景上的单击事件，因为它被视为对话框本身的一部分。单独添加此事件侦听器将有效地使单击页面上的任意位置关闭对话框。
为了纠正这个问题，我们需要用另一个元素包装对话框内容，该元素将有效地屏蔽对话框并接收点击。一个简单的

元素就可以做到！

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});

登录后复制

包装 div 可以制作成内联块元素来包含边距，并且通过将填充从父对话框移动到包装器，在对话框的填充部分中进行的单击现在将与包装器元素进行交互确保它不会被解雇。

结论

使用对话框元素为创建对话框和模式提供了显着的优势，通过合理的默认行为简化实现，通过使用自动 ARIA 角色分配、对表单元素的定制支持以及灵活的方式增强需要辅助技术（例如屏幕阅读器）的用户的可访问性样式选项。

以上是HTML 对话框元素：增强可访问性和易用性的详细内容。更多信息请关注PHP中文网其他相关文章！