# 建立無障礙的網頁 ![關於無障礙設計](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hk.png) > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製的手繪筆記 ## 課前測驗 [課前測驗](https://ff-quizzes.netlify.app/web/) > 網絡的力量在於其普遍性。無論是否有殘障,每個人都能訪問是其關鍵特性。 > > \- 提姆·伯納斯-李爵士,W3C 主任及萬維網發明者 這句話完美地突顯了建立無障礙網站的重要性。一個無法讓所有人訪問的應用程式,本質上就是排他的。作為網頁開發者,我們應該時刻將無障礙性放在心上。從一開始就專注於這一點,將確保您創建的頁面能被所有人訪問。在這節課中,您將學習如何使用工具來確保您的網頁資產是無障礙的,以及如何在設計時考慮無障礙性。 > 您可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 上學習這節課! ## 可用工具 ### 螢幕閱讀器 最知名的無障礙工具之一是螢幕閱讀器。 [螢幕閱讀器](https://en.wikipedia.org/wiki/Screen_reader) 是視障人士常用的工具。當我們花時間確保瀏覽器能正確傳遞我們想分享的資訊時,我們也必須確保螢幕閱讀器能做到同樣的事情。 最基本的螢幕閱讀器會從上到下以語音方式讀取頁面。如果您的頁面全是文字,閱讀器會以類似於瀏覽器的方式傳遞資訊。然而,網頁很少是純文字的;它們通常包含連結、圖片、顏色和其他視覺元素。我們需要確保這些資訊能被螢幕閱讀器正確讀取。 每位網頁開發者都應該熟悉螢幕閱讀器。正如上文所述,這是您的使用者會使用的工具。就像您熟悉瀏覽器的操作一樣,您也應該學習螢幕閱讀器的操作。幸運的是,大多數操作系統都內建了螢幕閱讀器。 一些瀏覽器還內建了工具和擴展功能,可以朗讀文字甚至提供一些基本的導航功能,例如 [這些專注於無障礙的 Edge 瀏覽器工具](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)。這些工具也是重要的無障礙工具,但它們的功能與螢幕閱讀器非常不同,不能用作螢幕閱讀器測試工具。 ✅ 試用螢幕閱讀器和瀏覽器的文字朗讀功能。在 Windows 上,[Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) 是預設內建的,您也可以安裝 [JAWS](https://webaim.org/articles/jaws/) 和 [NVDA](https://www.nvaccess.org/about-nvda/)。在 macOS 和 iOS 上,[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) 是預設內建的。 ### 放大功能 另一個視障人士常用的工具是放大功能。最基本的放大功能是靜態放大,可以通過 `Control + 加號 (+)` 或降低螢幕解析度來控制。這種放大方式會使整個頁面重新調整大小,因此使用[響應式設計](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)對於在放大級別下提供良好的使用者體驗非常重要。 另一種放大方式依賴於專門的軟體來放大螢幕的一部分並進行平移,就像使用真正的放大鏡一樣。在 Windows 上,[Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) 是內建的,而 [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) 是一款第三方放大軟體,具有更多功能和更大的使用者群體。在 macOS 和 iOS 上,內建了名為 [Zoom](https://www.apple.com/accessibility/mac/vision/) 的放大軟體。 ### 對比檢查工具 網站上的顏色需要仔細選擇,以滿足色盲使用者或難以辨識低對比度顏色的人的需求。 ✅ 使用瀏覽器擴展工具(例如 [WCAG 的顏色對比檢查工具](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon))測試您喜歡的網站的顏色使用情況。您學到了什麼? ### Lighthouse 在瀏覽器的開發者工具區域,您會找到 Lighthouse 工具。這個工具對於初步檢查網站的無障礙性(以及其他分析)非常重要。雖然不應完全依賴 Lighthouse,但獲得 100% 的分數作為基準是非常有幫助的。 ✅ 在瀏覽器的開發者工具面板中找到 Lighthouse,並對任何網站進行分析。您發現了什麼? ## 無障礙設計 無障礙性是一個相對廣泛的主題。為了幫助您,有許多資源可供使用。 - [Accessible U - 明尼蘇達大學](https://accessibility.umn.edu/your-role/web-developers) 雖然我們無法涵蓋創建無障礙網站的每個方面,但以下是一些您需要實施的核心原則。從一開始就設計無障礙頁面**總是**比事後再去修改現有頁面更容易。 ## 良好的顯示原則 ### 安全的顏色調色盤 每個人看世界的方式都不同,這包括對顏色的感知。在為您的網站選擇配色方案時,您應確保它對所有人都是無障礙的。一個很棒的[生成顏色調色盤的工具是 Color Safe](http://colorsafe.co/)。 ✅ 找出一個在顏色使用上非常有問題的網站。為什麼? ### 使用正確的 HTML 通過 CSS 和 JavaScript,您可以讓任何元素看起來像任何類型的控制項。例如,`` 可以用來創建 `