改善網頁的無障礙功能
本文件集是文字版本的內容，屬於 Udacity 無障礙功能課程所涵蓋的內容。這並不是直接對影片的語音轉錄內容，而是將課程的原創內容做為基礎，以更精簡的方式呈現無障礙規範和做法。
摘要
- 瞭解無障礙工具的意義，以及如何將其用於網頁開發。
- 瞭解如何讓所有人存取及使用網站。
- 瞭解如何加入基本的無障礙功能，同時將開發影響降到最低。
- 瞭解可用的 HTML 功能，以及如何使用這些功能來改善無障礙設計。
- 瞭解進階無障礙功能如何打造優質的無障礙體驗。
瞭解無障礙設計及其範圍及其影響，有助於您更臻完善。本指南旨在協助您瞭解如何讓所有人都能輕鬆存取您的網站。
「無障礙設計」可能很難拼寫，但不一定要完成。本指南將說明如何輕鬆達成這些目標，不費吹灰之力就能改善無障礙功能、如何運用 HTML 內建功能建立更易於存取且完善可靠的介面，以及如何運用進階技巧打造精美的無障礙體驗。
您也可以發現許多這些技巧都可協助您建立更賞心悅目的介面，更適合「所有」使用者使用，而不僅僅是身心障礙使用者。
當然，許多開發人員都十分理解無障礙工具的意義，也就是如何處理政府合約、檢查清單和螢幕閱讀器，對吧？- 而且四處浮現許多人誤解 舉例來說，許多開發人員認為解決無障礙功能的問題，將迫使他們必須選擇打造愉快且引人入勝的體驗，而這又簡明易懂又難以取得。
當然不是情況是這樣，所以我們先釐清一下情況，再進一步探討其他主題。無障礙設計是什麼意思？我們想瞭解什麼？
什麼是無障礙設計？
大致來說，當我們說網站可供存取時，即表示該網站的內容可供使用，且其功能可僅透過「任何人」運作。對開發人員來說，您可以輕鬆假設所有使用者都能查看及使用鍵盤、滑鼠或觸控螢幕，並且可以和您的頁面內容互動方式相同。這樣可以讓使用者享有良好的體驗，但也會造成問題，從簡單的惱人到對別人的驚悚，無所不包。
無障礙設計則是指使用者可能超出「一般」使用者的範圍，他們存取的內容或互動體驗可能與預期不同。具體來說，其關注的對像是身心障礙者或身心障礙者，同時請記住，這可能並非實際體驗，也可能只是暫時性的。
舉例來說，雖然我們主要是以身心障礙使用者為主題進行無障礙討論，但可能都涉及使用無法基於其他原因而無法使用的介面。您是否曾在手機上遇到電腦版網站問題，或看過「您所在地區不提供這項內容」訊息，或是在平板電腦上找不到熟悉的菜單？這些都是無障礙問題。
隨著您深入學習，您將發現在廣泛的無障礙功能問題可以解決，在一般情況下，所有人的使用者體驗幾乎都能獲得改善。以下面這段程式碼為例：
這份表單有一些無障礙功能的問題。
- 文字對比度不足，導致低視能使用者難以閱讀。
- 將標籤左側，並採用右邊的欄位，對許多人來說並不容易產生關聯，而且幾乎不可能必須放大畫面才能使用頁面。想像一下，在手機上查看這些資訊時，必須平移畫面才能找出問題所在。
- 「要記住詳細資料嗎？」標籤並未與核取方塊建立關聯，因此您必須輕觸或點選小型方塊，而不只是點選標籤。此外，使用螢幕閱讀器的使用者也無法找出關聯。
現在，我們一起揮揮無障礙桿，看看有哪些表單已修正這些問題。 我們會將文字調暗、修改設計，讓標籤靠近所加上標籤的項目，並修正標籤，使其與核取方塊建立關聯，這樣同樣可以點選標籤來切換。
您偏好使用哪一種？回答「可存取的版本」後，您就可以開始瞭解本指南的主要前層。對許多使用者來說，如果這是完全阻礙的因素，通常也對許多使用者來說也是一大痛點，因此只要修正無障礙問題，就能為所有人改善體驗。
無障礙網頁規範
在本指南中，我們將參閱「網頁內容無障礙設計指南 (WCAG) 2.0」，無障礙專家提供一套指南和最佳做法，旨在解答「無障礙設計」對於特定方法的意義。
WCAG 是根據 POUR 縮寫所呼叫的四大原則：
可察覺：使用者是否能察覺內容？用這些概念提醒我們，儘管使用者可透過某個感官 (例如視覺) 察覺某些內容，並不代表所有使用者都能察覺。
可操作：使用者是否能使用 UI 元件並瀏覽內容？舉例來說，如果使用者無法使用滑鼠或觸控螢幕，就無法操控需要懸停互動的內容。
可理解：使用者能理解網頁內容嗎？介面是否易於理解並保持一致，不會造成任何混淆？
健全完善：各種使用者代理程式 (瀏覽器) 都可以使用內容嗎？是否可利用輔助技術存取內容？
雖然 WCAG 全面概述了存取內容所代表的意義，但也可能是件令人不知所措。為減緩此問題，WebAIM(Mind in Mind) 團隊將 WCAG 指南寫到了一個容易遵循的檢查清單，專門針對網路內容而設計。
WebAIM 檢查清單提供您需要實作的簡要摘要，您也可以連結至基礎的 WCAG 規格 (如果需要展開的定義)。
有了這項工具，您就可以繪製無障礙工作的方向，您可以放心，只要專案符合所述條件，使用者就能享有良好體驗。
瞭解使用者的多元性
瞭解無障礙設計時，有助於瞭解世界各地的不同使用者，以及影響他們的無障礙主題種類。因此，歡迎各位在這場盛事中，與 Google 技術專案經理 Victor Tsaran 一起探討資訊豐富的問題/答案。
你在 Google 有哪些工作？
Google 的職責是確保所有多元的使用者都能使用我們的產品，無論身心障礙與否皆不受影響。
使用者有哪些類型的身心障礙？
當我們思考何種因素讓某人難以存取我們的內容時，許多人就能立即想像到像我這樣的失明使用者。這種障礙確實會讓許多網站感到困擾，甚至無法使用大量網站。
許多現代網路技術都為建立的網站無法與失明使用者用來存取網路的工具完美搭配運作。不過，無障礙功能其實更大。我們發現，模擬功能可分為四個廣泛領域：視覺、動作、聽覺和認知。
我們將逐一介紹。可以請你提供一些視障者的例子嗎？
視障者可分為多個類別：無視能使用者 (例如我) 可能會使用螢幕閱讀器、點字，或結合兩者。
現在有些時候，根本沒有視覺，不過還是有可能會遇到的好機會，或者至少遇過一個看不見的人。不過，低視能使用者也絕大多數。
這個範圍很廣，從沒有 Cornea 的人，像我的妻子一樣。雖然她幾乎看著閱讀印刷的困難，卻被視為法律盲人，而對於那些可能只是視力不佳、需要戴上極強的眼鏡的人而言。
定價範圍不大，所以這個類別使用者通常會使用各式各樣的住宿服務：有些人會使用螢幕閱讀器或點字顯示器 (我甚至聽說一位女性在螢幕上閱讀點字，因此比列印文字容易閱讀)，或者他們可能只使用放大鏡，甚至使用放大鏡搭配螢幕縮放功能。也可能使用高對比選項，例如作業系統高對比模式、高對比瀏覽器擴充功能，或網站的高對比主題。
許多使用者甚至會使用多種組合，例如使用高對比模式、瀏覽器縮放和文字轉語音的朋友小蘿。
低視能其實很多人可以產生共鳴。首先，我們的願景會逐步降低但許多人都認為筆電在大太陽的窗外下去，卻突然變成什麼，根本看不見任何東西，因而感到很麻煩！或者，如果使用者有雷射手術 或只是想從房間裡閱讀東西， 也可能用過我剛才說的其中一種住宿。因此，我認為開發人員要能輕鬆對低視能使用者 展現同理心。
對了，我不應該提到有視覺障礙的人， 約 9% 的男性都有某種顏色視覺障礙！加上大約 1% 的女性可能不容易區分紅色和綠色，或是黃色和藍色。 下次設計表單驗證時別忘了這一點。
動作失能呢？
是、動作障礙或精細動作障礙者服務。這個群體的範圍不限於不想用滑鼠的人，因為他們可能使用 RSI 或某種東西，但覺得非常痛苦，而對身體某些部位可能感到癱瘓且行動範圍有限的人。
視障人士可透過鍵盤、切換裝置、語音控製或眼部追蹤裝置與電腦互動。
與視力障礙類似，行動能力也可能是暫時性或情境問題：也許您的滑鼠手掌損壞的手腕。也許是觸控板在筆電上損壞，或是你只是在走動的火車上騎單車。有時使用者的行動不便可能會受到限制，而為了確保使用者行動能力更佳，我們能為這些人提供更優質的體驗，無論是永久不便的人士，還是發現無法使用指標式 UI 的使用者，都能享有更優質的體驗。
好的，我們來談談聽障人士。
這類群體包括非常失聰或聽障的人士。而且 我們的聽力會因為年齡不佳許多人會使用助聽器等常用用途來協助我們
針對聽障使用者，我們需要確保沒有依賴音效，因此務必使用影片字幕和轉錄稿等用途，以及提供替代方法 (如果介面中有音效)。
正如我們所見，視力障礙和行動障礙者一樣，我們非常容易想到以下情況：耳朵可以正常運作的人，也能受惠於這些住宿服務。許多朋友表示，如果影片有字幕和轉錄稿 即使沒有帶耳機，他們仍然可以觀看影片
好的，可以請您簡單介紹一下認知障礙嗎？
認知狀況有很多種，例如「ADD」、「Dyslexia」和「Autism」，可能是使用者想要或需要以不同方式存取項目。這些群組的需求非常多樣化，但我們一定會發現與其他領域重疊，例如使用縮放功能來簡化閱讀或專注力。此外，這些使用者可能會覺得，設計極少的效果最好，因為這樣可以盡量減少分心和認知操作。
我認為所有人都可能產生認知超載的壓力，因此顯然，如果能打造出適合認知障礙者的使用體驗，我們一定會致力打造令人愉悅的使用體驗。
那麼，你會如何總結你對無障礙功能的看法？
檢視人們可能擁有的多種身心障礙和建構障礙時，您會發現，設計和打造產品時只適合具有完美視覺、聽覺、精細動作和辨識能力的使用者，使用起來已經顯得非常小。這種做法幾乎可以自我反思，因為我們致力為所有人打造更令人壓力、較不易使用的使用體驗，也有些使用者打造的使用體驗實際上完全排除。
在這次訪談中，Victor 發現了一系列的失能問題，並分為四種廣泛類別：視覺、汽車、聽覺和認知。他也指出每種視障類型可能都是「身心障礙」、「臨時」或「永久」。
以下列舉一些存取障礙的應用實例，並說明這些行為在不同類別和類型中的位置。請注意，部分失能可分為多種類別或類型。
| 情境 | 臨時 | 永久 | |
|---|---|---|---|
| 影像 | 腦力激盪 | 失明 | |
| 馬達 | 拿著寶寶 | 碎臂，RSI* | 回合* |
| 聽力 | 吵雜的辦公室 | ||
| 認知 | 腦力激盪 |
重複的 Strain 傷害，例如：鐘乳石隧道症候群、網球肘、觸發手指
後續步驟
我們剛才已經探討了很多重點！您已讀完
- 無障礙設計和其重要性
- WCAG 和 WebAIM 無障礙功能檢查清單
- 有哪些不同的身心障礙
在指南其他部分中，我們將深入探討建立無障礙網站的實際層面。這項研究的任務主要是以下三個領域：
焦點：我們會說明如何建構可搭配鍵盤 (而非滑鼠) 操作的內容。當然，這對於行動不便的使用者而言十分重要，但這也能確保 UI 對所有使用者都能呈現良好狀態。
語意：我們會確保我們以各種輔助技術，能夠有效表達使用者介面。
樣式：我們會考慮視覺設計和一些技巧，盡可能讓介面的視覺元素變得具有彈性和可用性。
這些學科都能填滿整個課程，因此不會探討建立無障礙網站的所有層面。不過，我們將提供充足的資訊來協助您踏出第一步，也會引導您找到相關做法，讓您進一步瞭解各個主題。