{%hackmd @s6102161021/greenTheme %}

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

- [附件-無障礙網頁設計切版V1 (p.15 ~ p.33)](https://drive.google.com/file/d/11BKoh-cL25XE0Y6vl4SX8u6Wcc4W_iR8/view)
</div>

## 章節1 - 規劃 + 設計階段決定的內容
- 網站整體架構
- 文字樣式及尺寸的規範
- 定義標題結構
- 網站使用顏色的規範
- 制定元件模版,規劃不同狀態下的樣式
- 連結的行為 <b>:link、:visit、:hover、:focus</b> 等狀態
- 表單元件的提示 <b>警告、提示、步驟</b> 等
- 後台上稿的圖片規格
- 圖片的替代文字、影像的替代方式
<i>[講義p.33]</i>

## 章節2 - 無障礙設計根基
### 流程邏輯

### 頁面結構一致性

### 元件一致性

## 章節3 - 導盲磚的設置
跳過導航列對於屏幕閱讀器和鍵盤用戶直接到主要內容非常有用，可以分為兩種做法：
1. 設置跳到主要內容按鈕 Skip to content
2. 設置無障礙定位點( 導盲磚::: )

### Skip to content
操作方式為：<b>一進入網站按鍵盤Tab鍵，第一下或第二下時會出現隱藏的按鈕引並導鍵盤使用者直接進入主要內容區</b>。最好的狀況是敲擊Tab第一下就能focus的DOM。

由於網站美觀因素，設計師會將此按鈕在畫面隱藏


<div class="aStyle">

[範例 - BBC](https://www.bbc.com/)
</div>


<div class="aStyle">

[範例 - WebAIM](https://webaim.org/)
</div>

### 無障礙定位點(導盲磚 ::: )
無障礙網站利用三個冒號(:::)來代表區塊定位點，搭配accesskey，引導鍵盤使用者快速移置欲前往的區塊，操作方式為：<b>按住alt鍵+ U(上方) / C(中間) / Z(下方) / L(左方) / R(右方) 來移動</b>

<div class="aStyle">

備註:上述的操作方式為[chrome瀏覽器](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey)，且accesskey搭配的快捷鍵並非固定，所以通常會有一頁[網站導覽](https://www.railway.gov.tw/tra-tip-web/tip/tip00F/tipF15/view)頁面去定義快捷鍵設定
</div>

<div class="aStyle">

[資料 - 什麼是定位點](https://accessibility.moda.gov.tw/Questions/Detail/82?Category=33)
[資料 - 無障礙定位點（導盲磚 :::）](https://ithelp.ithome.com.tw/articles/10226489)
[資料 - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
[範例: a11y - Skip Navigation Links](https://codepen.io/SGVicky/pen/QWJZqXR)
</div>

## 章節4 - 文字樣式
- 內文的預設文字大小 (font-size) 通常是 16px
- 行高 (line-height) 至少為字體大小的1.5倍
- 段落間距 (margin/padding) 至少是字體大小的2倍
- 字元間距 (letter-spacing) 至少為字體大小的0.12倍;中文字元0.14倍
- 字間距 (word-spacing) 至少為字體大小的0.16倍
- 可以根據實際使用的字體及語言加大
- 使用相對單位，如 %、em、rem
<i>[講義p.16]</i>

<div class="aStyle">

[範例: a11y - Font Style](https://codepen.io/SGVicky/pen/bGQqgoo)
</div>

## 章節5 - 可點擊元件的尺寸
- 可點擊元件寬高不小於 44px
- 常見點擊範圍不足情形:
1. 只有 icon 的按鈕(例如社群媒體按鈕)
2. 麵包屑文字(通常行高不足)
3. Footer 內的連結
- 按鈕和連結要有指示性的文字 (例：點我登記抽獎、看更多國際新聞)

<i>[講義p.18 ~ p.20]</i>
<div class="aStyle">

[範例: a11y - Click Element](https://codepen.io/SGVicky/pen/YzRZJGO)
</div>

## 章節6 - 顏色及對比度
- AA 級:
- 小尺寸文字 4.5:1
- 大尺寸文字 3:1
- AAA 級:
- 小尺寸文字 7:1
- 大尺寸文字 4.5:1
- 對比度的小數點不能四捨五入，必須大於等於規範的對比度才算符合
- 大尺寸文字: [最少18pt(24px)或粗體的14pt(19px)](https://codepen.io/SGVicky/pen/XWygKxP)
- 灰階文字與純白色背景對比度比較表

<i>[講義p.21 ~ p.24]</i>

## 章節7 - 顏色+文字/Icon傳達狀態

icon 被加上alt文字可以更好的傳達訊息狀態
[<i>https://www.deque.com/blog/auditing-design-systems-for-accessibility/</i>](https://www.deque.com/blog/auditing-design-systems-for-accessibility/)
<i>[講義p.25 ~ p.26]</i>

## 章節8 - 圖片的使用
- 定義好圖片比例，方便後續程式實作，避免上稿後圖片被裁切、變形
- 使用圖片來呈現特殊字體
[<i>https://topic.cw.com.tw/event/2019forest</i>](https://topic.cw.com.tw/event/2019forest)
- 圖片中的文字
- 為圖片撰寫替代文字(alt)
- 不要只以圖片作為連結，補上[文字資訊](https://www.moc.gov.tw/)
<i>[講義p.27 ~ p.29]</i>

<div class="aStyle">

[範例: a11y - img](https://codepen.io/SGVicky/pen/zYMzKxb)
</div>

## 章節9 - 持續超過5秒的動態內容
- 除非這個動態是頁面的必要元素(比如說點擊標靶的遊戲)，否則都要可以由使用者操作暫停
- 需要設計暫停及重新播放按鈕
- 或是利用原生的 video control 結構讓使用者能自行操作
- 常見的持續動態內容:
- 會自動播放的影片
- 動態 GIF 圖片
- CSS 動畫
- 文字捲動
- 輪播 Carousel
<i>[講義p.30]</i>

## 章節10 - 自動播放超過3秒的音訊
- 有任何音訊會自動播放達 3 秒以上,必須能被使用者暫停、中止或能夠調整音量
- 常見的處理方式: 提供靜音 / 取消靜音按鈕
<i>[講義p.31]</i>

## 章節11 - 會閃爍的內容
- 禁止會一直閃爍的畫面效果,因為快速閃動的畫面有可能引發癲癇
- 不可以有任何元件在一秒內會閃爍三次以上
- 不能藉由提供暫停或關閉的選項來符合規範
- 處理方式:
- 降低閃爍的速度
- 降低閃爍的範圍或對比度來避免達到閾值
<i>[講義p.32]</i>