POPOVER API通過自動(dòng)處理焦點(diǎn)陷阱，惰性背景，逃生密鑰解僱和無額外JavaScript或Aria標(biāo)記的ARIA角色來解決創(chuàng)建類似於模態(tài)元素的複雜性。 2。它使用popover屬性和popoverToggletArget來控制可見性，具有三種類型：自動(dòng)，模態(tài)和提示，其中模態(tài)非常適合對(duì)話和提示非阻滯提示。 3。 javaScript方法如showpopover（），hidepopover（）和togglePopover（）允許用於高級(jí)交互的程序化控制。 4?？稍L問性好處包括自動(dòng)焦點(diǎn)管理，鍵盤支持和減少ARIA的依賴，從而使屏幕閱讀器的解釋更加可靠。 5。最佳實(shí)踐包括提供一個(gè)可見的關(guān)閉按鈕，使用語義HTML在彈出窗口內(nèi)使用，避免嵌套以及使用鍵盤和屏幕讀取器進(jìn)行測(cè)試。 6。瀏覽器支持可在Chrome和Edge 114中提供，其中Firefox和Safari正在開發(fā)中，需要使用功能檢測(cè)的較舊瀏覽器的後備或多填充。 7。 API是邁出可訪問默認(rèn)覆蓋層的一步，建議用於簡(jiǎn)單的模態(tài)或提示，並具有優(yōu)美的後備和房地產(chǎn)用戶測(cè)試，以確保包容性。

POPOVER API是一種新的Web平臺(tái)功能，它使得與復(fù)雜的Aria和JavaScript一起摔跤，可以更輕鬆地創(chuàng)建可訪問的，類似模態(tài)的元素（例如對(duì)話框，工具提示或側(cè)面面板）。它旨在減少樣板並默認(rèn)提高可訪問性。如果您正在構(gòu)建現(xiàn)代，可訪問的UI，那麼彈出API值得理解和使用。

這是有效使用它來創(chuàng)建可訪問界面的方法。

POPOVER API解決了什麼

在此API之前，開發(fā)人員必須手動(dòng)管理：

• 聚焦陷阱
• 模態(tài)背景（“惰性”背景）
• 逃避鑰匙處理
• ARIA角色和屬性（例如aria-modal ， role="dialog" ）
• 點(diǎn)擊式解僱

所有這些對(duì)於可訪問性至關(guān)重要，但易於誤會(huì)。 POPOVER API自動(dòng)處理大部分。

基本語法和行為

API引入了一個(gè)新的popover屬性和一組JavaScript方法來控制可見性。

 <div id =“ my-popover” popover>
  <p>這是一個(gè)彈出式！ </p>
  <按鈕>關(guān)閉</button>
</div>

<button PopoverTogGletArget =“ my-popover”>切換popover </button>

只有這兩行：

• 單擊按鈕時(shí)，彈出聲顯示/隱藏。
• 背景內(nèi)容變成惰性（不可集中）。
• 按下逃生關(guān)閉彈出案。
• 焦點(diǎn)自動(dòng)被困在彈出窗口內(nèi)。

不需要JavaScript或ARIA。

彈出案的類型

使用具有值的popover屬性來定義行為：

 <！ - 在單擊外面或按下逃生時(shí)隱藏 - >
<div popover =“ auto”>自動(dòng)popover </div>

<！ - 模態(tài)：阻止背景，需要明確關(guān)閉 - >
<div popover =“ modal”>模態(tài)popover </div>

<！ - 非模式：背景保持互動(dòng) - >
<div popover =“提示”>提示popover </div>

對(duì)於可訪問的UI， modal最常見（例如對(duì)話框），而hint則適用於工具提示或非阻滯提示。

用JavaScript控制彈出案

您還可以使用方法進(jìn)行更多控制：

 const popover = document.getElementById（'my-popover'）;

// 展示
popover.showpopover（）;

// 隱藏
popover.hidepopover（）;

//切換
popover.togglePopover（）;

當(dāng)您需要簡(jiǎn)單切換以外的邏輯（例如，在懸停或表單驗(yàn)證之後顯示）時(shí)，這些都是有用的。

開箱即用的可訪問福利

POPOVER API通過：

• ?自動(dòng)管理重點(diǎn)
• ?製作非活動(dòng)內(nèi)容惰性（例如inert屬性）
• ?支持鍵盤導(dǎo)航和解僱
• ?減少對(duì)ARIA的依賴（錯(cuò)誤的空間）

例如，屏幕讀取器將將popover="modal"視為真模式對(duì)話框 - 不需要role="dialog"或aria-modal="true" 。

可訪問UI的最佳實(shí)踐

為了充分利用Popover API：

• 始終提供可見的近距離控制
  即使逃生有效，一些用戶（尤其是觸摸或屏幕讀取器用戶）也需要一個(gè)清晰的“關(guān)閉”按鈕。

• 在彈出窗口內(nèi)使用語義HTML
  在<section>中包裝對(duì)話框內(nèi)容或使用適當(dāng)?shù)臉?biāo)題。例如：

   <div popover =“ modal”>
    <h2>確認(rèn)刪除</h2>
    <p>您確定要?jiǎng)h除此項(xiàng)目嗎？ </p>
    <按鈕>刪除</button>
    <button PopoverTogGletArget =“ my-popover”>取消</button>
  </div>

• 避免嵌套彈出案
  規(guī)格不禁止它，但可能會(huì)使焦點(diǎn)和用戶期望混淆。

• 使用鍵盤和屏幕讀取器進(jìn)行測(cè)試
  即使使用API，請(qǐng)測(cè)試真實(shí)的用戶流。確保焦點(diǎn)進(jìn)入彈出窗口並在關(guān)閉後正確返回。

瀏覽器支持和後備

截至2024年，Chrome and Edge（版本114）支持Popover API，F(xiàn)irefox和Safari都可以使用。

對(duì)於不受支持的瀏覽器，您需要一個(gè)後備。考慮漸進(jìn)式增強(qiáng)：

 if（?。╤tmlelement.protype中的'showpopover'）{
  //用ARIA和手動(dòng)重點(diǎn)管理實(shí)施後備後備
  setupfallbackDialog（）;
}

或使用輕巧的多填充，例如開放的UI Popover Polyfill 。

POPOVER API簡(jiǎn)化了創(chuàng)建可訪問的疊加層而無需犧牲控制。它並不是所有自定義對(duì)話框的完整替代品，但是對(duì)於許多用例（尤其是簡(jiǎn)單的模式或提示），它是一個(gè)可訪問性的優(yōu)先解決方案。

基本上：在可能的情況下使用popover ，與真實(shí)的用戶一起測(cè)試，然後優(yōu)雅地退回。默認(rèn)情況下，這是邁向更容易訪問的Web UI的一步。

以上是如何將popover API用於可訪問的UI的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！