Bootstrap의 aria-label 및 aria-labelledby apps_javascript 기술에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:22:102268검색
아리아라벨
일반적인 상황에서 양식의 입력 구성 요소에는 해당 레이블이 있습니다. 입력 구성 요소에 포커스가 있으면 화면 판독기가 해당 레이블의 텍스트를 읽습니다.
예:
<!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>
그러나 입력 상자에 레이블을 설정하지 않으면 초점이 맞춰졌을 때 스크린 리더가 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 속성
원하는 라벨 텍스트가 다른 요소에 이미 존재하는 경우 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의 내용을 읽습니다.
위 내용은 편집자가 소개한 Bootstrap의 aria-label 및 aria-labelledby 애플리케이션과 관련되어 있습니다. 이 글을 공유함으로써 모든 분들께 도움이 되기를 바랍니다. 스크립트하우스 홈페이지.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.