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