一直對 Bootstrap aria-label 針對台灣無障礙的使用上有存再的疑問，無障礙不過這東西對盲人來說就是要讓網頁上的字可以用朗讀軟體存取網頁中的內容。在找到的資料中也存再著我心中的問題，不會對方有實測出針的無障礙的寫法所產生再朗讀軟體上的情形，例如：向使用輔助技術的用戶傳達用意中提到的 .sr-only 類而隱藏的文本是否實用下的情形為何

問題

<input> 都不像以前外層會包一個 <label>，便使得朗讀軟體難以辨認此元件。為了增進網頁的親和性（accessibility），讓一些閱讀不易的使用者，可以透過朗讀軟體來存取你的網頁。

測試後重點

  • 試著按 [win] + [enter] 開啟朗讀程式，預設可支援IE，打開IE點選網頁的 <input> 部分可以測試。
  • 測試是優先抓取的屬性為： aria-label > title > placeholder
  • aria-label 是一定會被抓取的， title 與 placeholder 則不一定
  • aria-hidden="true" 則是可以讓朗讀軟體讀不到此元件
  • .sr-only 這個 class 是只有使用朗讀程式才看得到(其實是讀取到)，一般使用者則會隱藏此元件

    使用 CSS 來隱藏 .sr-only (screen reader only) 這個 class 的標籤，注意不能使用 display: none，否則讀屏軟件會忽略，只在視覺上將其隱藏即可。

資料源：
[HTML] 被忽視的HTML attribute aria-label、aria-hidden
前端的基礎修養：aria-label