Bootstrap的aria-label和aria-labelledby

当前位置 : 首页 > 网页制作 > CSS > Bootstrap的aria-label和aria-labelledby

Bootstrap的aria-label和aria-labelledby

来源: 作者: 时间:2016-01-20 09:22
aria-label正常情况下,form表单的input组件都有对应的label 当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。如: demo body{pa

 

aria-label

正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。
如:






\
但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。
如:

\

 

aria-labelledby属性

 
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”


\
PS:如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容
Tag:
网友评论

<