寫網頁時總是會套用些如:bootstrapangular-material 等等的樣式框架

不知道大家有沒有注意到,其中有些 CSS 的 class 名稱為 sr-only 或是一些 aria-label、aria-hidden 等的HTML屬性。

由於現在很多 <input> 都不像以前外層會包一個 <label>,便使得朗讀軟體難以辨認此元件。

因此這些是為了增進網頁的 accessibility,讓一些閱讀不易的使用者,可以透過朗讀軟體來存取你的網頁。


我們來看看一個普通的輸入使用者名稱 <input>

&lt;input title="使用者名稱" type="text" placeholder="請輸入你的使用者名稱" aria-label="使用者名稱" /&gt;

在 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

Leave a Reply