# 網站無障礙規範(110.07)
###### tags: `切切切`

:link: [網站無障礙規範連結](https://accessibility.moda.gov.tw/Accessible/Guide/68)

## 檢測碼格式
檢測碼格式為3碼文字與7碼數值，如：<font color="#009ee7">XX</font> <font color="#ff0000">3</font> <font color="#68891a">1410</font> <font color="#ff9600">99</font> C，此10碼字符

* <font color="#009ee7">XX</font>： 起始2碼文字代表為<font color="#EE428B">網頁科技的編碼簡稱</font>
* <font color="#ff0000">3</font>： 第1位數碼代表為檢測等級，本數碼代表檢測碼所屬的<font color="#EE428B">檢測等級</font>。
* <font color="#68891a">1410</font> ：第2、3、4、5位數碼代表為對應<font color="#EE428B">成功準則</font>完整編碼
* <font color="#ff9600">99</font> ：第6、7位數碼為對應成功準則內的流水號，本數碼為<font color="#EE428B">本檢測碼（稽核評量碼）</font>在對應成功準則內的流水編號。
* C：第3位文字碼用來指示為檢測碼類型，其<font color="#EE428B">值為C，代表可用軟體檢測之檢測碼</font>；其<font color="#EE428B">值為E，代表可用人工檢測之稽核評量碼</font>。

## 檢測碼與稽核評量碼

### 1).表單相關
>1.3.1 HM1130103C 表單選擇＜select＞組件則需以選項分群＜optgroup＞組件來將選項＜option＞組件加以分群[color=#009ee7]

* https://accessibility.moda.gov.tw/Download/Detail/1510?Category=63

>1.3.1 HM1130103C 表單控制元件組件需以欄位組＜fieldset＞組件來分群，並以說明＜legend＞組件來提供標題[color=#009ee7]

* https://accessibility.moda.gov.tw/Download/Detail/1509?Category=63
>1.3.1 HM1130113E 無法使用標籤組件的情況下，用標題屬性來指明表單控制元件[color=#009ee7]
* https://accessibility.moda.gov.tw/Download/Detail/1577?Category=64
>1.3.1 HM1130111E 將表單控制元件及表單內的選項予以適當地分群並提供相關的描述[color=#009ee7]
* https://accessibility.moda.gov.tw/Download/Detail/1575?Category=64
---

## 十三指引
:::info
這是新增項目 :mega:
:::
>成功準則1.3.4：螢幕方向 (檢測等級AA)[color=#009ee7]:mega:

除非使用特定的顯示方向有其必要性，螢幕內容顯示和操作不應限制為單一顯示方向，例如直向或橫向。

---

>成功準則1.4.3：對比值(最小) (檢測等級AA)[color=#009ee7]

除非是下列各款中的例外情形，否則文字及影像文字的視覺呈現，至少要有<font color="#EE428B">4.5:1</font>的對比值：
* 大尺寸的文字及大尺寸的影像文字至少要有<font color="#EE428B">3:1</font> 的對比值。
* 閒置中的使用介面元件上的、純裝飾用的、任何人都看不到的文字或影像文字，或者只是另一張圖片的局部且該圖片顯然還有其他視覺內容，都毋須要求對比值。
* 標識或商標名稱上的字樣沒有最小對比值的要求。

[如何判斷大字？](https://accessibility.moda.gov.tw/Questions/Detail/4285?Category=19)

#### 灰階文字與純白色背景對比度比較表

#### 設計友善的對比度計算工具

遇到有對比度不足的情形，可以很快找到替代顏色 [連結](https://color.review/)

---

>成功準則1.4.4：調整文字尺寸 (檢測等級AA)[color=#009ee7]

除字幕及影像文字外，文字在沒有額外輔助科技的情況下，要能夠放大至<font color="#EE428B">百分之兩百</font>，而不會失去內容或功能性。

---

>成功準則1.4.6：對比值(增強) (檢測等級AAA)[color=#009ee7]

除非是下列各款中的例外情況，否則文字及影像文字的視覺呈現至少要有<font color="#EE428B">7:1</font>的對比值：

* 大尺寸的文字及大尺寸的影像文字至少要有<font color="#EE428B">4.5:1</font> 的對比值。
* 閒置中的使用介面元件上的、純裝飾用的、任何人都看不到的文字或影像文字，或者只是另1張圖片的局部且該圖片顯然還有其他視覺內容，都毋須要求對比值。
* 標識或商標名稱上的字樣沒有最小對比值的要求。

---
>成功準則1.4.8：視覺呈現 (檢測等級AAA)[color=#009ee7]

對於文字區塊的視覺呈現，提供機制來達成下列事項：

* 使用者可選擇前景及背景色彩。
* [寬度不可多於80個字元或字符(中日韓語系則是40)](https://accessibility.moda.gov.tw/Download/Detail/1531?Category=63)。
* 文字不可全齊(左右邊界均對齊)。
* <font color="#EE428B">段落內的行距至少要是1.5～2倍行高，而段落間距則至少要是1.5倍行距。</font>
* <font color="#EE428B">在沒有額外輔助科技的情況下，文字要能夠放大至百分之兩百，並且在全螢幕視窗中閱讀時，使用者毋須水平捲動視窗即可讀。</font>

---

>成功準則1.4.10：流動排版 (檢測等級AA)[color=#009ee7] :mega:

內容可以在不失去資訊或功能性且無需進行二維捲動下呈現，如下列：

* 內容垂直捲動的寬度相當於<font color="#EE428B">320個CSS像素</font>；
* 內容水平捲動的高度相當於<font color="#EE428B">256個CSS像素</font>。
需要利用二維配置來提供部份內容使用或有意義呈現者除外。

---

>成功準則1.4.11：非文字對比 (檢測等級AA)[color=#009ee7] :mega:

下列內容的<font color="#EE428B">視覺呈現與相鄰顏色的對比度至少為3:1</font>：

* 使用者介面元件：使用者介面元件和狀態識別所需的視覺資訊，除非是閒置元件或元件外觀由使用者代理確定且未經由網頁作者修改的情況；
* 圖形物件：理解內容所需要的圖形部分，除非是圖形的特定呈現對於資訊傳達為必要。

1. [GN2141100E 使用網頁作者設定的高可視焦點指示器](https://accessibility.moda.gov.tw/Download/Detail/1623?Category=64)(focus)
2. [1.4.11 GN2141101E 確保圖示的對比度為3：1](https://accessibility.moda.gov.tw/Download/Detail/1624?Category=64) (背景顏色是漸層或圖案，確認與前景色對比度最小的顏色)

---

>成功準則1.4.12：文字間距 (檢測等級AA)[color=#009ee7] :mega:

使用支援以下文字樣式屬性的標記語言實現的內容中，透過設置以下所有內容且在不更改其他樣式屬性下，不會喪失任何內容或功能性：

* 行高至少為字體大小的<font color="#EE428B">1.5倍</font>；
* 段落間距至少是字體大小的<font color="#EE428B">2倍</font>；
* 字元間距至少為字體大小的<font color="#EE428B">0.12倍</font>；中文字元<font color="#EE428B">0.14倍</font>。
* 字間距至少為字體大小的<font color="#EE428B">0.16倍</font>。

#### 文字樣式

---

>成功準則1.4.13：懸浮或焦點內容 (檢測等級AA)[color=#009ee7] :mega:

附加懸浮內容因指標移動或鍵盤焦點觸發而可視後隱藏時，下列為真：

* 可移除：提供一種機制移除附加懸浮內容，不用移動指標或鍵盤焦點，除非是附加懸浮內容傳達輸入錯誤或未隱藏或替換其他內容；
* 可移動：如果指標移動可觸發附加懸浮內容，則指標可以在附加懸浮內容上移動而不會使該內容消失；
* 持續性：附加懸浮內容應維持可見，直到指標移出或鍵盤焦點移除、使用者解除或資訊不再有效。

例如：[彈出式燈箱](https://accessibility.moda.gov.tw/Download/Detail/1634?Category=64) 內容須可移動、開啟、關閉。

---
>成功準則2.1.4：快捷鍵 (檢測等級A)[color=#009ee7] :mega:

如果在內容中執行僅使用字母(包括大寫和小寫字母)、標點、數字或符號字符的鍵盤快捷鍵，則至少應滿足下列條件之一：

* 關閉：可關閉快捷鍵的機制；
* 重新對應：可使用一個或多個非打印的鍵盤字元(例如Ctrl、Alt等)重新對應快捷鍵的機制；
* 僅在焦點上啟動：使用者介面元件的鍵盤快捷鍵只有在該元件具有焦點時才會啟動。

---
>成功準則2.2.6：逾時(等級AAA)[color=#009ee7]:mega:

警告使用者可能導致資料遺失的「使用者無活動狀態」的持續時間，除非在使用者不執行任何操作時，能將資料保存超過20小時

---

>成功準則2.5.5：目標尺寸 (檢測等級AAA)[color=#009ee7] :mega:

除以下條件外，<font color="#EE428B">指標輸入的目標尺寸至少為44乘44 CSS像素</font>：

* 等效：目標可透過同一網頁上等效的鏈結或控制元件獲得，該目標尺寸至少須為44乘44 CSS像素；
* 行內：指標操作目標位於句子或文字區塊內；
* 使用者代理控制：指標操作目標的外觀是由使用者代理決定而非由網頁作者修改；
* 必要性：指標操作目標特定的呈現方式對於資訊的傳遞有其必要性。

#### 可點擊元件的尺寸


---
## APP檢測基準項目
:link: [行動版說明連結](https://accessibility.moda.gov.tw/AppCases/AppDetectItems.aspx)

行動化應用軟體檢測指引項目主要參照「網站無障礙規範」與行動化裝置本身的特性資料呈現的輸出方式、輸入資料及整體設計。

### 55個檢核點依三特性與13張檢核

>TS3觸控目標尺寸[color=#009ee7]

* 在鏈結周圍提供間距，以確保所有可操作的控件之間的距離至少為<font color="#EE428B">7mm</font>。使用較大的控件，即<font color="#EE428B">9mm</font>，或增加內容周圍的間距以確保較大的觸摸區域
* 觸控目標尺寸至少 48dp x 48dp(9mm*9mm)

---
>TS4並行輸入機制[color=#009ee7]

左右滑動改變在輪播中的面板，<font color="#EE428B">提供單獨的按鈕控件標註”上一個”與”下一個”</font>，讓不用或不能使用滑動手勢的使用者(但使用單獨的輸入裝置如鍵盤)，也可利用此功能。

---

> FM1標記表單控件[color=#009ee7]

使用<font color="#EE428B">aria-required</font>屬性指出必填的表單欄位，以及可見的指示(如*號)，確保輔助技術使用者能獲得該欄位為必填的通知。如果沒有支援舊版瀏覽器的問題，應使用HTML5 required屬性取代。
<font color="#EE428B">aria-required="true"</font>指定一個表單輸入必須填寫才有效

[連結](https://accessibility.moda.gov.tw/Download/Detail/1465?Category=62)

---

>LK2合併重複的鏈結[color=#009ee7]

具有圖片和文字標籤的物件、元件和控件，僅宣告一次。
具有圖片和文字標籤的物件、元件和控件的分組方式，僅使它們宣告為一個組件。

---

>DC4頁面更新[color=#009ee7]

螢幕內容不會自動重整或改變，或者焦點在物件、元件或控件之間移動時，不會自動重整或改變。
不要使用setTimeout更新頁面的href屬性，也不要將meta標記的http-equiv屬性值設定為refresh。

[連結](https://accessibility.moda.gov.tw/Download/Detail/1477?Category=62)

---

>ST1單一頁面標題[color=#009ee7]
>
每個頁面/螢幕必須具有唯一的上下文相關標題：

對於HTML，螢幕報讀軟體會顯示並報讀唯一性的title元素。
對於Android和iOS，標題會顯示在螢幕頂部，並由螢幕報讀軟體報讀。

使用title元素提供每個HTML頁面個別的頁面標題。頁面標題通常應使用與頁面上主要層級標題(h1)的文字相同，但此將取決於應用程式與頁面本身的上下文脈絡，故此非強制性。