Accessibility Memo (無障礙網頁製作教學)

Accessibility Memo (無障礙網頁製作教學) === ###### tags: `accessibility` `aria` `無障礙網頁` ## 台灣政府的標準 ![](https://i.imgur.com/xOhWWzG.png) - [無障礙規範索引 -- 4原則12指引3等級66成功準則](https://accessibility.ncc.gov.tw/Home/Info) - [無障礙網頁開發規範2.0版 -- 41條檢測碼](https://accessibility.ncc.gov.tw/Download/Category/47/1) - [檢測碼與稽核評量碼](https://accessibility.ncc.gov.tw/Accessible/Detail/144?Category=46#1.1) --- - [目前要遵守的所有規範一覽表](https://accessibility.ncc.gov.tw/Accessible/Detail/4461?Category=68) ## 台灣的規範 (節錄) ### 超連結相關 > 圖片(img)有連結(a) 時， \<a> 要有 title ，但 \<img> 不用 > >[name=XH1080400] > 點擊切換語言，要有明確 title: 切換成**日文** > > [name=EV1100200] > focus 物件時不要啟動它的功能 (如: 上一頁等)，啟動時再發動功能(?) > 換言之: focus, Tab 時不啟動 function；但 onClick 時啟動function > > [name=EV1100100] > 可以點選的按鈕或連結，一定要可被 tab 尋訪到 > 如果在 img 上設置 onclick event，無法被 tab，要用 button 包住它 > > [name=GN1210101E] > 不要做「...閱讀更多」的設計 > 如果真的要做， title 要改成此新聞的標題 (為了不要有人重複) > > [name=HM1240404E] > 有「另開新視窗」的連結，title 和連結文字一定要有「另開新視窗」字樣；反之，不會另開視窗的連結，決不能有此字樣 > > [name=GN1320200E] > 不能有超連結，沒連結到任何網頁 > 還沒做出來的網頁要隱藏 > > [name=?] ### 輸入相關 > form 的 fieldset 第一欄為 < legend>，必填不可為空 (如果 fieldset 存在) >> [name=XH1030102] > select 有使用到 optgroup 時，一定要有 label、一定每個選項都要在 group 底下 >> [name=XH1030102] > input, textarea, select 一定要有 < label> >> [name=XH1030103] > input 也要做 focus 特效 > > [name=?] > form 的 input 要添加 tabindex 決定填寫順序 > > [name=EV1080301] ### 圖片相關 > img alt="" 為空時，不能有 title 的 Attribute >> [name=XH1010600] > 圖片組 (群組) 只需要第一張圖有 alt > > [name=EV1010101] > 1. 裝飾用圖片，alt 設為空，不設 title > 2. 如果是用超連結包著的圖片，a 要設 title，img 設 alt="" 不設 title > > [name=HM1110112E] ### HTML 結構相關 > 一個頁面只能有一個 h1 (不多不少)。且 h1、h2、h3 ... 都該用到 [color=red] > 不能跳過 h2 用 h3 ，一定要巢狀結構 >> [name=XH1030100] > 網頁要有 \<html lang="zh-Hant-TW"> 標註 > > [name=XH1090100] > 網頁標頭要有: \<!DOCTYPE> > > [name=?] > pure HTML 本身寫的排序就必須符合閱讀順序性 > > [name=EV1030200] > 使用 semantic HTML tag (nav, header, ...) > 沒用好像真的會不過... 至少 nav 必用 > > [name=XH1080102] > 中央內容區塊定位點「Alt + C」 > > [name=GN1240102E] ### 其他 > 使用 fa-icon 要有 title > > [name=XH1010103] > hover 特效都要做出來 (詳細不明) [color=red] > > [name=EV1030102] > 重複出現的元件如: 一串分享鍵 ... ，每次出現順序都要一樣 > > [name=EV2100300] > 要有導覽網站、搜尋全站機制、網頁清單連結、麵包屑 [color=red] > > [name=EV1080500] > 最左上角要藏 "跳到主要內容區塊" > > [name=EV1080100] > table 要有 summary、要有 caption > > [name=H205105, H305004] ```htmlembedded= <table summary="此表格為....。第一直欄為 OO ，第二直欄為XX ..."> <caption class='sr-only'> {表格名稱} </caption> <thead> .... </table> ``` > 要顯示 javascript 不支援時的替代字樣 > > [name=GN1410200E (其實我覺得應該不是這個)] ```htmlembedded= <noscript> <div class='text-center'> <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p> </div> </noscript> ``` > 檔案要有 PPT、ODT；WORD、ODT；EXCEL、ODS 通用格式 > > [name=GN1320202E] --- ## W3C 國際通用規範 1. input 一定要搭配 **label for="#id"** 2. 圖片一定要有 **取代文字** 1. 分隔線: alt="" 2. 讓 **連結比較好點** 的輔助圖片: alt="" 3. 已經用文字描述過的圖片: alt="" 4. 單純 **裝飾用** 的圖: alt="" 3. 每頁都要標註 **使用語言** ```htmlmixed= <html lang="en"> ``` 4. 要用 **semantic-tag**，少用 div, span 等標籤。例如: ![](https://i.imgur.com/xDbB2br.png) ```htmlembedded= <section> <article> <h2>Superbear saves the day</h2> <time datetime="2015-08-07">7 Aug 2015</time> <p>The city's favorite bear yet again proves ....</p> <aside> <h3>Related Articles</h3> <ul> <li><a href="#">Bear receives key to city</a></li> <li><a href="#">Superbear stands for mayor</a></li> </ul> </aside> </article> </section> ``` ![](https://i.imgur.com/0dA09Xn.png) ```htmlembedded= <form action="#" method="post"> <div role="search"> <label for="search">Search for</label> <input type="search" id="search" aria-describedby="search-help"> <div id="search-help">Search records by customer id or name</div> <button type="submit">Go</button> </div> </form> ``` 5. 填寫表單錯誤時要明確講**錯誤之處**、**如何修正**，要提供**填寫範例**。 - For example, (02) 1234 1234 6. 確保 **閱讀順序** 能讓聽者讀得懂 ![](https://i.imgur.com/Kemx3vz.png) - 人類用看的懂這雙鞋叫 Space trainers，懂綠色按鈕是購買鍵，但: ```htmlembedded= <img src="images/trainer.png" alt="..."> <h3>Space trainers</h3> <p>Space...</p> <a href="...">Add to cart</a> ``` - 先放圖，再講標題。聽者聽不懂。 ```htmlembedded= <h3>Space trainers</h3> <img src="images/trainer.png" alt="..."> <p>Space...</p> <a href="...">Add to cart</a> ``` - 這個閱讀順序就對了。先講 **大標題** ，才說明內文 (圖是內文)。 7. 各種解析度閱讀都能安心讀，不會跑版 (RWD、200% zoom) 8. 添加 **role** 或 **aria-*** 在 **互動式元素** 上(詳細另述) 9. 少用驗證碼，或是 **無障礙驗證碼** 10. 可以用 **鍵盤** 移動到任何互動元素 11. 表格要有 **表格摘要** --- ![](https://i.imgur.com/cN7BF1T.png) - 色弱者眼睛所看見的世界 (右圖) ## 參考網址 - [參考網址 W3C 指引](https://www.w3.org/WAI/tips/developing/) - [一探Web Accessibility](https://medium.com/frochu/%E5%9B%9E%E6%AD%B8%E5%88%9D%E5%BF%83-%E4%B8%80%E6%8E%A2web-accessibility-baaa4d22f4a7) - [Accessibility for Hamburger](https://medium.com/@linlinghao/accessibility-for-hamburger-menu-a37fa9617a89) - [無障礙網頁設計教學、要點整理](https://www.weiyuan.com.tw/article/66) - [政府網站提供如何達到 AAA 指引](https://accessibility.ncc.gov.tw/Accessible/Detail/19?Category=7) - [圖文教學如何做到無障礙](https://medium.com/as-a-product-designer/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81%E7%A5%95%E6%8A%80-%E4%BB%8B%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%A4%A7%E8%A3%9C%E4%B8%B8-9640dc1fde2b) - [圖片替代文字的基本規則](https://www.hischool.com.tw/accessibility/%E5%9C%96%E7%89%87%E6%9B%BF%E4%BB%A3%E6%96%87%E5%AD%97%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A6%8F%E5%89%87/)

Read more

Github 教學文

前後端開發資源提供 (程式面)

Android App

【CSS】 Kevin Powell's CSS lessons