# 無障礙2.1 資料整理
###### tags: `切切切`

<style>
.ui-infobar{
max-width:80%;
}
.markdown-body{
max-width:80%;
}
</style>

### Accessibility Tree

* 螢幕閱讀器會依照 Accessibility Tree 的順序將內容提供給使用者(講義1 p.37)

Accessibility Tree 檢查方式

### 段落、內容

* `<em>`和`<strong>`有強調重要的語意，避免使用`<i>`斜體和`<b>`加粗
* 用 em、rem 就能簡單達成字體大小的倍數，以1em來看
* 行高至少為字體大小的1.5倍;
* 段落間距至少是字體大小的2倍;
* 字元間距至少為字體大小的0.12倍;中文字元0.14倍。
* 字間距至少為字體大小的0.16倍

---

### ICON FONT

* 裝飾性的 icon font 不需要替代文字，可加上 <font color="#ff0000">aria-hidden=”true”</font> 讓螢幕閱讀器略過；或是使用 <font color="#ff0000">aria-label="瀏覽次數"</font> 說明 [［範例 🌐］](https://codepen.io/judyshyu/pen/OJZRVrE) (講義1 p.53)

<p><i class="fa fa-eye" aria-hidden="true"></i> <span class="sr-only">瀏覽次數</span>888</p>

<p><i class="fa fa-eye" aria-label="瀏覽次數"></i> 888</p>

---
### 圖表

* 圖片＋文字排版
註：圖片alt和figcaption內的文字不要重複

---

### 表格

* 語義化表格會使用到的 HTML tag:
* `<table>`
* `<caption>`
* `<tbody>`、`<thead>`、`<tfoot> `
* `<tr>`
* `<th>`
* `<td>`

* 不要主動拿 `<table>` 來排版，若不得已需要使用時，在 `<table>` 加上 <font color="#ff0000">role="presentation"</font> ，表明這是裝飾性的內容，不需要被讀出
* 無障礙表格必須帶有標題 `<caption>`
* `<caption>` 必須放在 `<table>` 內的第一個元件，不能是最後一個
* 視覺上可以藉由 CSS 來把標題的位置移到表格下方
* 若表格內容複雜，可以補充摘要(summary)來加強說明表格內容，但**內容不要與標題重複**
* 如果簡單的資料表格不一定要 caption或summary，只要標題對應好內容就行 (有才需要檢測是否符合規範)
* 摘要的寫法有三種 [［範例 🌐］](https://codepen.io/judyshyu/pen/vYjXEQN?editors=1000)：
* 在 `<caption>` 裡塞一個子元素( `<span>` ...等)來放摘要文字
* 在 `<table>`鄰近用別的元素撰寫摘要 (要帶 id)，並在 `<table>`上加入 <font color="#ff0000">aria-describedby="{id}"</font> 來關聯兩者
* 把 `<table>` 包在 `<figure>` 裡，利用 `<figcaption>` 來撰寫摘要

* 加入屬性，增強 `<th>`、`<td>` 之間的關聯 [ [範例]](https://codepen.io/judyshyu/pen/wvjWyrX?editors=1100)
* 只能用在 `<th>` ，用來定義與其相關的資料內容的方向性
* scope 可以有的值有:
* row:表示同一個橫向 row 的 td 與其相關
* col:表示同一個直排 column 的 td 與其相關
* rowgroup:表示多個 row 的 td 與其相關，通常會搭配排版使用的 rowspan 屬性使用
* colgroup:表示多個 column 的 td 與其相關，通常會搭配排版使用的 colspan 屬性
使用

---

### 連結、錨點
* `<a>` 在互動後:
* 會將使用者引導至其他區塊(即 anchor ，前往錨點的行為)
* 或引導至其他頁面(即 link ，前往連結的行為)
* 即使視覺上元件的外觀長得像按鈕，只要操作行為是導引使用者到另一個頁面， 那就應該要使用`<a>` 來撰寫
* 正確區辨兩者能幫助使用者預期互動後會有什麼結果。

### 按鈕

* 在`<button>`互動後，停留在原本的頁面位置，畫面產生變化(彈出式視窗、特效動畫...)>互動後，停留在原本的頁面位置，畫面產生變化(彈出式視窗、特效動畫...)
* 表單以外的`<button>`，記得加上 <font color="#ff0000">`type="button"`</font>，不然預設會觸發 submit
* 不建議使用 `<div>`、`<span>` 來模擬按鈕，要額外:
* 補上 role=”button” 讓使用者知道這是按鈕
* 補上 tabindex="0" 讓鍵盤能 focus(disabled 時還要移掉)
* 補上 CSS 的 cursor: pointer 讓滑鼠使用者能得到可點擊的提示
* 補上 CSS 的` [disabled]` 狀態樣式
* 撰寫 javascript 讓 Enter 或 Space 鍵能觸發
* 假如要用 `<a>` 來模擬按鈕，補上<font color="#ff0000">role="button"</font>來釐清元件的功能，<font color="#ff0000">且不要加href，避免造成閱讀器混淆 </font>
* 在看更多的連結上加上<font color="#ff0000">aria-label="看更多xxx的文章"</font><br/>因為螢幕閱讀器使用者想直接跳到某連結，卻只讀到「看更多」，不知道具體會連到哪篇文章、哪個頁面

___

### WAI-ARIA

* 增強網頁的可訪問性:
* 補充、加強 HTML 的語義
* 例如:頁籤元件使用` role=”tablist” `、 `role=”tab” `、 `role=”tabpanel”` 來呈 現 HTML 缺少的含意
* 例如:<font color="#ff0000">`<button aria-label="關閉">X</button>`</font>
* 例如:頁面中有多個 `<nav> `時，用不同的 aria-label 區分其位置或功能
* 針對動態的網頁內容，補充元件當前的狀態、提示互動後可能會產生的結果
* 例如:暫停按鈕被按下前後的狀態:
* <font color="#ff0000">`<button aria-pressed="false">暫停</button>` </font>
* <font color="#ff0000">`<button aria-pressed="true">暫停</button>`</font>

* 沒有寫好的 ARIA 屬性反而會對螢幕閱讀器使用者造成誤導

<ul role="navigation">
<!-- 因為 role 的設定，瀏覽器會將上面這個 <ul> 辨識為 navigation -->
    <li><a href="url1">nav link 1</a></li>
    <li><a href="url2">nav link 2</a></li>
<!-- 由於 <li> 必須放在 list 元件(<ul> 或 <ol>)內，這裡就會報錯 -->
</ul>

___

### aria-label

* aria label <font color="#ff0000">會為當前元素增加文字說明</font>
* 使用時機
* 頁面中有多個相同類型的元素，用 aria-label 來區分:
* 例如: header 裡有 nav、 footer 裡也有 nav
* 元件沒有足夠的文字讓使用者理解其功能:
* 例如: <font color="#ff0000"><button aria-label="關閉">X</button></font>

[[範例]](https://codepen.io/judyshyu/pen/wvjzGKr)

___

### aria-labelledby
* 與 aria-label 剛好反過來，用來表示當前物件的標籤是誰
* 注意如果同時使用 aria-label，<font color="#009ee7">aria-labelledby 的權重較高</font>

<button aria-label="關閉" aria-labelledby="closeDsc">X</button>
<span id="closeDsc">關閉視窗將不會保留目前的編輯內容</span>

* 值是一個或多個 id，用空白隔開
* 與 aria-describedby 的差別:
* aria-labelledby:提供簡要的標籤敘述
* aria-describedby:提供詳細的說明資訊

___
### 隱藏元件
* HTML 和 CSS 所使用的隱藏方法，有些不只影響畫面視覺，也會影響 Accessibility Tree!
* 幾種可能情形[［範例］](https://codepen.io/judyshyu/pen/QWrKGwQ?editors=1100)：
* #### 對所有人都隱藏
* 互動後才需要顯示的內容
* 例如:尚未顯示的 modal、尚未點開的 tab 內容...
* 作法：<br/>HTML 元素加上 hidden 屬性(不佔位)<br/>CSS 加上 display: none;(不佔位)<br/>CSS 加上 visibility: hidden;(佔位)
* #### 針對螢幕閱讀器隱藏，視覺會看到
* 可以精簡 Accessibility Tree ，提升使用體驗
* 例如:裝飾性的內容
* 做法:<br/>加上 aria-hidden="true"**(不要加在可 focus 的元件)**<br/>img 的 alt="" 為空
* #### 針對視覺隱藏，螢幕閱讀器會讀到
* 提供給螢幕閱讀器使用者的替代文字、補充資訊
* 例如:網頁最上方的無障礙導航區塊
* 作法：

新寫法

        {clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;}

原來的寫法

        .sr-only{
            position:absolute;
            left:-10000px;
            top:auto;
            width: 1px;
            height: 1px;
            overflow:hidden;
        }

---
### :focus vs :focus-visible
* focus -- 聚焦元件時會被觸發(包含滑鼠、觸控、鍵盤)
* focus-visible -- 只會用鍵盤聚焦元件時會被觸發

/* 不要這樣寫 */
:focus{
    outline:none; 
}

/* 要這樣寫 */
利用 :focus-visible 來保留鍵盤聚焦時的 focus 樣式

排除focus-visible
:focus:not(:focus-visible){ 
    outline:none;
}

---
## 無障礙網頁實務開發課程
### 頁籤範例

#### 直向(像手風琴)
* <font color="#009ee7">role = "tab"</font> 頁籤(索引標籤)
* <font color="#009ee7">aria-expanded = "true"</font>
展開(true) / 收合(false) (用在鍵盤可駐點元素)
* <font color="#009ee7">aria-controls = "id"</font>
進階控制區塊的 id，例如展開後要顯示的區塊，或者下拉方塊彈出的選單等，讓鍵盤焦點聚 焦，相容舊版 aria 規範

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div class="accordion-header">
            <button role="tab" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">最新消息</button>
        </div>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <div>
                    <p><a href="#">消息一</a><br><a href="#">消息二</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <button role="tab" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">最新公告</button>
        </div>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <div>
                    <p><a href="#">公告一</a><br><a href="#">公告二</a></p>
                </div>
            </div>
        </div>
    </div> 
</div>

#### 橫向
* <font color="#009ee7">role = "tablist"</font>
頁籤清單 (搭配 role="tabpanel")
* <font color="#009ee7">aria-controls = "id"</font>
進階控制區塊的 id，例如展開後要顯示的區塊，或者下拉方塊彈出的選單等，讓鍵盤焦點聚 焦，相容舊版 aria 規範
* <font color="#009ee7">aria-selected = "true"</font>
選取(true) / 未選取(false) (只能用在 role="tab")
* <font color="#009ee7">aria-labelledby = "id"</font>
朗讀對應標題標籤 (用在鍵盤可駐點元素或區塊內有可駐點元素)
* <font color="#009ee7">role = "tabpanel"</font>
內容頁 (搭配 role="tablist")

<div class="container-xl p-3">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="news-tab" data-bs-toggle="tab" href="#news" role="tab" aria-controls="news" aria-selected="true">最新消息</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="bbs-tab" data-bs-toggle="tab" href="#bbs" role="tab" aria-controls="bbs" aria-selected="false">最新公告</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="mag-tab" data-bs-toggle="tab" href="#mag" role="tab" aria-controls="mag" aria-selected="false">最新刊物</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
            <p><a href="#">消息1</a></p>
            <p><a href="#">消息2</a></p>
            <p><a href="#">消息3</a></p>
        </div>
        <div class="tab-pane fade" id="bbs" role="tabpanel" aria-labelledby="bbs-tab">
            <p><a href="#">公告1</a></p>
            <p><a href="#">公告2</a></p>
            <p><a href="#">公告3</a></p>
        </div>
        <div class="tab-pane fade" id="mag" role="tabpanel" aria-labelledby="mag-tab">
            <p><a href="#">刊物1</a></p>
            <p><a href="#">刊物2</a></p>
        </div>
    </div>
</div>

---
### 編輯區

#### input

* <font color="#ff0000">當有些視覺設計時不能容納標籤時，我們可以使用title屬性來標籤表單控制元件</font>(表單控制元件表示在表單中出現的控制元件如文字欄位、核取方塊或是選項按鈕等)，當游標移至方框中時會出現文字訊息的提示，使我們不會困惑此欄位方框需填入什麼訊息。例如，下方title屬性設為“區域號碼＂時，游標移至此欄位時可看到區域號碼的提示訊息，代表此欄位需填入區域號碼，以此類推。

#### 核取方塊
分群
<font color="#009ee7">`<fieldset>`需緊接著`<legend>`，不能有其他tag</legend>，</font>會失去群組的效果

<fieldset>
    <legend>你喜歡哪些水果</legend>
    <label class="pe-3"><input class="me-1" type="checkbox" name="fruit[]" value="bala">芭樂</label>
    <label class="pe-3"><input class="me-1" type="checkbox" name="fruit[]" value="banana">香蕉</label>
    <label class="pe-3"><input class="me-1" type="checkbox" name="fruit[]" value="liuding">柳丁</label>
</fieldset>

---
### 必填範例

* <font color="#009ee7">aria-required = "true"</font> 讓導讀軟體朗讀「必填」相關提示

___

### 圖片說明範例

* <font color="#009ee7">aria-details = "id"</font> 讓元素關聯到詳細資訊區塊
* 在HTML或XHTML中，若需使圖片加上有意義、可代替圖片在文件中的功能及內容的替代文字，需遵循alt屬性的用法。使用 <font color="#009ee7">aria-labelledby</font> 屬性提供圖片的替代文字說明。

<div>
    <img class="w-100" src="../images/link02.jpg" alt="花蓮崇德海邊的風景" aria-details="det">
    <details id="det">
        <summary>風景說明</summary>
        <p>這是很多年前花蓮崇德的海邊，</p>
        <p>從火車站下車就可以走到海邊，</p>
        <p>繞過火車站的小路就是海邊，沒想到人造的車站離自然的海邊竟是如此的近。</p>
    </details>
</div>