慶祝全球無障礙宣傳日
Schalk Neethling
閱讀時間 6 分鐘
網際網路是一個全球社群，可訪問性就是確保每個人都能參與其中。為了慶祝 全球可訪問性意識日 (GAAD)，我們分享一些技巧，幫助您讓您的網站對所有人更加可訪問。
檢視 Web 內容可訪問性指南 (WCAG)
確保您的內容在網上可訪問的標準成功標準和指南是 Web 內容可訪問性指南。雖然理解和知道如何實現所有這些指南可能令人生畏，但有幫助。以下是訪問、閱讀和理解這些指南的三種方法。
既然您知道了權威來源，讓我們深入研究一些支援文件和工具。
檢視 MDN Web Docs 上的“可訪問性注意事項”部分
MDN Web Docs 上的幾個頁面包含一個部分，描述了與您正在閱讀的主題相關的可訪問性注意事項。當您遇到這些部分時，花點時間閱讀、理解並在需要時採取行動總是很有價值的。讓我們看幾個例子。
在 HTML multiple 屬性的參考頁面上，“可訪問性注意事項”部分強調了在使用該屬性時需要牢記的一些關鍵細節，以便螢幕閱讀器使用者清楚地知道會發生什麼。
tabindex 屬性經常被誤解和濫用。該屬性的不正確使用可能會破壞使用者期望，甚至對那些使用鍵盤瀏覽頁面或表單的人的整體體驗造成破壞。此外，如果使用非互動式元素編寫互動式元素，它們將對可訪問性樹隱藏。因此，閱讀 tabindex 屬性可訪問性注意事項部分至關重要。
正如早期關於 landmark roles 的部落格文章中所提到的，如果 HTML 已經有一個滿足您需求的元素或屬性，請使用它，而不是使用 ARIA 角色來操作不合適的元素。
CSS opacity 屬性是另一個需要小心使用的屬性，尤其是在涉及文字元素時。在 MDN Web Docs 網站上可以找到更多這樣的內容。請務必閱讀這些內容，如果有不清楚的地方，請在 Discord 上尋求幫助。此外，MDN Web Docs 上的可訪問性模組是進一步熟悉該主題的好方法。
檢查網頁的色彩對比度
低對比度仍然是網頁上最大的問題之一，正如 最新的 WebAIM million 報告中所述。這是 WebAIM 的第五份年度報告，其中他們對全球排名前一百萬個網站的主頁進行了可訪問性評估。自 2022 年以來情況有所改善，但改善不大。那麼，您如何幫助改善這些統計資料呢？
有多種選擇。首先，確保團隊中的每個人都瞭解 Web 內容可訪問性指南 (WCAG)，特別是成功標準 1.4.3，這一點至關重要。MDN Web Docs 上還有一個頁面更詳細地介紹了色彩對比度。
如果您的設計師使用 Figma 來設計您的網站頁面、元件和佈局，他們應該安裝並使用色彩對比度外掛。這樣做將為您打下堅實的基礎，並在專案的未來階段節省大量時間。如果設計工具沒有用於測試色彩對比度的外掛或原生支援，那麼 Paciello Group 的開源色彩對比度分析器 (CCA) 工具是一個很棒的工具，可用於 Windows 和 macOS 上的任何應用程式。
當您在瀏覽器中測試網站時，您有更多的選擇
- 使用基於 Chromium 的瀏覽器中的取色器。
- 使用 Firefox 中的可訪問性檢查器和取色器。
當沒有內建色彩對比度測試支援時，使用前面提到的 CCA 工具是您的首選。
觀看 YouTube 上的色彩對比度審計
如果您想了解更多資訊，請觀看YouTube 上演示這些色彩對比度工具的影片。
使用可訪問性審計工具超越色彩對比度
網頁可訪問性不僅僅是色彩對比度。主題包括為非純裝飾性的影像新增替代文字。確保僅使用鍵盤的使用者可以訪問您的頁面。在使用 ARIA 屬性時，正確使用它們至關重要。如果使用不當，它們可能會弊大於利。根據您的網站或 Web 應用程式的複雜性，您可以做更多事情來確保可訪問性。幸運的是，有一些自動化工具可以幫助我們識別和修復自動化可以檢測到的常見問題。
其中第一個是 Google Chrome 團隊的Lighthouse。Lighthouse 可以透過多種方式使用，例如從命令列、在Nodejs 中、作為持續整合管道的一部分，或者在您的瀏覽器中（特別是基於 Chromium 的瀏覽器）使用。Lighthouse 的標準執行不僅會測試可訪問性，而且您還可以停用其他測試。
注意：重要的是要知道，雖然自動化工具有幫助，但使用螢幕閱讀器進行測試或與真實使用者互動是真正確保每個想要使用您的網站或應用程式的使用者都能獲得包容性體驗的唯一方法。
預設情況下，Lighthouse 將啟用所有審計
要僅執行可訪問性審計，請務必取消選中所有其他類別
此外，還可以使用瀏覽器擴充套件，Lighthouse 也可以與之結合使用，或者填補 Lighthouse 不是標準開發功能的瀏覽器中的空白。最廣泛使用的之一是 Deque Labs 的Axe。其他一些流行的工具包括 WebAIM 的WAVE，以及其他視覺模擬器，例如NoCoffee 瀏覽器擴充套件、Firefox 中內建的視覺模擬器以及 Safari 中的審計工具。
在 YouTube 上觀看自動化工具演示
如果您想了解更多資訊，請觀看YouTube 上演示這些自動化工具基礎知識的影片。
努力為所有人提供平等的訪問機會
網路是連線人們的重要工具，但我們每個在網路上構建的人都有責任確保我們創造的東西不會排斥任何人。雖然有些人可能會爭辯說，那些遇到挑戰的人是我們網站或應用程式使用者的少數，但我們希望您考慮路緣切口效應。這種效應的簡短描述是，為特定人群製作的便利設施最終會使整個社會受益。
正如其名稱所示，這個概念來自大多數街道上都可以找到的字面意義上的路緣切口，尤其是在大城市。雖然最初是在二戰後引入的，以適應因找不到無障礙的城市街道而返回家園的退伍軍人輪椅使用者，但如今它在世界許多地方已司空見慣。這也不是偶然發生的，而是需要許多人發聲並爭取他們平等獲得機會的權利。
每一次當有人需要將裝滿貨物的推車搬上路緣，或者父母推著嬰兒車過馬路，或者有人想在火車站或機場拖動沉重的行李而無需將其抬過路緣時；他們都在體驗路緣切口效應。
因此，這不僅是正確的事情，而且您的公司還可以避免法律訴訟，這種訴訟對品牌來說既昂貴又具破壞性。最終，您今天所做的便利措施和投入的資源可能會在明天惠及更廣泛的社會群體，甚至可能包括您自己。
總結
我們很高興與您一起慶祝全球可訪問性意識日，並希望您能加入我們這項重要的工作。我們知道，考慮到您的網站可能在哪些方面不夠可訪問可能會讓人感到畏懼，但我們也知道，透過邁出小小的步伐並使用本文中分享的工具和指南，您就已經走在正確的道路上了。