欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

HTML5 aria-labelledby和aria-label 有大用 有大大用

这两个属性都是用于 Accessibility,两者设立的目的是一样的,用于屏幕阅读器(Screen Reader),都是为了帮助残障人士更好的识别当前元素。

如:<input type=”text” aria-label=”用户名”/>

此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”



aria-label


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

如:


<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>demo</title>

<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">

<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不会在视觉上呈现效果。

如:

 

 

 

 


  1. <body>

  2. <form role="form">

  3. <div >

  4. <div >

  5. <input type="text" id="idCard"  aria-label="身份证号">

  6. </div>

  7. </div>

  8. </form>

  9. </body>

 

 

aria-labelledby属性

 

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

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

 

 

 

 <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="#">测试工程师</a>

</li>

<li role="presentation">

<a role="menuitem" tabindex="-1" href="#">开发工程师</a>

</li>

<li role="presentation">

<a role="menuitem" tabindex="-1" href="#">销售工程师</a>

</li>

</ul>

</div>

</body>


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



来自 https://blog.csdn.net/mp624183768/article/details/82056442


普通分类: