bootstrap的aria-label屬性以及aria-labelledby屬性是什麼意思牛牛憶城 2018-03-30

aria-label

正常情況下,form表單的input元件都有對應的label。當input元件獲取到焦點時,螢幕閱讀器會讀出相應的label裡的文字。

如:<!DOCTYPE html>

demo

但是如果我們沒有給輸入框設定label時,當其獲得焦點時,螢幕閱讀器會讀出aria-label屬性的值,aria-label不會在視覺上呈現效果。

如:

當想要的標籤文字已在其他元素中存在時,可以使用aria-labelledby,並將其值為所有讀取的元素的id。如下:

當ul獲取到焦點時,螢幕閱讀器是會讀:“選擇您的職位”

bootstrap的aria-label屬性以及aria-labelledby屬性是什麼意思

PS:如果一個元素同時有aria-labelledby和aria-label,讀屏軟體會優先讀出aria-labelledby的內容

bootstrap的aria-label屬性以及aria-labelledby屬性是什麼意思ImposIsNothing 2015-03-05

如:

此時,當焦點落到該輸入框時,讀屏軟體就會讀出aria-label裡的內容,即“使用者名稱”。

以上來自百度,第一條就是。

http://accessibilityunion。org/archives/808

bootstrap的aria-label屬性以及aria-labelledby屬性是什麼意思心繫宇宙天地寬 2017-05-17

應該是為視力障礙的人播放語音而使用的。