無障礙功能

允許網頁對不同螢幕大小做出反應，是確保網站可供更多使用者存取的方法之一。請考量其他您應該注意的因素。

色彩視覺障礙

不同人看到的顏色不一樣。紅色盲人不會認為紅色是醒目的紅色。含有綠色細菌的綠色子星消失了。對於藍色弱勢族群而言，這是藍色的。

有些工具可讓您大致瞭解色彩配置對於不同色彩視覺的使用者所呈現的效果。

Firefox 的「無障礙設定」分頁包含標示「模擬」的下拉式選單，內含選項清單。

模擬紅色的紅色盲 (看不到紅色)。 模擬藍色盲 (看不到藍色)
瀏覽網站，並模擬不同類型的色彩視覺呈現。

在 Chrome 開發人員工具中，您可以使用轉譯分頁模擬視覺缺失。

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

在 Mac 上前往：

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

請選取其中一個選項，

系統偏好設定中的色彩篩選器選項。

一般來說，最好不要只依賴顏色來區分不同的元素。例如，您可以針對連結周圍的文字，設定不同的顏色。不過，您也應套用其他樣式指標，例如將連結加上底線或將連結設為粗體。

錯誤做法
a {
  color: red;
}
正確做法
a {
  color: red;
  font-weight: bold;
}

色彩對比

有些色彩組合可能會造成問題。如果前景色彩和背景顏色的對比度不足，文字就會難以閱讀。色彩對比度是網路上最常見的無障礙功能問題之一，幸好這是一種能在設計過程中及早發現的問題。

以下幾項工具可用來測試文字和背景顏色的對比度：

建議您一律在 CSS 中同時宣告 color 和 background-color。請不要假設背景顏色就是瀏覽器的預設值。使用者可以和變更瀏覽器使用的顏色。

錯誤做法
body {
  color: black;
}
正確做法
body {
  color: black;
  background-color: white;
}

高對比

有些人會將作業系統設為使用高對比模式，您可以在作業系統上試試這項功能。

在 Mac 上前往：

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

選取增加對比度的選項。

增加系統偏好設定的對比度。

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

瀏覽器支援

  • Chrome：96.
  • Edge：96，
  • Firefox：101。
  • Safari：14.1。

資料來源

使用者也可以在作業系統中設定使用反轉顏色。

在 Mac 上前往：

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

選取反轉顏色的選項。

在系統偏好設定中反轉顏色。

請確保使用色彩反轉的使用者網站仍適合瀏覽網站。留意方形陰影，顏色反轉時可能需要調整這些陰影。

字型大小

顏色並非唯一可以在瀏覽器中調整的，使用者也可以調整預設字型大小。隨著願景逐漸衰退，他們可能會調整瀏覽器或作業系統的預設字型大小，以防年逐漸提高數值。

您可以調整字型大小，以回應這些設定。避免使用 px 這類單位。請改用相對單位，例如 rem 或 ch。

請嘗試變更瀏覽器的預設文字大小設定。前往瀏覽器偏好設定即可進行設定。您也可以在瀏覽網頁時透過放大方式查看網頁。如果預設字型大小增加 200%，您的網站還能正常運作嗎？那 400% 呢？

使用者用桌機造訪您的網站時，如果字型大小上升至 400%，他們看到的版面配置應該與透過小螢幕裝置造訪網站的使用者相同。

Clearleft 點 com。
在電腦和行動裝置上瀏覽的相同網站。電腦版瀏覽器的字型大小已增加至 400%。

鍵盤瀏覽

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

無論使用者使用的是滑鼠、觸控板或鍵盤，樣式都會顯示 :hover 和 :focus 虛擬類別的連結。使用 :focus-visible 虛擬類別為連結設定樣式，僅供鍵盤瀏覽。您可以設定讓這些樣式更加顯眼。

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

當使用者分頁 (從連結、表單欄位到表單欄位) 時，這些元素會依照文件結構中的顯示順序聚焦。這也應與視覺順序相符。

請謹慎處理 CSS order 屬性。您可以結合使用 Flexbox 和格線，將元素以不同視覺順序排列在 HTML 中。這項功能非常強大，但可能會讓使用者誤以為使用鍵盤瀏覽網路。

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

在 Firefox 瀏覽器開發人員工具的「協助工具」面板中，有個 [顯示分頁順序] 選項。啟用這個選項後，每個可聚焦元素上都會疊加數字。

使用 Firefox 的「協助工具」分頁，以視覺化方式呈現分頁順序。

減少動態效果

動畫和動態效果是讓網頁設計更加生動的好方法。但對某些人來說，這些運動可能會非常失落，甚至會引發噁心。

其中一項功能查詢可指出使用者偏好較少動作。名稱為 prefers-reduced-motion。無論在任何位置使用 CSS 轉場或動畫，都加入此素材資源。

瀏覽器支援

  • Chrome：74.
  • Edge：79，
  • Firefox：63。
  • Safari：10.1.

資料來源

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 是「無障礙網際網路應用程式」的縮寫。在沒有合適的 HTML 元素可用時，這個詞彙可讓您提供語意資訊。

如果您需要建立 HTML 元素尚未提供的介面元素，請先熟悉 ARIA。

透過 JavaScript 新增的客製化功能越多，就越容易瞭解 ARIA。如果您繼續使用原生 HTML 元素，可能就不需要任何 ARIA。

如果一切都可行，請向螢幕閱讀器的實際使用者進行測試。如此一來，您不僅可以更加瞭解使用者如何瀏覽網路，也能在設計時將無障礙設計納入考量。

與真人一起進行測試，能有效揭露任何假設。在下一個單元中，您將會瞭解使用者與您網站互動的不同方式，這也是導致系統無法輕易假設的另一個部分。

隨堂測驗

測試你對無障礙功能的瞭解程度

透過 CSS，開發人員可以覆寫使用者偏好設定 (例如字型大小) 嗎？

是
只使用 body { font-size: 12px; } 就夠了。
否
使用者偏好設定有很大的影響，但無法完全掌控。

如要避免覆寫使用者的字型大小偏好設定，請使用？

絕對單位，例如 px。
系統在使用這類設定時，不會考量使用者的字型大小偏好設定。
相對單元，例如 rem。
這些格式可讓開發人員根據使用者的字型大小偏好，在建構廣告時加入合適的長度。

全世界的人都使用滑鼠。

是
有些人會透過語音、鍵盤、遊戲手把、螢幕閱讀器或其他方式進行互動。
否
熱門滑鼠有許多替代方案。

如果圖片的 alt 屬性為空白，會發生什麼事？

瀏覽器會自動為使用者新增使用者。
並非所有瀏覽器的功能。
系統會將圖片視為呈現內容。
使用者會認為圖片本身沒有太大的意義。
唸出「空字串」螢幕閱讀器
這不是發生什麼事。
Nothing
毫無疑問。