這些都是HTML5針對html tag增加的屬性，一般是為不方便的人士提供的功能，比如屏幕閱讀器。
role的作用是描述一個非標準的tag的實際作用。比如用div做button，那麽設置div 的 role="button"，輔助工具就可以認出這實際上是個button。
aria的意思是Accessible Rich Internet Application，aria-*的作用就是描述這個tag在可視化的情境中的具體信息。比如：
<div role="checkbox" aria-checked="checked"></div>輔助工具就會知道，這個div實際上是個checkbox的角色，為選中狀態。
aria-label
正常情況下，會在表單裏給input組件指定對應的label，當用戶tab到輸入框時，讀屏軟件就會讀出相應label裏的文本。
<label for="username">用戶名：</label><input type="text" id="username"/>當沒有給輸入框設計對應的label文本的位置時，aria-label屬性為組件指定內置的文本標簽。它不在視覺上呈現。
<input type="text" aria-label="用戶名"/>此時，當焦點落到該輸入框時，讀屏軟件就會讀出aria-label裏的內容，即"用戶名"。
aria-label只有加在可被tab到的元素上，讀屏才會讀出其中的內容。以下情況，也是可以讀出的：
<span tabindex="0″ aria-label="標簽提示內容">可被tab的span標簽</span>
aria-labelledby
當想要的標簽文本已在其他元素中存在時，可以將其值為該元素的id。
<div role="form" aria-labelledby="form-title"> <span id="form-title">使用手機號碼註冊</span> <form>……</form> </div>
表單區添加了role="form"，當跳轉到該區域時，不僅會讀出"表單區"，也會讀出"使用手機號碼註冊"。
如果一個元素同時有aria-labelledby和aria-label，讀屏軟件會優先讀出aria-labelledby的內容。
Tags: Internet 瀏覽器 checked 閱讀器 用戶名
文章來源：