aria-label

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

<!DOCTYPE html>
<html>
<head>
  <  charset = \"utf-8\">
  < >demo</ >
  <  rel=\"stylesheet\" href=\"https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css\" rel=\"external nofollow\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\" crossorigin=\"anonymous\">
  <  src=\"https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></ >
 <  src=\"https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js\" integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\" crossorigin=\"anonymous\"></ >
 <  src=\"https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"></ >
  <style type=\"text/css\">
    body{padding: 20px;}
  </style>
</head>
<body>
  <form role = \"form\">
    <div class=\"form-group col-lg-3 form-horizontal\">
      <label for = \"idCard\" class=\"control-label col-lg-5\">身份证号：</label>
      <div class=\"col-lg-7\">
        <input type = \"text\" id = \"idCard\" class=\"form-control\">
      </div>    
    </div>  
  </form>
</body>
</html>

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

<body>
  <form role = \"form\">
    <div class=\"form-group col-lg-3 form-horizontal\">
      <div class=\"col-lg-7\">
        <input type = \"text\" id = \"idCard\" class=\"form-control\" aria-label = \"身份证号\">
      </div>    
    </div>  
  </form>
</body>

aria-labelledby
<body>
  <div class=\"dropdown\">
    <button type=\"button\" class=\"btn dropdown-toggle\" id=\"dropdownMenu1\" 
     data-toggle=\"dropdown\">
     选择您的职位
     <span class=\"caret\"></span>
    </button>
    <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\">
     <li role=\"presentation\">
       <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >测试工程师</a>
     </li>
     <li role=\"presentation\">
       <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >开发工程师</a>
     </li>
     <li role=\"presentation\">
       <a role=\"menuitem\" tabindex=\"-1\" href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >销售工程师</a>
     </li>     
    </ul>
  </div>
</body>

注：

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

总结

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章