寫網頁時總是會套用些如:bootstrap、angular-material 等等的樣式框架
不知道大家有沒有注意到,其中有些 CSS 的 class 名稱為 sr-only 或是一些 aria-label、aria-hidden 等的HTML屬性。
由於現在很多 都不像以前外層會包一個
因此這些是為了增進網頁的 accessibility,讓一些閱讀不易的使用者,可以透過朗讀軟體來存取你的網頁。
我們來看看一個普通的輸入使用者名稱
[code] <input title=“使用者名稱” type=“text” placeholder=“請輸入你的使用者名稱” aria-label=“使用者名稱” /> [/code]
在 windows 我們可以試著按 [win] + [enter] 開啟朗讀程式,預設可支援IE,打開IE點選網頁的 部分可以測試。
目前我的測試是優先抓取的屬性為: aria-label > title > placeholder
當然,每種朗讀程式會抓取的標籤有所不同,但 aria-label 是一定會被抓取的,title 與 placeholder 則不一定。
aria-hidden=“true” 則是可以讓朗讀軟體讀不到此元件。
相反地
.sr-only 這個 class 是只有使用朗讀程式才看得到(其實是讀取到),一般使用者則會隱藏此元件。
其他還有細部的 aria-* 的屬性,可以參考
參考資料: