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中文網其他相關文章！