Bootstrap的aria-label与aria-labelledby

Posted 2020-07-28

aria-label:

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

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

 

aria-labelledby：

当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值设为所读取的元素的id

 

注：如果一个元素同时又aria-labelledby与aria-label，会优先读出aria-labelledby的内容。