详解Bootstrap的aria-label和aria-labelledby应用

aria-label

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

 
 
 
  
  
  
  
  body{padding: 20px;} 
  
 
 
  
 
 

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

aria-labelledby属性

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

 
  
   
   选择您的职位 
    
   
  
 
   
 
    测试工程师 
   
 
   
 
    开发工程师 
   
 
   
 
    销售工程师 
   
   
  
 
  
 

PS：如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容

以上内容是小编给大家介绍的Bootstrap的aria-label和aria-labelledby应用相关内容，希望本文分享能够给大家带来帮助，同时感谢大家一直以来对考高分网网站的支持。