無障礙功能

確保網頁能因應不同螢幕大小調整版面，只是確保網站盡可能讓更多人存取的方式之一。請考量以下其他因素。

色覺辨認障礙

每個人的色彩感知可能不同。紅視障者無法清楚辨識紅色，患有綠色盲的人看不到綠色，藍色盲患者會看到藍色。

部分工具可大致呈現不同色覺的人眼中的色彩配置。

Firefox 的「無障礙」分頁包含標示為「模擬」的下拉式選單，其中列出多個選項。

在 Chrome 開發人員工具中，您可以使用「彩現」分頁模擬視覺障礙。

這些是瀏覽器專用的工具。您也可以在作業系統層級模擬不同類型的視覺效果。

在 Mac 上前往：

1. 系統偏好設定
2. 無障礙設定
3. 多媒體
4. 色彩濾鏡
5. 啟用色彩濾鏡

選取任一選項。

一般來說，單純依賴顏色來區分不同元素並非好主意。舉例來說，你可以 (也應該) 將連結設為與周圍文字不同的顏色。但您也應套用其他樣式指標，例如為連結加上底線或設為粗體。

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

色彩對比

某些顏色組合可能會造成問題。如果前景和背景顏色對比不足，文字就會難以閱讀。色彩對比度不佳是網頁上最常見的無障礙問題之一，但幸好，您可以在設計流程初期發現這個問題。

您可以使用下列工具測試文字和背景顏色的對比度：

• VisBug 是一款瀏覽器擴充功能，適用於所有主要電腦版瀏覽器。
• Firefox 的無障礙檢查工具可檢查視覺對比問題。
• 您也可以使用 Chrome 開發人員工具找出並修正低對比文字。
• 在 Microsoft Edge 瀏覽器中，您可以使用顏色挑選器測試文字顏色對比。

建議您一律在 CSS 中一併宣告 color 和 background-color。請勿假設背景顏色為瀏覽器預設值。使用者可以變更瀏覽器使用的顏色，而且確實會這麼做。

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

高對比

部分使用者會將作業系統設為高對比模式。你可以在作業系統上試試看。

在 Mac 上前往：

1. 系統偏好設定
2. 無障礙設定
3. 多媒體

選取提高對比度的選項。

媒體功能可偵測使用者是否已啟用高對比模式。prefers-contrast 媒體功能可查詢三個值：no-preference、less 和 more。您可以根據這項資訊調整網站的調色盤。

使用者也可以在作業系統中設定偏好，使用反轉色彩。

在 Mac 上前往：

1. 系統偏好設定
2. 無障礙設定
3. 多媒體

選取反轉顏色的選項。

請確認網站在色彩反轉模式下仍可正常瀏覽。請注意方塊陰影，顏色反轉時可能需要調整。

字型大小

使用者不僅可以在瀏覽器中調整顏色，也可以調整預設字體大小。隨著視力衰退，他們可能會調整瀏覽器或作業系統的預設字型大小，並隨著年紀增長而增加字型大小。

您可以使用相對字型大小來回應這些設定。請避免使用 px 等單位。請改用 rem 或 ch 等相對單位。

請嘗試變更瀏覽器的預設文字大小設定。你可以在瀏覽器偏好設定中執行這項操作。或者，您也可以在瀏覽網頁時放大畫面。如果預設字型大小增加 200%，網站是否仍可正常運作？400% 呢？

如果使用者在桌上型電腦上將字型大小調高至 400%，瀏覽網站時應會看到與小型螢幕裝置相同的版面配置。

鍵盤瀏覽

並非所有人都會使用滑鼠或觸控板瀏覽網頁。鍵盤是瀏覽網頁的另一種方式，其中 tab 鍵特別實用。使用者可以快速從一個連結或表單欄位移至下一個。

使用 :hover 和 :focus 虛擬類別設定樣式的連結，無論使用者是使用滑鼠、觸控板或鍵盤，都會顯示這些樣式。使用 :focus-visible pseudo-class，只為鍵盤導覽設定連結樣式。讓這些樣式更加醒目。

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

當使用者從一個連結切換到另一個連結，或從一個表單欄位切換到另一個表單欄位時，這些元素會依文件結構中的顯示順序成為焦點。這也應與視覺順序相符。

請謹慎使用 CSS order 屬性。您可以搭配彈性方塊和格線使用這項屬性，以不同於 HTML 順序的視覺順序放置元素。這項功能很強大，但可能會讓使用鍵盤瀏覽網頁的人感到困惑。

使用鍵盤上的 tab 鍵測試網頁，確認 Tab 鍵順序是否合理。

在 Firefox 瀏覽器的開發人員工具「無障礙」面板中，有一個「顯示 Tab 鍵順序」選項。啟用這項功能後，系統會在每個可聚焦的元素上疊加數字。

減少動態效果

動畫和動態效果是讓網頁設計栩栩如生的絕佳方式。但對某些人來說，這些動作可能會造成暈眩，甚至引發噁心感。

這項功能查詢會傳達使用者是否偏好減少動作。這項功能稱為「prefers-reduced-motion」，在您使用 CSS 轉場效果或動畫的任何位置加入這個屬性。

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion 媒體查詢專門用於畫面上的動作。如果您在元素的顏色上使用轉場效果，但該顏色不應受到 prefers-reduced-motion 影響。您也可以轉換不透明度和交叉淡化。減少動態效果不代表完全沒有動畫。

語音

每個人瀏覽網路的方式都不盡相同。並非所有人都會在螢幕上看到你的網站。螢幕閱讀器等輔助技術會將螢幕上的輸出資訊轉換為語音。

螢幕閱讀器可搭配各種應用程式使用，包括網路瀏覽器。如要讓網路瀏覽器與螢幕閱讀器有效通訊，所存取的網頁必須含有實用的語意資訊。

先前您已瞭解僅含圖示的按鈕必須包含屬性，向視障使用者說明按鈕用途。這只是其中一個例子，說明紮實的 HTML 基礎有多重要。

標題

請明智地使用 <h1>、<h2>、<h3> 等標題。螢幕閱讀器會使用這些標題產生文件大綱，並可透過鍵盤快速鍵瀏覽。

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

結構

使用 <main>、<nav>、<aside>、<header> 和 <footer> 等地標元素，建構網頁內容結構。螢幕閱讀器使用者可以直接跳到這些地標。

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

表單

請確認每個表單欄位都有相關聯的 <label> 元素。您可以使用 <label> 元素上的 for 屬性，以及表單欄位上對應的 id 屬性，將標籤與表單欄位建立關聯。

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

圖片

請務必使用 alt 屬性提供圖片的文字說明。

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

如果圖片僅供呈現，您仍應加入 alt 屬性，但可以提供空白值。

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald 發表了一篇撰寫優質 alt 文字的文章。

連結

請盡量在連結中提供說明文字。避免使用「按這裡」或「更多」等詞組。

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

使用合理的語意 HTML，可讓螢幕閱讀器等輔助技術，以及語音助理等其他音訊輸出裝置，更輕鬆存取網頁內容。

部分沒有對應 HTML 元素的介面小工具，包括輪轉介面、分頁和手風琴。這些元素必須以 HTML、CSS、JavaScript 和 ARIA 組合從頭建構。

ARIA 是指 Accessible Rich Internet Applications，如果沒有合適的 HTML 元素，您可以使用詞彙表提供語意資訊。

如果需要建立目前尚未以 HTML 元素形式提供的介面元素，請熟悉 ARIA。

您使用 JavaScript 新增的自訂功能越多，就越需要瞭解 ARIA。如果堅持使用標準 HTML 元素，可能就不需要任何 ARIA。

如果可以，請盡量邀請螢幕閱讀器使用者參與測試。這不僅能幫助您進一步瞭解使用者瀏覽網路的方式，還能讓您在設計時不必再猜測如何兼顧無障礙功能。

與實際使用者進行測試，是揭露您可能做出的任何假設的絕佳方式。在下一個單元中，您將瞭解使用者與網站互動的不同方式，這也是很容易做出假設的另一個領域。

隨堂測驗

測試無障礙功能知識