本篇文章學習目的:
大家知道 affordance 是什麼嗎?講到 affordance ,大多數的慣例都會使用一個茶壺來做舉例!
(圖片出處:unsplash)
我們看到茶壺(目標物),不用怎麼細細思考,就能知道茶壺可以拿起來倒茶(功能性),這就是 affordance 示能性。
使用者看到網頁內容,立即知道該怎麼操作,這不僅是因為我們看得見它,也是 UI/UX 的示能性。瀏覽器或螢幕閱讀器獲取網頁結構,立即知道元素代表的意義,這是 HTML 的示能性。而這篇文章要談的就是 HTML 的之於的示能性!
符合 HTML 規範的網站,本身就具有良好的可訪問性(Accessibility),有助於提升 SEO,也將提升螢幕閱讀器對於網頁元素的理解程度,撰寫這樣的網站是作為工程師的使命,維護每個人公平獲取資訊的權利。
瀏覽網站的過程,是一個連貫的操作行為,包含上下瀏覽(導覽) ⇒ 查找(操作) ⇒ 確認 ⇒ 獲得資訊。
整個過程中,確保使用者隨時能知曉:
以下分為「HTML 元素」與「客製化控制項」,來解釋語義。
HTML 元素本身已經具有其「基礎定義」,但是能否讓瀏覽器、螢幕閱讀器、爬蟲知曉元素的意義,要看這個基礎定義是否能清楚代表其內容,比如說 HTML 5 提供的語義標籤就非常清楚。
比如 <div>
元素的基礎定義代表的是群組,在 VoiceOver 讀出時是「Group」,使用者無法透過「Group」瞭解區塊的內容。可是 <button>
就不同了,當 VoiceOver 讀出時是「Button」,使用者可以預測它的操作行為:這個區塊可以「點擊」,至於點擊會發生什麼事情,就要倚靠 <button>
中提供清晰的指示內容了。
範例一、當螢幕閱讀器使用者遇到 <button>
的日常:
範例二、HTML 5 的語義標籤
HTML 5 中,採用了 <figure>
與 <figcaption>
元素來做到更完整的語意標記。
更有效的分離「圖片的說明」與圖說「想要傳達的概念」,讓內容更具結構。
<figure>
<img src="picture.jpg" class="picture" alt="這是人在使用手機的圖片" />
<figcaption>手機改變了這世界</figcaption>
</figure>
補充:HTML 4 的元素列表、HTML 5 標籤在各瀏覽器的支援程度、使用 HTML 5 語義標籤的頁面(你可以使用各種裝置來瀏覽測試看看)。
備註:不要糾結 <section>
與 <article>
是誰包誰,全看結構是否符合其元素的描述。
我們現在的網站都已經演變成較複雜的應用程式,即使再簡單的網站,都因應手機時代來臨,智慧型裝置的顯示畫面較小,所以縮減某些區塊呈現範圍的需求,比如說,導航列到手機的介面會呈顯成一個「漢堡」的形狀,點擊那顆「漢堡」選單將收合導覽列的內容。
這時候 WAI-ARIA 就派上用場了!目前需要使用 aria
屬性來操作 Accessibility Tree(新增、覆蓋、刪除),我們也能夠過開發者工具來檢視 Accessibility Tree。
上面的影片是關於 The Accessibility Tree 的簡單介紹。
(圖片出處:AOM - WICG)
<shortdiv />
文章裡真的超多乾貨!!!看過後對無障礙網頁有更多的認識和理解了 POWER UP ~ 每天必追
追 Askie 文完,RM 續追一波! 棒棒
都追都追
在這裡留言的文章都強檔呀
這系列讚
超棒的系列 謝謝你分享