{%hackmd @s6102161021/greenTheme %}

<b>參考資料：</b>
<div class="info aStyle">

- [無障礙網路空間服務網](https://accessibility.moda.gov.tw/)
</div>

## 章節1 - 甚麼是無障礙網頁?
無障礙是盡可能令更多人，使用你網站的實做：一般來說，我們會認為這屬於身心障礙者的範疇，但它其實會涵蓋其他群體：像是使用行動設備、或者網速很慢的人。

<b>也可以把無障礙想成：所有人，不論他們的能力或環境如何，都要同等看待、並給予同等機會。我們也不能排除視障或手機用戶，使用我們的網站。儘管我們生而不同，但我們都是人，因此，我們都擁有相同的人權。</b>

### 無障礙設計優點
- 提昇無障礙的語意 HTML 能增進 SEO，令網站更容易被找到、也更易於銷售。
- 關注無障礙網頁會展現優良的倫理道德、以增進你的公共形象。
- 無障礙網頁的一些作法也能令網站易於給其他族群使用，像是手機用戶、低網速……等等。事實上，任何人都能從此類改進中獲益。

### 障礙者的類別
- 視覺障礙
- 聽覺障礙
- 行動障礙
- 認知障礙

<b>認知障礙可能是最廣泛出現的殘疾，廣義可涵蓋從精神疾病到學習困難，包含ADHD（注意缺陷多動障礙）、自閉症患者、思覺失調以及許多其他相關疾病。</b>這些與記憶、解決問題能力、理解能力與注意力等問題相關的疾病，都大大影響病患的日常生活。

這些疾病會影響病患使用網站，而最常見的問題就是他們會在理解如何完成網頁操作、記憶以往完成網頁操作的過程、以及經歷各種不同的操作流程與不一致的佈局/導覽列/其他頁面功能時，增加許許多多的挫敗感。

與其他網路無障礙問題不同，我們無法快速解決認知障礙引起的網路操作問題； 你唯一能做的就是設計網站時，盡可能符合邏輯性、一致性與可用性，例如：

- 頁面一致 - 導覽列、頁眉、頁腳和主要內容區塊在每一個頁面都位在相同的位置。
- 網站內工具設計精良，易於使用。
- 多個階段的流程（例如註冊），被細分有邏輯性的步驟，並提醒使用者如何進行流程，以及他需要多長的時間才能完成流程。
- 工作流程是合乎邏輯的、簡單的，並且盡可能減少需要與網站互動的流程 例如：註冊和登入網站常常就是很複雜且不必要的。
- 適量呈現頁面資訊，盡量讓頁面呈現的資訊不要過多或過密。
- 適當的用語，頁面呈現的用語須標準或通俗易懂，不要充滿不必要的行話或俚語。
- 內容的重點處適時以某些方式（例如：使用螢光色標示）突顯出來。
- 使用者操作錯誤的地方也需要標示出來，並且提供相關訊息或解決方法，幫助使用者解決錯誤。

### 製作無障礙網頁的基本認知
- 在專案初期就考量到無障礙網頁、還要測試得早而多。一如其他錯誤，無障礙網頁問題在越晚發現時，麻煩也越大。
- 謹記無障礙網頁，是對大家都有利的。例如說，精實的語意標記不只對螢幕閱讀有利，也利於快速載入與效能，從而對大家有利，尤其對行動設備、或是網速過慢的人。
- 再網站上標明支援無障礙網頁，並鼓勵身心障礙者參與。

### 110年身障者使用調查重點
目的：探討身心障礙者的網路使用情形，從中瞭解不同身心障礙者的網站使用需求，從實際應用層面深入了解網站無障礙設計的應用重點。

#### 調查結果
- 超過8成的身障者每日平均上網4-5小時以上
- 身障者常使用之上網設備，超過5成身障者使用桌上型電腦上網，超過6成使用智慧型手機(iOS)上網
- 身障者最常使用的瀏覽器是Google Chrome(70%以上)及Safari (30%以上)
- 身障者在社群網站之使用率超過9成，網路購物、網路申辦超過7成、網路金融服務也有超過5成的使用率
- 身障者使用社群網站網路服務的滿意度超過5成，網路購物、網路申辦則低於4成、網路金融服務低於3成
- 身障者一週使用手機APP頻率至少三次以上超過8成。使用網路購物服務的身障者，使用手機APP購物超過5成。
- 身障者使用網路最常遇到的問題:<b>『廣告或圖片輪播干擾』、『無法取得驗證碼』、『網頁內容或選項標示不清』、『無法了解圖片內容』、『操作步驟流程有時間限制』、『表單輸入難以操作』</b>等項目。

<p class="tooltips">*看原圖：右鍵/在新分頁中開啟圖片</p>

#### 受訪者期望
- 圖片驗證碼提供之語音播放替代方案，能清楚報讀英文字母大小寫及數字。
- 建議網站線上服務，提供聯繫客服諮詢的管道，協助使用者解決使用問題。
- 聽障者需要文字客服。並且線上服務需提供線上取消功能。
- 網站版本更新時，須注意無障礙設計是否也一併更新。

### 台灣現行規範
台灣參考W3C協會的WAI組織訂定的無障礙網頁內容標準相關規範，於2002年訂定我國的「無障礙網頁開發規範」做為具體的無障礙網路推廣目標與策略，並於2017年實施「網站無障礙規範2.0」版。

檢測分為三個等級，難度最高為AAA等級，並呈現三款不同標章:
<div class="aStyle">

[資料: 檢測等級](https://accessibility.moda.gov.tw/Accessible/Guide/68)
[資料: MDN 何謂無障礙網頁？](https://developer.mozilla.org/zh-TW/docs/Learn/Accessibility/What_is_accessibility)
[附件: 身心障礙者網站使用需求調查](https://drive.google.com/file/d/1umVuVxHDe9dxY5wzbyYfZkKbjT8lb9ET/view)
</div>

## 章節2 - 無障礙網頁使用
<div class="aStyle">

盲用電腦即為一般電腦，會安裝語音系統[NVDA螢幕閱讀器](https://www.nvaccess.org/download/)，搭配觸控顯示器，有點字出現，使用聽覺與觸覺來做輸入及上網。若無觸控顯示器則會以螢幕閱讀器搭配鍵盤來操作。

無障礙網站使用者期望重點優化方向：
- 圖片加上註解
- 標題能很快找得到重點
- 突然的彈跳視窗，會不曉得畫面上的變化
- 設計不清楚的選單按鈕
- 只能用電話連繫的訂購方式
- 影片沒有字幕

</div>

<div class="aStyle">

[網站無障礙推廣影片-體驗篇](https://www.youtube.com/watch?v=SBCRnUA3GcQ)
[網站無障礙推廣影片-使用者篇](https://www.youtube.com/watch?v=YOyQSvXInPw)
</div>

## 章節3 - <a id="principle">檢測原則</a>
- <b>可感知</b>–資訊及使用者介面元件應以使用者能察覺之方式呈現
- <b>可操作</b>–使用者介面元件及導覽功能應具可操作性
- <b>可理解</b>–資訊及使用者介面之操作應具可理解性
- <b>穩健性</b>–網頁內容應可供身心障礙者以輔助工具讀取，並具有相容性

<div class="aStyle">

[資料: 檢測原則](https://accessibility.moda.gov.tw/Accessible/Guide/68)
</div>

## 章節4 - <a id="guideline">十三指引</a>
為讓網頁開發者在開發上有明確的指引條文，以13指引來引導網頁開發者設計讓所有人都可以使用的無障礙網頁。

1. <b>替代文字</b>：為任何非文字的內容提供相等意義的替代文字，使這些內容能依人們的需，轉變成大字版、點字、語音、符號或簡化過的語言等不同型態
2. <b>時序媒體</b>：針對時序媒體提供替代內容
3. <b>可調適</b>：建立能以不同方式(例如簡化的版面)呈現，而仍不會喪失資訊或結構的內容
4. <b>可辨識</b>：讓使用者能更容易地看見及聽到內容、區分前景和背景
5. <b>鍵盤可操作</b>：讓所有的功能都能透過鍵盤使用
6. <b>充足時間</b>：提供使用者充分的時間來閱讀及使用內容
7. <b>預防痙攣和身體不適反應</b>：不要用任何已知會引發痙攣的方式來設計內容
8. <b>可導覽</b>：提供協助使用者導覽、尋找內容及判斷所在的方法
9. <b>輸入方式</b>：提供除鍵盤之外其他輸入方式，讓使用者更容易操作
10. <b>可讀性</b>：讓文字內容可讀並可理解
11. <b>可預期性</b>：讓網頁以可預期的方式來呈現及運作
12. <b>輸入協助</b>：幫助使用者避開及更正錯誤
13. <b>相容性</b>：針對目前及未來的使用者代理與輔助科技，最大化其相容性

<div class="aStyle">

[資料: 十三指引](https://accessibility.moda.gov.tw/Accessible/Guide/68)
</div>

## 章節5 - 無障礙網頁開發流程
### 網站無障礙設計程序
- <b>步驟1：網站規劃階段</b>
網站開發人員應該依照網站無障礙可及性設計的<a href="#principle" class="aStyle">4原則</a>來整理資訊和規劃網站。例如，在整理網站的多媒體資訊時，應該訂出良好的描述規則來設計各種多媒體資訊的替代文字說明；對於輸入項目多且操作功能複雜的網頁，應該考慮使用替代網頁；網頁各項操作不應限定只能以滑鼠操作，應該考慮鍵盤操作；網頁架構不宜太複雜，網頁的配置和結構也力求單純，以方便身心障礙者瀏覽。

- <b>步驟2：網站設計階段</b>
網站開發人員在設計網站時，應該依照網站無障礙<a href="#guideline" class="aStyle">13指引</a>的內容和精神來設計網頁使用的標籤和相關處理物件。例如，適當的使用網頁結構標籤和呈現表單，不應該貪一時的便利或美觀而混用不當的標籤。另外，網站開發人員在網頁編輯工具的選擇上，可儘量選擇具有網頁可及性功能的網頁編輯工具。在多媒體資訊和網頁文件的格式上，可以儘量選用具有可及性特性的檔案格式和技術。例如 W3C 訂定的SMIL多媒體語言和其他格式的多媒體語言比較起來就有較佳的可及性和開放性。另外，W3C 訂定的 SVG 可縮放向量圖語言和具有類似功能的 Flash 向量圖格式比起來，也有較佳的可及性和開放性。

- <b>步驟3：網站檢測階段</b>
網站完成後，網站開發人員可透過網站無障礙檢測工具來檢測網站的可及性設計。本規範訂定3檢測等級，每個檢測等級包含可由軟體自動檢測的檢測碼。網站開發人員可以先使用相關檢測工具做軟體檢測的作業，對於軟體檢查出來未通過的檢測碼，可參考標準檢測碼相關訊息和範例說明來做網頁規劃和設計的修改。<b>在開發過程中即可小步試錯，階段性的進行檢測，不一定要等到最後才做通盤檢測</b>

- <b>步驟4：自我評量階段</b>
網站通過軟體檢測之後，對於有些指引無法僅由軟體判別與檢測者，則須再由網站開發人員以人工方式進行檢核評量的作業。網站開發人員可依據稽核評量碼來進行自我評量，過程中發現未符合指引要求者，可參考稽核評量碼相關文件和範例說明來做網頁規劃和設計的修改。

- <b>步驟5：網站認證階段</b>
網站通過檢測與自我評量完成後，網站開發人員可以將評量結果交由認證機構來申請認證標章，並依據網站通過的檢測等級，在本規範相關的官方網站內下載各檢測等級所對應的網站無障礙認證標章，並參照其規定方式在網頁的適當位置放置認證標章和說明。讓網站使用者可以得知此網站通過的網站無障礙規範認證等級。

- <b>步驟6：網站稽核階段</b>
網站取得並放置認證標章和說明後，應該要接受定期與不定期的稽核。定期稽核可由認證機構來進行，確保網站與申請交付的評量結果一致；任何網站使用者使用網站內容時，發現網站與其所宣稱的評量結果與認證標章不符，可直接通知網站經營者限期改善，亦可向認證機構或主管機關提出申訴，再由主管機關責成認證機構稽核。網站未通過稽核，且未於限期內改善完成，則取消認證標章。

<div class="aStyle">

[資料: 網站無障礙設計準則與程序](https://accessibility.moda.gov.tw/Accessible/Guide/68)
</div>