無障礙功能

如果想確保更多人都能存取你的網站，可以將網頁調整為適合不同尺寸的螢幕，考慮其他您應謹記的因素。

色彩視覺障礙

每個人對顏色的認知各有不同。不過，紅色盲人並不認為是紅色。綠色盲人不見了。藍色盲人

某些工具可協助您大致瞭解色彩配置的內容會如何呈現不同色彩視覺呈現的使用者。

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。您可以使用這些資訊調整網站的調色盤。

瀏覽器支援

  • 96
  • 96
  • 101
  • 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 轉場效果或動畫，都要加入這段文字。

瀏覽器支援

  • 74
  • 79
  • 63
  • 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 與 HTML、CSS、JavaScript 和 ARIA 組合，從頭開始建立。

ARIA 是「無障礙上網式應用程式」的英文縮寫。有了這些詞彙，即使沒有合適的 HTML 元素，你也能提供語意資訊。

如要建立尚未以 HTML 元素形式使用的介面元素，請熟悉 ARIA。

透過 JavaScript 新增的輪輻功能越明確，你就能越瞭解 ARIA。如果堅持使用原生 HTML 元素，您可能不需要任何 ARIA。

如果盡可能測試，請讓螢幕閱讀器的實際使用者進行測試。如此一來，您不但可以進一步瞭解他們如何瀏覽網路，也不必再憑空猜測如何設計出無障礙設計。

與真人進行測試，是提出任何假設的好方法。在下一個單元中，您將瞭解使用者與您網站互動的各種方式，也是輕鬆做出假設的地方。

隨堂測驗

測驗您對無障礙功能的相關知識

或者，開發人員也可以運用 CSS 覆寫使用者偏好設定 (例如字型大小)，甚至讓變更結果最壞？

對
只要使用 body { font-size: 12px; } 就夠了。
false
使用者偏好有很大的影響，但無法提供全面的控制權。

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

絕對單位，例如 px。
使用時不會考量使用者字型大小偏好設定。
相對單位，例如 rem。
這樣一來，開發人員就能在建構時納入使用者字型大小偏好設定。

世界上每個人都使用滑鼠。

對
有些人會使用語音、鍵盤、遊戲手把、螢幕閱讀器或其他互動方式。
false
除了熱門滑鼠外，還有許多替代方法。

圖片如果包含空白的 alt 屬性，用途為何？

瀏覽器會自動為使用者新增這些屬性。
不具備任何瀏覽器的功能。
系統會將圖片視為呈現方式。
它會假設圖片瀏覽內容並不重要。
向螢幕閱讀器朗讀「空白字串」
請放心，
Nothing
這絕對是發生了什麼事。