[HTML] 被忽視的HTML attribute aria-label、aria-hidden

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

Continue reading