Bootstrap的aria-label和aria-labelledby属性实例详解

aria-label

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

  
  
  
  
 
 
  


  
    

      身份证号：
      

        
      
    
    
  
  

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

  
    

      

        
      
    
    
  
  


aria-labelledby

  

    
     选择您的职位
     
    
    

     

       测试工程师
     
     

       开发工程师
     
     

       销售工程师
     
     
    
  

注：

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

总结

以上所述是小编给大家介绍的Bootstrap的aria-label和aria-labelledby属性实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！