Bootstrap的aria-label和aria-labelledby

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

    
    
    
    


    

        

            身份证号：
            

                
            
        
        
    
    

image.png

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

image.png

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

    

       
          选择您的职位
          
       
       

          

             测试工程师
          
          

             开发工程师
          
          

             销售工程师
          
          
       
    

image.png

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