最近，為我的不可知論圖書(shū)館構(gòu)建強(qiáng)大的對(duì)話框（模態(tài)）組件，使我走上了一條迷人的道路。我最初的計(jì)劃是創(chuàng)建一個(gè)完全獨(dú)立的組件，利用新的組成部分<dialog></dialog>可訪問(wèn)性收益的要素。但是，經(jīng)過(guò)徹底的研究，我選擇了Kitty Giraudel的A11y-Dialog庫(kù)，為Vue 3，Svelte和Angular創(chuàng)建適配器（AEXT適配器已經(jīng)存在）。這個(gè)決定源于對(duì)本地人的仔細(xì)考慮<dialog></dialog>元素的局限性。

本地人<dialog></dialog>元素：批判性評(píng)估

而本地人<dialog></dialog>元素表現(xiàn)出希望并正在積極改善，當(dāng)前的幾個(gè)缺點(diǎn)影響了我的決定：

1. 背景點(diǎn)擊處理：默認(rèn)行為在單擊外部時(shí)不會(huì)關(guān)閉對(duì)話框。
2. alertdialog角色不兼容：至關(guān)重要的alertdialog ARIA角色，對(duì)于需要用戶互動(dòng)的警報(bào)和防止背景/ESC關(guān)閉的警報(bào)至關(guān)重要，無(wú)法正常運(yùn)行。
3. ::backdrop偽元素限制：此樣式元素僅在dialog.showModal()以編程方式使用時(shí)可用。
4. 樣式不一致之處：默認(rèn)樣式依賴瀏覽器，需要JavaScript干預(yù)，破壞了“純HTML”優(yōu)勢(shì)。

亞當(dāng)·阿蓋爾（Adam Argyle）與本地建筑有關(guān)的出色帖子<dialog></dialog>提供有價(jià)值的解決方法，但是為了我的需求，復(fù)雜性超過(guò)了好處。

定義對(duì)話框組件的可訪問(wèn)性要求

我的不可知論對(duì)話框組件需要滿足這些關(guān)鍵可訪問(wèn)性標(biāo)準(zhǔn)：

1. 背景/ESC閉合：通過(guò)單擊背景或ESC鍵按下關(guān)閉。
2. 焦點(diǎn)陷阱：防止在組件之外進(jìn)行選項(xiàng)卡。
3. 雙向表：向前支撐（TAB）和向后（Shift Tab）Tabbing。
4. 焦點(diǎn)恢復(fù)：閉合時(shí)將重點(diǎn)返回到先前活躍的元素。
5. 正確的ARIA屬性：正確應(yīng)用ARIA屬性和切換。
6. 門(mén)戶（特定于框架）：在JavaScript Frameworks中對(duì)門(mén)戶的支持。
7. alertdialog角色支持：正確處理警報(bào)方案。
8. 身體滾動(dòng)預(yù)防：可選地防止?jié)撛诘纳眢w滾動(dòng)。
9. 避免本地<dialog></dialog>陷阱：解決本地元素的局限性。
10. 自定義樣式和prefers-reduced-motion ：允許自定義樣式和尊重用戶偏好。

斯科特·奧哈拉（Scott O'Hara）和凱蒂（Kitty）的文章提供了更深層次的潛入對(duì)話創(chuàng)建的信息。這些要求清楚地強(qiáng)調(diào)了僅依靠本地的局限性<dialog></dialog>元素。

審核A11Y-DIALOG以供可訪問(wèn)性

在集成A11Y-Dialog之前，我進(jìn)行了徹底的可訪問(wèn)性審核：

• 手動(dòng)驗(yàn)證：跨瀏覽器的測(cè)試功能。
• 自動(dòng)化工具：利用燈塔，IBM平等可訪問(wèn)性檢查器，Deque的AX和Wave。
• 屏幕讀取器測(cè)試：使用下巴，NVDA和配音。
• 用戶測(cè)試：（理想情況下，與真實(shí)用戶進(jìn)行測(cè)試）。

Deque Systems的研究表明，自動(dòng)化工具僅捕獲約57％的可訪問(wèn)性問(wèn)題，這強(qiáng)調(diào)了手動(dòng)測(cè)試和用戶反饋的重要性。我使用一個(gè)簡(jiǎn)單的本地HTML頁(yè)面進(jìn)行了測(cè)試，以將組件與測(cè)試框架復(fù)雜性隔離開(kāi)來(lái)。

審計(jì)證實(shí)了A11y-Dialog的穩(wěn)健性和遵守我的可訪問(wèn)性要求。

特定于框架的對(duì)話框組件注意事項(xiàng)

許多框架提供自己的對(duì)話組件。雖然我沒(méi)有親自審核所有這些，但這里有一些資源和觀察：

• Angular： Deque的2020年審核突出顯示了材料和NGX-Bootstrap作為強(qiáng)大的競(jìng)爭(zhēng)者。
• 反應(yīng)： Reakit，Chakra-UI，材料，覆蓋范圍/對(duì)話框和 @React-Aria/Dialog值得探索。
• VUE： Vuetensils，Vuetify和Primevue（帶有著名的重點(diǎn)修復(fù)問(wèn)題）是選項(xiàng)。
• Svelte： Svelte-Headlessui，Svelterial的材料端口和Svelte-A11y-Dialog（對(duì)于自定義組件創(chuàng)建特別有用）。
• Bootstrap：需要手動(dòng)步驟以符合可訪問(wèn)性。

我的不可思議的庫(kù)使用A11y-Dialog適配器來(lái)兼容。

建筑自定義設(shè)計(jì)系統(tǒng)：權(quán)衡努力

為設(shè)計(jì)系統(tǒng)創(chuàng)建自定義對(duì)話框組件需要大量的努力，并仔細(xì)考慮可訪問(wèn)性的細(xì)微差別。雖然可行，但錯(cuò)誤的風(fēng)險(xiǎn)很高，并且利用如A11y-Dialog這樣的現(xiàn)有，經(jīng)過(guò)良好測(cè)試的解決方案通常被證明更有效和可靠。斯科特·奧哈拉（Scott O'Hara）使用A11y-Dialog（以確保穩(wěn)定的跨瀏覽器體驗(yàn)）的強(qiáng)大插件的建議是令人信服的。

結(jié)論

我選擇利用A11y-Dialog，再加上Vue 3，Svelte和Angular適配器的創(chuàng)建，優(yōu)先考慮可訪問(wèn)性和效率。在構(gòu)建自定義組件的同時(shí)，可能會(huì)出現(xiàn)錯(cuò)誤的潛力和A11y-Dialog的現(xiàn)有質(zhì)量，使其成為了優(yōu)越的選擇。這次旅程強(qiáng)調(diào)了徹底可訪問(wèn)性審核的重要性以及利用維護(hù)良好的圖書(shū)館的價(jià)值。 A11y-Dialog的適應(yīng)性擴(kuò)展了其功能以創(chuàng)建抽屜組件，進(jìn)一步鞏固了其在我的庫(kù)中的價(jià)值。

以上是對(duì)話框組件：Go Gate HTML還是自己滾動(dòng)？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！