---
# System prepended metadata

title: 2022/10/21 切切切會議：HyUI v4.0／無障礙課程（表格／圖文／連結按鈕／隱藏元件）
tags: [切切切會議記錄]

---

# 2022/10/21 切切切會議

###### tags: `切切切會議記錄`

會議室：線上 meeting  
會議時間：AM 10:30
會議地點：座位上
會議記錄：
會議主持：
與會人員：琬樺、黑白切五味、祺學

## HyUI v4.0進度
主講：思晨、祺學

### 目前進度

*  **目前已將元件都載入 Hyui.js 可以單獨引用 不需要的功能再關起來**
*  **是否將header/footer 用script的方式引入**
好處：切版的時候不會被大量的html影響到，改一個檔案其他引入的檔案也會一併變更
壞處：不確定會不會造成工程師的困擾
```htmlmixed=
  <body>
    <header>
      <!-- 引入js -->
      <script src="include.js"></script>
    </header>
    <main>Hello World!</main>
    <!-- main js -->
    <script src="main.js"></script>
  </body>
```
測試並不會影響到github的觀看，也不會影響到其他js的運作
https://hywebu00.github.io/git_test/include_test/

引入的script內會長這樣
```javascript=
let headContent =`
<div class="navlist">
    <ul>
        <li><a href="#">回首頁</a></li>
        <li><a href="#">網站導覽</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">常見問答</a></li>
    </ul>
</div>
`;
document.write(headContent);
```
利用es6的功能，結構可以跟html一樣
工程師在撰寫程式時並不是直接撰寫在引入的js中，而是複製js中的html出去撰寫
之後可將引入的js移除

### CSS拆分

*  **多版顏色scss設定**
祺學 : css的 var 的使用與否(css var不支援IE)
```css=
$colorStyle: 'white', 'black';
:root {
  --white-color: #fff;
  --black-color: #000;
}

@each $item in $colorStyle {
  .color-#{$item} {
    .btn {
      color: var(--#{$item}-color);
    }
  }
}
這段就會產生出
:root {
  --white-color: #fff;
  --black-color: #000;
}

.color-white .btn {
  color: var(--white-color);
}

.color-black .btn {
  color: var(--black-color);
}

```
css var補充
https://codepen.io/tseng7510/pen/rNvXNXP

如果只使用scss可以這樣處理
```css=
$colorStyle: 'white', 'black';
$mainColor: '#fff', '#000';

@each $item in $colorStyle {
  .color-#{$item} {
    .btn {
      @if $item == nth($colorStyle, 1) {
        color: nth($mainColor, 1);
      } @else {
        color: nth($mainColor, 2);
      }
    }
  }
}
```

## 無障礙課程微分享
主講：Miley

### Accessibility Tree

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

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

### 圖、圖表
* 裝飾性的 icon font 不需要替代文字，可加上 aria-hidden=”true” 讓螢幕 閱讀器略過 [［範例］](https://codepen.io/judyshyu/pen/OJZRVrE) (講義1 p.53)

* 圖片＋文字排版
![](https://i.imgur.com/08nNQGW.png)
註：圖片alt和figcaption內的文字不要重複

---
### 表格
* 無障礙表格必須帶有標題 `<caption>`
    * `<caption>` 必須放在 `<table>` 內的第一個元件，不能是最後一個
    *  視覺上可以藉由 CSS 來把標題的位置移到表格下方   
* 若表格內容複雜，可以補充摘要(summary)來加強說明表格內容，但**內容不要與標題重複**
* 摘要的寫法有三種 [［範例］](https://codepen.io/judyshyu/pen/vYjXEQN?editors=1000)：
    * 在 `<caption>` 裡塞一個子元素( `<span>` ...等)來放摘要文字
    * 在 `<table>`鄰近用別的元素撰寫摘要 (要帶 id)，並在 `<table>`上加入 aria-describedby="{id}" 來關聯兩者
    * 把 `<table>` 包在 `<figure>` 裡，利用 `<figcaption>` 來撰寫摘要



---
### 連結、按鈕
* 假如要用 `<a>` 來模擬按鈕，補上role="button"來釐清元件的功能，且不要加href，避免造成閱讀器混淆 (講義1 p.71)

* 在看更多的連結上加上aria-label="看更多xxx的文章"<br/>因為螢幕閱讀器使用者想直接跳到某連結，卻只讀到「看更多」，不知道具體會連到哪篇文章、哪個頁面 (講義1 p.72)


---
### 隱藏元件 （講義1 p.83~87)
* 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:not(:focus-visible){ 
    outline:none;
}
```
---
### WAI-ARIA
下集待續...

---


[無障礙講義下載](https://accessibility.moda.gov.tw/Lectures/Detail/1040)