Bootstrap的aria-label和aria-labelledby

╰半夏微凉° 2022-06-16 22:51 162阅读 0赞

## aria-label ##

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

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.      **<****meta** charset = "utf-8"**>**  
5.      **<****title****>**demo**</****title****>**  
6.      **<****link** href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"**>**  
7.      **<****style** type="text/css"**>**  
8.          body\{padding: 20px;\}  
9.      **</****style****>**  
10. **</****head****>**  
11. **<****body****>**  
12.     **<****form** role = "form"**>**  
13.         **<****div** class="form-group col-lg-3 form-horizontal"**>**  
14.             **<****label** for = "idCard" class="control-label col-lg-5"**>**身份证号：**</****label****>**  
15.             **<****div** class="col-lg-7"**>**  
16.                 **<****input** type = "text" id = "idCard" class="form-control"**>**  
17.             **</****div****>**          
18.         **</****div****>**      
19.     **</****form****>**  
20. **</****body****>**  
21. **</****html****>**

![Center][]

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

如：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****body****>**  
2.      **<****form** role = "form"**>**  
3.          **<****div** class="form-group col-lg-3 form-horizontal"**>**  
4.              **<****div** class="col-lg-7"**>**  
5.                  **<****input** type = "text" id = "idCard" class="form-control" aria-label = "身份证号"**>**  
6.              **</****div****>**          
7.          **</****div****>**      
8.      **</****form****>**  
9.  **</****body****>**

![Center 1][]

## aria-labelledby属性    ##

当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：

当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****body****>**  
2.      **<****div** class="dropdown"**>**  
3.         **<****button** type="button" class="btn dropdown-toggle" id="dropdownMenu1"   
4.            data-toggle="dropdown"**>**  
5.            选择您的职位  
6.            **<****span** class="caret"**>****</****span****>**  
7.         **</****button****>**  
8.         **<****ul** class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"**>**  
9.            **<****li** role="presentation"**>**  
10.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**测试工程师**</****a****>**  
11.           **</****li****>**  
12.           **<****li** role="presentation"**>**  
13.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**开发工程师**</****a****>**  
14.           **</****li****>**  
15.           **<****li** role="presentation"**>**  
16.              **<****a** role="menuitem" tabindex="-1" href="\#"**>**销售工程师**</****a****>**  
17.           **</****li****>**            
18.        **</****ul****>**  
19.     **</****div****>**  
20. **</****body****>**

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

[view plain]: http://blog.csdn.net/liuyan19891230/article/details/50452835#
[Center]: /images/20220617/fecc3e3d3ba34aea85ecbbdff67ec749.png
[Center 1]: /images/20220617/4d9dd7fd76f04c1d84ac5904d66c0925.png
[Center 2]: /images/20220617/d884c31c1e9943e9a4c58b86392147f3.png