Bootstrap의 aria-label 및 aria-labelledby apps_javascript 기술에 대한 자세한 설명-JS 튜토리얼-php.cn

Bootstrap의 aria-label 및 aria-labelledby apps_javascript 기술에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:22:10

원래의

2334명이 탐색했습니다.

아리아라벨

일반적인 상황에서 양식의 입력 구성 요소에는 해당 레이블이 있습니다. 입력 구성 요소에 포커스가 있으면 화면 판독기가 해당 레이블의 텍스트를 읽습니다.
예:

<!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>

로그인 후 복사