無障礙功能

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

色彩視覺障礙

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

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

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

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

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

在 Mac 上前往：

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

請選取其中一個選項，

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

a {
  color: red;
}

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

色彩對比

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

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

• tota11y 是可加入瀏覽器工具列的書籤小程式。
• 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 虛擬類別為連結設定樣式，僅供鍵盤瀏覽。您可以設定讓這些樣式更加顯眼。

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

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

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

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

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

減少動態效果

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

其中一項功能查詢可指出使用者偏好較少動作。名稱為 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 是「無障礙網際網路應用程式」的縮寫。在沒有合適的 HTML 元素可用時，這個詞彙可讓您提供語意資訊。

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

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

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

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

隨堂測驗

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