重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Bootstrap中aria-label和aria-labelledby属性有什么用

这篇文章主要介绍了Bootstrap中aria-label和aria-labelledby属性有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司从2013年创立,是专业互联网技术服务公司,拥有项目成都网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元茄子河做网站,已为上家服务,为茄子河各地企业和个人服务,联系电话:13518219792

aria-label

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




  
  demo
  
  
 
 
  
    body{padding: 20px;}
  


  
    
      身份证号:
      
        
      
         
     

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


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

注:

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

感谢你能够认真阅读完这篇文章,希望小编分享的“Bootstrap中aria-label和aria-labelledby属性有什么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站名称:Bootstrap中aria-label和aria-labelledby属性有什么用
当前链接:http://cqcxhl.cn/article/igisgp.html