認識“包容性組件”：可訪問、防彈的前端模式

如今，前端可訪問性仍然有些神秘。 我們如何構建可訪問的按鈕和下拉菜單？ 對鍵盤友好的工具提示、選項卡和通知呢？ 還是包含手風琴、滑塊、數據表和模態？ 讓我們一起弄清楚。 認識包容性組件，這是我們用於構建完全可訪問的數字產品的新手冊。 下載免費示例 PDF (1.1 MB)。

關於本書

從本質上講， Inclusive Components是一本詳細、實用的手冊，用於構建完全可訪問的界面。 本書通過包容的視角研究了 12 種常見的界面模式——手風琴、表格、模式、通知、選項卡、切換以及介於兩者之間的所有內容。 結果是我們每天創作、插入和使用的可訪問且強大的組件。

多年來，專注於可訪問性的經驗豐富的前端開發人員 Heydon Pickering 一直在撰寫有關可訪問性解決方案的文章。 我們與 Heydon 合作編寫了一本包含共同挑戰和解決方案的書，這些年來他一直在精煉。

對於每個組件，深入探索都經過精心說明，所有解決方案都以防彈代碼片段的形式提供，立即適用於您的工作。 獎勵：您將學習如何在考慮到包容性設計的情況下構建自己的可訪問組件——所有這些都在一本書中。 跳轉到目錄↓

332 頁。 帶有縫合裝訂和絲帶頁面標記的優質精裝書。 該電子書以 PDF、ePUB、亞馬遜 Kindle 的形式提供。 由海登編寫和設計。 下載示例 PDF (1.1 MB)。

目錄

每一章都處理一個單獨的組成部分，說明不同和易受傷害的人可能會如何閱讀和與之互動，以及如何更好地適應他們。 下載示例 PDF (1.1 MB)。

關於作者

Heydon Pickering (@heydonworks) 曾與 Paciello Group、BBC、Smashing Magazine 和 Bulb Energy 合作，擔任設計師、工程師、作家、編輯和插畫師。 他入圍了 The Net Awards 的年度設計師。

Heydon 之前寫過 Inclusive Design Patterns，銷量超過 10,000 份。 這個頭銜的收益被捐贈給了美國公民自由聯盟和美國民主社會主義者，以幫助這些組織與法西斯主義作鬥爭並創建一個更具包容性的社會。

當被問及為什麼決定寫這本書時，Heydon 分享了以下內容：

“幾年前，我對網頁設計感到厭煩。 然後響應式設計出現了，給我帶來了新的挑戰。 它讓我的生活和工作再次變得有趣。 然後我發現了網絡可訪問性的世界，我的熱情再次被喚醒。 有些人似乎認為我做網絡可訪問性是因為我在道德上感到有義務，或者如果我不這樣做我會感到內疚。

雖然我堅信各種各樣的人都應該能夠訪問網絡，但我也很感謝我遇到的網絡可訪問性挑戰，並在本書中有所介紹，它們激勵了我，並賦予了我的工作新的深度。

我寫這本書是因為我想讓你知道讓你的界面更易於訪問是多麼有趣，以及你這樣做的感覺是多麼的有成就感。 感謝您閱讀本文，希望您也閱讀本書。”

感言

“Inclusive Components 通過真實世界的示例對可訪問組件的開發進行了非常深入和徹底的解釋。 Heydon Pickering 展示了幾種替代方法並解釋了每種方法的優缺點。 讀書也是一種享受！”

— Artem Sapegin，Wayfair 前端開發人員

“Inclusive Components 充滿了關於構建可訪問 UI 的實用且全面的建議。 這是我在官方 WCAG 和 ARIA 文檔之後的首選資源。 我發現它在構建我們的設計系統時非常有用！”

— Sarah Federman，高級前端開發人員

“Heydon 通過他在包容性組件方面的工作所取得的成就是一套實用、友好且平易近人的指南，它們不僅可以幫助您生成可訪問的組件，還可以幫助您生成彈性和漸進的起點，幫助您構建更好的網站和 Web 應用程序一般的。 正是出於這個原因，我經常將這項工作描述為重要的學習材料。”

— Andy Bell，獨立設計師和開發人員

為什麼這本書可能適合你

魔鬼在細節中，通常您出於善意所做的事情會在不知不覺中施加可訪問性障礙。 包容性組件適用於每個想要學習如何檢測和解決工作中潛在的可訪問性問題的前端開發人員。 本書將教你：

1. 如何使用<button>元素，如何將樣式應用於切換按鈕，以及如何標記它們。
2. 如何以包容的方式創建允許用戶創建和刪除內容的託管列表。
3. 如何解決和解決導航菜單和子菜單（又稱“下拉菜單”）的可訪問性問題。
4. 如何創建可訪問且鍵盤友好的工具提示和切換提示。
5. 如何創建一個既可訪問又可長期維護的“黑暗模式”主題。
6. 如何構建可訪問的內容滑塊以防止對運動敏感的人造成傷害。
7. 如何創建具有實時區域的包容性通知，以同時通過視覺和聽覺渠道與您的用戶交流。
8. 如何創建語義正確、響應迅速且可排序的數據表。
9. 如何在考慮性能和包容性設計的情況下構建可訪問的對話框和模式對話框。
10. 如何創建和分組包容性卡片（例如預告片）。

技術細節

• 國際標準書號： 978-3-945749-82-1 （印刷版）
• 優質精裝書，縫合裝訂，絲帶頁標記。
• 該電子書以 PDF、ePUB 和 Amazon Kindle 的形式從 Heydon 的網站提供。
• 來自德國的全球免費航空郵寄服務。 （檢查您的交貨時間。）
• 提供電子書和印刷版 + 電子書。

社區事務️

通過Inclusive Components ，我們試圖創建一個非常專注的手冊，其中包含適用的、長期有效的解決方案和策略，以創建可訪問和包容的界面。

我們希望通過 Heydon 的書，您將能夠在構建界面時做出更好的設計和編碼決策。 也許它甚至會成為您每次需要構建這些常見 UI 組件之一時都會參考的參考書之一。

製作一本書需要相當多的時間，如果沒有我們優秀社區的支持，我們無法完成。 非常感謝 Smashing 會員對我們冒險的持續支持。 因此，電子書對於Smashing Members來說是並且永遠都是免費的。 此外，會員在購買印刷版時可以獲得友好的折扣。

保持粉碎，感謝大家一直以來的支持！

更多粉碎書籍

推廣最佳實踐並為您提供實用技巧以應對您的日常編碼和設計挑戰一直是（並將成為）我們在 Smashing 所做的一切的核心。 在過去的幾年裡，我們很幸運能與一些來自網絡社區的有才華、有愛心的人一起工作，將他們的豐富經驗出版成經得起時間考驗的書籍。 阿拉、亞當和安迪就是其中一些人。 你已經看過他們的書了嗎？