無障礙網頁切版

{%hackmd @s6102161021/greenTheme %} <b>參考資料：</b> <div class="info aStyle"> - [附件-無障礙網頁設計切版V1 (p.34 ~ p.96)](https://drive.google.com/file/d/11BKoh-cL25XE0Y6vl4SX8u6Wcc4W_iR8/view) </div> ## 章節1 - HTML 結構與 Accessibility Tree - HTML tag缺少對應的頭尾、屬性缺少引號、大小寫不符合規範、屬性之間缺少空格...等等都可能導致畫面呈現錯誤 - 自動化流程: - 使用預處理器(如 PUG) - 常見編輯器也都有原生功能或套件可以協助做HTML Lint - 利用線上服務協助檢查HTML是否符合規範([PageSpeed Insights](https://pagespeed.web.dev/)、[The W3C Markup Validation Service](https://validator.w3.org/)) ### HTML tag - 語義化的HTML tag能幫助不借助視覺的使用者理解當前這個元件在哪裡、可以做什麼、應該如何互動 - 如果對role、aria-label...等ARIA屬性還不熟悉，可以從語義化HTML tag著手，沒寫好的ARIA屬性比完全不寫要糟，反而會對螢幕閱讀器使用者造成誤導，或造成結構上的錯誤 - 螢幕閱讀器會依照Accessibility Tree的順序將內容提供給使用者 ![](https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/oVhpmyLS5pMVZOrtd6j9.jpg?auto=format&w=845) [<i>(https://web.dev/the-accessibility-tree/)</i>](https://web.dev/the-accessibility-tree/) - Accessibility Tree 檢查方式 - ![](https://hackmd.io/_uploads/HJHxkrkjn.png) <i>[講義p.35 ~ p.38]</i> ## 章節2 - 網頁主架構 - 原則上，HTML結構順序應與網頁實際視覺順序相同 - 應使用一樣的寫法，用CSS來達成裝飾性的排版設計(flex-direction、grid、float...) ![](https://hackmd.io/_uploads/rJ2Eyrkjn.png =80%x) ### 地標 Landmark - 地標的妥善運用能讓使用屏幕閱讀器的盲人用戶能夠跳轉到網頁的各個部分 - 地標的使用應該盡量精簡，以免讓使用者難以理解網頁主結構 - 一個頁面，＜main＞只會有一個 - 其他landmark不只一個時，需個別加上aria-label來區別 - 直屬於＜body＞的情況下，landmark HTML元素才會被認定為對應的landmark role ![](https://hackmd.io/_uploads/BynuJHyj3.png) ```htmlmixed <body> <header> <nav></nav> </header> <main> <section></section> <section></section> ... </main> <aside></aside> <footer> <nav></nav> </footer> </body> ``` <i>[講義p.39 ~ p.42]</i> <div class="aStyle"> [範例: a11y - Landmark](https://codepen.io/SGVicky/pen/PoxjWNY) [資料: Accessibility Landmarks](https://www.w3schools.com/accessibility/accessibility_landmarks.php) </div> ## 章節3 - 無障礙定位點(導盲磚 ::: ) 跳過導航列對於屏幕閱讀器和鍵盤用戶直接到主要內容非常有用，可以分為兩種做法： 1. 設置跳到主要內容按鈕 Skip to content 2. 設置無障礙定位點( 導盲磚::: ) ### Skip to content 操作方式為：<b>一進入網站按鍵盤Tab鍵，第一下或第二下時會出現隱藏的按鈕引並導鍵盤使用者直接進入主要內容區</b>。最好的狀況是敲擊Tab第一下就能focus的DOM。由於網站美觀因素，設計師會將此按鈕在畫面隱藏，但工程師不可使用 1. display: none; 或 visibility: hidden; (會被螢幕閱讀器忽略) 2. width: 0; height: 0; (被螢幕閱讀器設為不存在。) <div class="aStyle"> [可以使用clip去製作此效果](https://codepen.io/SGVicky/pen/QWJZqXR) </div> ![](https://hackmd.io/_uploads/BkglSFJoh.png =60%x) ![](https://hackmd.io/_uploads/SJc-SYyo2.png =60%x) <div class="aStyle"> [範例 - BBC](https://www.bbc.com/) </div> ![](https://hackmd.io/_uploads/B1xUIYki2.png =60%x) ![](https://hackmd.io/_uploads/BkNI8K1j2.png =60%x) <div class="aStyle"> [範例 - WebAIM](https://webaim.org/) </div> ### 無障礙定位點(導盲磚 ::: ) 無障礙網站利用三個冒號(:::)來代表區塊定位點，搭配accesskey，引導鍵盤使用者快速移置欲前往的區塊，操作方式為：<b>按住alt鍵+ U(上方) / C(中間) / Z(下方) / L(左方) / R(右方) 來移動</b> <div class="aStyle"> 備註:上述的操作方式為[chrome瀏覽器](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey)，且accesskey搭配的快捷鍵並非固定，所以通常會有一頁[網站導覽](https://www.railway.gov.tw/tra-tip-web/tip/tip00F/tipF15/view)頁面去定義快捷鍵設定 </div> <div class="aStyle"> [資料 - 什麼是定位點](https://accessibility.moda.gov.tw/Questions/Detail/82?Category=33) [資料 - 無障礙定位點（導盲磚 :::）](https://ithelp.ithome.com.tw/articles/10226489) [資料 - Skip Navigation Links](https://webaim.org/techniques/skipnav/) [範例: a11y - Skip Navigation Links](https://codepen.io/SGVicky/pen/QWJZqXR) </div> ## 章節3 - 標題、段落、文字 ### 標題 - 由＜h1＞到＜h6＞按照層級順序撰寫，不可以跳層 - 下層內容與其所屬的上層內容相關 ![](https://hackmd.io/_uploads/r1EsxHyo3.png) ### 段落和內容 - [＜article＞](https://www.w3schools.com/tags/tag_article.asp) - [＜blockquote＞](https://www.w3schools.com/tags/tag_blockquote.asp) - [＜ul＞、＜ol＞、＜li＞](https://www.w3schools.com/tags/tag_ol.asp) - [＜p＞](https://www.w3schools.com/tags/tag_p.asp) - [＜br＞](https://www.w3schools.com/tags/tag_br.asp) - [＜em＞](https://www.w3schools.com/tags/tag_em.asp) (斜體/強調) - [＜i＞](https://www.w3schools.com/tags/tag_i.asp) (斜體/無強調) - [＜strong＞](https://www.w3schools.com/tags/tag_strong.asp) (粗體/強調) - [＜b＞](https://www.w3schools.com/tags/tag_b.asp) (粗體/無強調) - [＜del＞](https://www.w3schools.com/tags/tag_del.asp) (刪除線/已刪除) - [＜s＞](https://www.w3schools.com/tags/tag_s.asp) (刪除線/不再正確) - [＜ins＞](https://www.w3schools.com/tags/tag_ins.asp) - [＜sub＞](https://www.w3schools.com/tags/tag_sub.asp) - [＜sup＞](https://www.w3schools.com/tags/tag_sup.asp) - [＜hr＞](https://www.w3schools.com/tags/tag_hr.asp) - [＜code＞](https://www.w3schools.com/tags/tag_code.asp) - [＜time＞](https://www.w3schools.com/tags/tag_time.asp) <div class="aStyle"> [範例: a11y - Text Content](https://codepen.io/SGVicky/pen/rNQqNMj) </div> ### 文字樣式 - 內文的預設文字大小 (font-size) 通常是 16px - 行高 (line-height) 至少為字體大小的1.5倍 - 段落間距 (margin/padding) 至少是字體大小的2倍 - 字元間距 (letter-spacing) 至少為字體大小的0.12倍;中文字元0.14倍 - 字間距 (word-spacing) 至少為字體大小的0.16倍 - 可以根據實際使用的字體及語言加大 - 使用相對單位，如 %、em、rem <i>[講義p.43 ~ p.48]</i> ### <strong>補充:</strong> <div class="addInfo"> - ＜h1＞一個頁面只能出現一次，＜h2＞到＜h6＞可以重複 - 網站Logo可使用＜h1＞包起來，輔以整個網站的名稱作為描述。 - ＜h1＞至＜h6＞標題在層次結構有明確的規定，但無具體字級大小，符合數字的增加，層次愈來愈低即可 </div> <div class="aStyle"> [範例: a11y - Font Style](https://codepen.io/SGVicky/pen/bGQqgoo) </div> ## 章節4 - 圖與圖表 - 所有的＜img＞都必須有alt屬性(替代文字) - 裝飾性圖片可將alt屬性留空，就會被Accessibility Tree忽略 - 有意義的圖片應避免使用CSS background-image的方式來處理，因為螢幕閱讀器無法判讀 - 使用 object-fit 達成類似 background-size 的效果 [範例](https://codepen.io/judyshyu/pen/GRdjZmE) - alt要在能清楚描述圖片內容的前提下盡量精簡，螢幕閱讀器會將兩者都朗讀出來，對使用者來說反而是種負擔 - 裝飾性的icon font不需要替代文字，可加上aria-hidden=”true”讓螢幕閱讀器略過 [範例](https://codepen.io/judyshyu/pen/OJZRVrE) - [＜figure＞：可附標題内容元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)，能夠提高網頁的可讀性、可訪問性和語意結構，同時提供更好的多媒體內容支援和控制，使網頁更易於瞭解和使用。 ![](https://hackmd.io/_uploads/rk4NbH1o2.png) <i>[講義p.49 ~ p.54]</i> ## 章節5 - 連結、按鈕 - 可點擊元件寬高不小於 44px - 常見點擊範圍不足情形: 1. 只有 icon 的按鈕(例如社群媒體按鈕) 2. 麵包屑文字(通常行高不足) 3. Footer 內的連結 ![](https://hackmd.io/_uploads/Hkit-r1jn.png) - ＜button＞和具備href屬性的＜a＞可以被滑鼠點擊，也可用鍵盤的Tab鍵選取，並用Enter或Space鍵觸發 - 按鈕和連結要有指示性的文字 (例：點我登記抽獎、看更多國際新聞) ### 連結 / 錨點 <b>＜a＞在互動後:</b> - 會將使用者引導至其他區塊(即anchor，前往錨點的行為) - 或引導至其他頁面(即link，前往連結的行為) - 即使視覺上元件的外觀長得像按鈕，只要操作行為是導引使用者到另一個頁面，那就應該要使用＜a＞來撰寫 - ＜a＞的href屬性並不是必要的，沒有href的＜a＞的意義轉為 placeholder(佔位)，也會失去預設的cursor: pointer樣式 ### 按鈕 <b>＜button＞在互動後:</b> - 停留在原本的頁面位置，畫面產生變化(彈出式視窗、特效動畫...) - 表單以外的＜button＞，記得加上type="button"，不然預設會觸發submit - 不建議使用＜div＞、＜span＞來模擬按鈕，要額外: - 補上role=”button”讓使用者知道這是按鈕 - 補上tabindex="0"讓鍵盤能focus(disabled 時還要移掉) - 補上CSS的cursor: pointer讓滑鼠使用者能得到可點擊的提示 - 補上CSS的[disabled]狀態樣式 - 撰寫javascript讓Enter或Space鍵能觸發 - 用＜a＞來模擬按鈕，要額外: - 補上role=”button”來釐清元件的功能 ### tabindex屬性 - tabindex="-1" - 元素是可被focus的，但是無法用鍵盤導航focus - carousel裡面有按鈕，若被focus到會導致位置跑掉 - tabindex="0" - 元素是可被focus的，也可以用鍵盤導航focus - 訪問的順序會依照DOM順序 - tabindex=正值 - 不建議使用，會干擾鍵盤訪問順序 - 元素是可被focus的，也可以用鍵盤導航focus - 數字越大，被focus排序越往後 - 若有多個元素有一樣的tabindex值，會依照DOM順序focus <i>[講義p.68 ~ p.73]</i> ### <strong>補充:</strong> <div class="addInfo"> - tabindex最主要的目的就是讓鍵盤可以無障礙的操作到改元素，一般來說HTML內建的元素像是＜a＞、＜button＞、＜input＞預設就會帶有keyboard accessibility的功能，不需要額外添加，但如果是針對特定的元素想要讓使用者可以被鍵盤觸擊到的話，就可以用tabindex這個屬性，告訴鍵盤它是可以被操作的 </div> <div class="aStyle"> [範例: a11y - Click Element](https://codepen.io/SGVicky/pen/YzRZJGO) [資料: Breadcrumb Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) [資料: UI Design Dos and Don’ts](https://developer.apple.com/design/tips/) </div> ## 章節6 - 隱藏元件 - HTML 和 CSS 所使用的隱藏方法，有些不只影響畫面視覺，也會影響Accessibility Tree[範例](https://codepen.io/judyshyu/pen/QWrKGwQ) ### 1.對所有人都隱藏 - 互動後才需要顯示的內容 - 例如:尚未顯示的 modal、尚未點開的 tab 內容 - 做法: - HTML 元素加上 hidden 屬性 - CSS 加上 display: none; - CSS 加上 visibility: hidden; ### 2.對螢幕閱讀器隱藏、視覺顯示的內容 - 可精簡 Accessibility Tree，提升使用體驗 - 例如:裝飾性的內容 - 做法: - 加上 aria-hidden=”true” (不要加在可 focus 的元件) - img 的 alt=”” 為空 ### 3.視覺隱藏、只提供給螢幕閱讀器的內容 - 提供給螢幕閱讀器使用者的替代文字、補充資訊 - 例如:網頁最上方的無障礙導航區塊 <div class="aStyle"> [資源 - CSS in Action](https://webaim.org/techniques/css/invisiblecontent/) [補充: Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/accessibility/) [補充: Tailwindcss](https://tailwindcss.com/docs/screen-readers) </div> <i>[講義p.82 ~ p.87]</i> ## 章節7 - CSS 補充 ### :focus vs :focus-visible - focus: 聚焦元件時會被觸發(包含滑鼠、觸控、鍵盤) - focus-visible: 只會用鍵盤聚焦元件時會被觸發 ### focus 狀態的視覺提示樣式 - 不要直接把瀏覽器原生的 :focus 樣式取消，利用 :focus-visible 來保留鍵盤聚焦時的 focus 樣式 ```htmlembedded /* 不要這樣寫! */ :focus{ outline:none; } /* 這樣寫! */ :focus:not(:focus-visible){ outline:none; } ``` <div class="aStyle"> [補充: Style focus](https://web.dev/style-focus/) </div>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.