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

本地人<dialog></dialog>元素：批判性評估

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

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

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

定義對話框組件的可訪問性要求

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

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

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

審核A11Y-DIALOG以供可訪問性

在集成A11Y-Dialog之前，我進行了徹底的可訪問性審核：

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

Deque Systems的研究表明，自動化工具僅捕獲約57％的可訪問性問題，這強調(diào)了手動測試和用戶反饋的重要性。我使用一個簡單的本地HTML頁面進行了測試，以將組件與測試框架複雜性隔離開來。

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

特定於框架的對話框組件注意事項

許多框架提供自己的對話組件。雖然我沒有親自審核所有這些，但這裡有一些資源和觀察：

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

我的不可思議的庫使用A11y-Dialog適配器來兼容。

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

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

結(jié)論

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

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