16 KiB
建立無障礙網頁
由 Tomomi Imura 繪製的速記筆記
課前測驗
網路的力量在於其普遍性。無論是否有障礙，人人都能使用是其核心要素。
- 提姆·伯納斯-李爵士，W3C 主任及全球資訊網的發明者
這句話完美地突顯了建立無障礙網站的重要性。一個無法讓所有人使用的應用程式，本質上就是排他性的。作為網頁開發者，我們應該始終將無障礙性放在心上。從一開始就專注於此，您將能確保所有人都能訪問您創建的頁面。在本課程中，您將學習如何使用工具來確保您的網頁資產是無障礙的，以及如何以無障礙性為核心進行設計。
您可以在 Microsoft Learn 上學習本課程！
可使用的工具
螢幕閱讀器
最知名的無障礙工具之一是螢幕閱讀器。
螢幕閱讀器 是視力受損者常用的客戶端工具。當我們花時間確保瀏覽器正確傳遞我們想要分享的信息時，我們也必須確保螢幕閱讀器能做到同樣的事情。
螢幕閱讀器的基本功能是從上到下以語音方式朗讀頁面。如果您的頁面全是文字，閱讀器將以類似瀏覽器的方式傳遞信息。然而，網頁很少僅僅是文字；它們通常包含連結、圖形、顏色和其他視覺元素。我們需要注意確保這些信息能被螢幕閱讀器正確地朗讀。
每位網頁開發者都應熟悉螢幕閱讀器。正如上文所述，這是您的使用者將使用的客戶端。就像您熟悉瀏覽器的操作方式一樣，您也應該了解螢幕閱讀器的操作方式。幸運的是，大多數操作系統都內建了螢幕閱讀器。
一些瀏覽器也內建了工具和擴展功能，可以朗讀文字或提供一些基本的導航功能，例如 Edge 瀏覽器的這些無障礙工具。這些工具也是重要的無障礙工具，但它們的功能與螢幕閱讀器非常不同，不能被誤認為螢幕閱讀器測試工具。
✅ 試用螢幕閱讀器和瀏覽器文字朗讀工具。在 Windows 上，Narrator 是預設內建的，您也可以安裝 JAWS 和 NVDA。在 macOS 和 iOS 上，VoiceOver 是預設內建的。
放大功能
另一個視力受損者常用的工具是放大功能。最基本的放大方式是靜態放大，透過 Control + 加號 (+) 或降低螢幕解析度來控制。這種放大方式會使整個頁面重新調整大小，因此使用 響應式設計 對於在高放大級別下提供良好的使用者體驗非常重要。
另一種放大方式依賴於專門的軟體來放大螢幕的一個區域並進行平移，就像使用真正的放大鏡一樣。在 Windows 上，Magnifier 是內建的，而 ZoomText 是第三方放大軟體，具有更多功能和更大的使用者群體。macOS 和 iOS 都內建了名為 Zoom 的放大軟體。
對比檢查工具
網站上的顏色需要仔細選擇，以滿足色盲使用者或難以辨識低對比顏色的使用者的需求。
✅ 使用瀏覽器擴展工具，例如 WCAG 的顏色檢查工具，測試您喜歡使用的網站的顏色使用情況。您學到了什麼？
Lighthouse
在瀏覽器的開發者工具區域，您會找到 Lighthouse 工具。這個工具對於初步了解網站的無障礙性（以及其他分析）非常重要。雖然不能僅僅依賴 Lighthouse，但 100% 的分數作為基準是非常有幫助的。
✅ 在瀏覽器的開發者工具面板中找到 Lighthouse，並對任意網站進行分析。您發現了什麼？
為無障礙性進行設計
無障礙性是一個相對廣泛的主題。為了幫助您，有許多資源可供使用。
雖然我們無法涵蓋建立無障礙網站的所有方面，但以下是一些您需要實施的核心原則。從一開始就設計一個無障礙的頁面 總是 比事後回頭修改現有頁面更容易。
良好的顯示原則
安全的顏色調色盤
人們以不同的方式看待世界，包括顏色。在為您的網站選擇配色方案時，您應確保它對所有人都是無障礙的。一個很棒的 生成顏色調色盤的工具是 Color Safe。
✅ 找出一個在顏色使用上非常有問題的網站。為什麼？
使用正確的 HTML
透過 CSS 和 JavaScript，可以使任何元素看起來像任何類型的控制項。<span> 可以用來創建 <button>，而 <b> 可以變成超連結。雖然這可能被認為更容易設計，但它對螢幕閱讀器來說毫無意義。在頁面上創建控制項時，請使用適當的 HTML。如果您需要超連結，請使用 <a>。使用正確的 HTML 創建控制項被稱為使用語義化 HTML。
✅ 訪問任意網站，查看設計師和開發者是否正確使用 HTML。您能找到應該是連結但卻是按鈕的例子嗎？提示：右鍵點擊並選擇瀏覽器中的“查看頁面原始碼”來查看底層代碼。
創建描述性的標題層次結構
螢幕閱讀器使用者 非常依賴標題 來尋找信息並瀏覽頁面。撰寫描述性的標題內容並使用語義化的標題標籤，對於創建一個易於螢幕閱讀器使用者導航的網站非常重要。
使用良好的視覺線索
CSS 提供了對頁面上任何元素外觀的完全控制。您可以創建沒有邊框的文本框或沒有下劃線的超連結。不幸的是，移除這些線索可能會使依賴它們的使用者更難識別控制項的類型。
超連結文字的重要性
超連結是網頁導航的核心。因此，確保螢幕閱讀器能正確朗讀連結文字，讓所有使用者都能導航您的網站。
螢幕閱讀器與連結
正如您所預期的，螢幕閱讀器以與頁面上其他文字相同的方式朗讀連結文字。考慮以下示例，您可能會覺得這些文字完全可以接受。
小企鵝，有時被稱為仙女企鵝，是世界上最小的企鵝。點擊這裡 了解更多信息。
小企鵝，有時被稱為仙女企鵝，是世界上最小的企鵝。訪問 https://en.wikipedia.org/wiki/Little_penguin 了解更多信息。
NOTE 如您即將閱讀的內容，您應該 永遠 不要創建像上面這樣的連結。
請記住，螢幕閱讀器是一種與瀏覽器不同的介面，具有不同的功能集。
使用 URL 的問題
螢幕閱讀器會朗讀文字。如果文字中出現 URL，螢幕閱讀器會朗讀 URL。一般來說，URL 不會傳遞有意義的信息，並且聽起來可能很煩人。如果您的手機曾經語音朗讀過帶有 URL 的短信，您可能已經體驗過這種情況。
使用「點擊這裡」的問題
螢幕閱讀器也能僅朗讀頁面上的超連結，就像視力正常的人掃描頁面尋找連結一樣。如果連結文字總是「點擊這裡」，使用者聽到的就會是「點擊這裡，點擊這裡，點擊這裡，點擊這裡，點擊這裡，……」。所有連結現在都無法區分。
良好的連結文字
良好的連結文字能簡要描述連結的目的。在上述關於小企鵝的示例中，連結指向該物種的維基百科頁面。短語 小企鵝 作為連結文字非常合適，因為它清楚地表明點擊連結後可以了解什麼——小企鵝。
小企鵝，有時被稱為仙女企鵝，是世界上最小的企鵝。小企鵝。
✅ 在網上瀏覽幾分鐘，找出使用模糊連結策略的頁面。將它們與其他連結更好的網站進行比較。您學到了什麼？
搜索引擎注意事項
確保您的網站對所有人都無障礙，還能幫助搜索引擎導航您的網站。搜索引擎使用連結文字來了解頁面的主題。因此，使用良好的連結文字對所有人都有幫助！
ARIA
想像以下頁面：
| 產品 | 描述 | 訂購 |
|---|---|---|
| Widget | 描述 | 訂購 |
| Super widget | 描述 | 訂購 |
在此示例中，重複使用「描述」和「訂購」的文字對於使用瀏覽器的人來說是合理的。然而，使用螢幕閱讀器的人只會聽到「描述」和「訂購」的文字重複出現，沒有上下文。
為了支持這類場景，HTML 支援一組屬性，稱為 Accessible Rich Internet Applications (ARIA)。這些屬性允許您向螢幕閱讀器提供額外的信息。
NOTE：與 HTML 的許多方面一樣，瀏覽器和螢幕閱讀器的支援可能有所不同。然而，大多數主流客戶端都支援 ARIA 屬性。
您可以使用 aria-label 來描述連結，當頁面的格式不允許您這樣做時。例如，Widget 的描述可以設置為：
<a href="#" aria-label="Widget description">description</a>
✅ 一般來說，使用上述的語義化標記比使用 ARIA 更重要，但有時某些 HTML 元件沒有語義化的等效標記。一個很好的例子是樹狀結構。HTML 沒有樹狀結構的等效標記，因此您可以使用適當的角色和 ARIA 值來標識此元素的通用 <div>。MDN ARIA 文檔 包含更多有用的信息。
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
圖片
螢幕閱讀器無法自動朗讀圖片中的內容。確保圖片是無障礙的並不需要太多工作——這就是 alt 屬性的用途。所有有意義的圖片都應該有 alt 屬性來描述它們的內容。
純裝飾性的圖片應將其 alt 屬性設置為空字符串：alt=""。這樣可以防止螢幕閱讀器不必要地宣告裝飾性圖片。
✅ 如您所料，搜索引擎也無法理解圖片中的內容。它們也使用 alt 文本。因此，再次確保您的頁面是無障礙的還能帶來額外的好處！
鍵盤
有些使用者無法使用滑鼠或觸控板，而是依賴鍵盤操作來逐一切換元素。您的網站需要以邏輯順序呈現內容，讓鍵盤使用者能夠按順序訪問每個互動元素。如果您使用語義化標記構建網頁並使用 CSS 設計其視覺佈局，您的網站應該是可用鍵盤導航的，但手動測試這一方面仍然很重要。了解更多 鍵盤導航策略。
✅ 訪問任意網站，嘗試僅使用鍵盤進行導航。哪些有效，哪些無效？為什麼？
總結
一個僅對部分人無障礙的網頁並不是真正的「全球資訊網」。確保您創建的網站是無障礙的最佳方法是從一開始就採用無障礙性最佳實踐。雖然需要額外的步驟，但現在將這些技能融入您的工作流程，意味著您創建的所有頁面都將是無障礙的。
🚀 挑戰
使用您學到的策略，將以下 HTML 重寫為盡可能無障礙的版本。
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">© 2016 Instrument</p>
</div>
</body>
</html>
課後測驗
回顧與自學
許多政府都有關於無障礙需求的法律。了解一下您所在國家的無障礙法律。哪些內容涵蓋在內，哪些未涵蓋？例如：這個政府網站。
作業
致謝：Turtle Ipsum 由 Instrument 提供
免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。