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

# 2022/10/21 切切切會議 ###### tags: `切切切會議記錄` 會議室：線上 meeting 會議時間：AM 10:30 會議地點：座位上會議記錄：會議主持：與會人員：琬樺、黑白切五味、祺學 ## HyUI v4.0進度主講：思晨、祺學 ### 目前進度 * **目前已將元件都載入 Hyui.js 可以單獨引用不需要的功能再關起來** * **是否將header/footer 用script的方式引入** 好處：切版的時候不會被大量的html影響到，改一個檔案其他引入的檔案也會一併變更壞處：不確定會不會造成工程師的困擾 ```htmlmixed= <body> <header>  <script src="include.js"></script> </header> <main>Hello World!</main>  <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)