---
# System prepended metadata

title: 無障礙2.1 資料整理
tags: [切切切]

---


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

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

### Accessibility Tree

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

     Accessibility Tree 檢查方式
     ![](https://i.imgur.com/dKDjJD4.png)
    

### 段落、內容


* `<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)



```htmlmixed!
<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>
```
---
### 圖表

* 圖片＋文字排版
![](https://i.imgur.com/08nNQGW.png)
註：圖片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 屬性反而會對螢幕閱讀器使用者造成誤導
```htmlmixed!
<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>
```htmlmixed!
<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="" 為空
    * #### 針對視覺隱藏，螢幕閱讀器會讀到
        * 提供給螢幕閱讀器使用者的替代文字、補充資訊
        * 例如:網頁最上方的無障礙導航區塊
        * 作法：
        
        新寫法
        ```css=
        {clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;}
        ```
        原來的寫法
        ```css=
        .sr-only{
            position:absolute;
            left:-10000px;
            top:auto;
            width: 1px;
            height: 1px;
            overflow:hidden;
        }
        ```

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

```css=
/* 不要這樣寫 */
: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 規範
```htmlmixed!
<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")

```htmlmixed!
<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屬性設為“區域號碼＂時，游標移至此欄位時可看到區域號碼的提示訊息，代表此欄位需填入區域號碼，以此類推。![](https://i.imgur.com/YkNmQVy.jpg =600x121)

#### 核取方塊
分群
<font color="#009ee7">`<fieldset>`需緊接著`<legend>`，不能有其他tag</legend>，</font>會失去群組的效果
    
```htmlmixed!
<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> 屬性提供圖片的替代文字說明。
```htmlmixed!
<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>
```
