<style>
.blue {
color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜xxx]

# 🚩網頁無障礙檢測方式
## 🔰Accessibility Tree
報讀軟體會依照 Accessibility Tree 的順序將內容提供給使用者
###### 🔺圖片來源：https://web.dev/the-accessibility-tree/

## 🔰瀏覽器開發者工具
* Chrome DevTools
* Firefox 開發者工具 > 輔助功能
* Edge DevTools
* 與 Chrome 較類似
### 📍Chrome 開發者工具

### 📍Firefox 開發者工具

### 📍Firefox 開啟「模擬紅色色盲」功能

### 📍Firefox 開啟「顯示 Tab 鍵跳轉順序」功能

## 🔰自動化檢測工具
### 📍[axe DevTools](https://www.deque.com/axe/devtools/)
🔺Chrome 擴充功能，採 WCAG 標準

### 📍[WAVE](https://wave.webaim.org/extension/)
🔺Chrome、firefox、Edge 擴充功能，採 WCAG 標準

## 🔰其他更具針對性的測試工具
### 📍標題層級測試
[HeadingsMap](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi)
(https://hackmd.io/_uploads/SycuS00H6.jpg)
🔺Chrome 擴充功能，列出當前頁面全部標題

### 📍顏色對比度計算工具
#### 🔗[CCA](https://www.tpgi.com/color-contrast-checker/)
🔺有視窗置頂功能，以及快捷鍵能迅速吸色

#### 🔗[WCAG Color contrast checker](https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf)
🔺Chrome 擴充功能

瀏覽器開發工具的滴管

### 📍圖片替代文字測試
#### 🔗[Image ALT](https://chrome.google.com/webstore/detail/image-alt/boapfjenhbedppddepigmcmeogjlbfjg/related)
🔺Chrome 擴充功能，會標示網頁內全部圖片（包含 CSS 背景圖片），可以自行勾選想要檢查的項目

#### 🔗Alt Text Tester
🔺Chrome 擴充功能，懸停在圖片上即可檢視該圖片 alt；alt 為空時，會顯示「Alt Text Missing」

## 🔰人工檢測工具
* 人工檢測一般會使用 NVDA 進行
* 其他常見的螢幕報讀軟體：
* Windows Narrator
* VoiceOver (macOS / iOS)
* JAWS（付費）

### 📍 NVDA 語音報讀軟體
🔗 https://www.nvaccess.org/download/

* NVDA（NonVisual Desktop Access）是一款免費開源的報讀軟體，支援中文。
* 國內視障者主要使用的報讀軟體。
* 持續更新中，每年會發佈數個新版本。
* 除提供安裝版，也有提供可攜式（Portable）版本。

### 📍 檢視報讀 選項
測試無障礙功能時，開發者可以開啟 NVDA 顯示報讀文字的選項，讓測試更快速。
* 點擊 NVDA 圖示 > 工具 > 語音檢視器（Speech viewer）
* 會顯示語音朗讀的文字內容，讓我們直接用可視化的方式閱讀 NVDA 報讀內容
* 勾選「啟動時顯示語音檢視器」，後續即可不用重複開啟

### 📍 NVDA 鍵
* 「NVDA 鍵」搭配其他案件可以完成各種 NVDA 相關指令。
* 預設會將 Caps Lock 設為「NVDA 鍵」
* 原本切換大小寫的功能改為快按兩次 Caps Lock
* 另外也可以使用 Insert 鍵、數字鍵盤 0 作為「NVDA 鍵」

### 📍 基本快捷鍵
| 名稱 | 桌電快速鍵 | 說明 |
| ------ | ----------- | ----------- |
| 停止語音 | Ctrl | 立即停止朗讀。 |
| 暫停語音 | Shift | 立即暫停語音，再按一次會從中斷的地方繼續朗讀 (若使用的合成器有支援)。 |
| NVDA 功能表 | NVDA+n | 開啟 NVDA 功能表以選擇偏好設定、工具及說明等。 |
| 切換語音模式 | NVDA+s | 切換語音模式包含語音、嗶嗶聲、關。 |
| 切換輸入說明模式 | NVDA+1 | 在這個模式下按下任何按鍵將會讀出該按鍵、以及關聯的 NVDA 指令說明。 |
| 結束 NVDA | NVDA+q | 結束 NVDA。 |

### 📍 瀏覽模式快速鍵
| 名稱 | 桌電快速鍵 | 說明 |
| ------ | ----------- | ----------- |
| 切換瀏覽/焦點模式 | NVDA+空白鍵 | 在焦點模式與瀏覽模式之間切換 |
| 離開焦點模式 | Esc | 如果先前自動切換到焦點模式則切換回瀏覽模式 |

※ 如果操作時發現無法輸入文字、按上下按鈕或字母都無法移動，可以按「NVDA + 空白鍵」切換模式。

### 📍 用 NVDA 瀏覽網頁 - 基本瀏覽
* 上下方向鍵：一次讀取一行（與視覺看到的一行可能不同）
* 左右方向鍵：一次讀取一個字元
* PageUp、PageDown：移動較長的距離
* Tab：聚焦在網頁中的不同元件上

### 📍 用 NVDA 瀏覽網頁 - 單鍵導航
按一下會移到下一個同類型元件、加 Shift 則會移到前一個同類型元件。
#### 💡結構相關：
* H：標題 (Heading)
* 主鍵盤上的 1 到 6：H1 ~ H6
* D：地標 (landmark)
* G：圖片 (graphic)
* L：清單 (list)
* I：清單項目 (list item)
* T：表格 (table)

#### 💡互動相關：
* B：按鈕 (button)
* K：連結 (link)
* F：表單欄位 (form field)
* U：未到訪過的連結 (unvisited link)
* V：已到訪過的連結 (visited link)
* E：編輯區 (edit field)
* X：核取方塊 (checkbox)
* C：下拉式方塊 (combo box)
* R：選擇鈕 (radio button)

### 📍 用 NVDA 瀏覽網頁 - 其他
* NVDA 鍵 + F7：
* 顯示網頁中連結、標題、表單欄位、按鈕、地標等清單
* 其他更多快捷鍵：
* 點擊 NVDA 圖示 > 說明 > 指令快速參考
* 實際操作：
* 使用單鍵導航瀏覽網頁（H：標題、K：連結、G：圖片）
* 🔗[國立故宮博物院 > 當期展覽](https://www.npm.gov.tw/Exhibition-Current.aspx?sno=03000060&l=1)