首頁 > web前端 > js教程 > 主體

HTML 對話方塊元素:增強可存取性和易用性

Susan Sarandon
發布: 2024-11-11 06:49:03
原創
292 人瀏覽過

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

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 屬性來變更哪個元素首先接收焦點,如前面的範例所示,該屬性被加入到關閉

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板