ホームページ > 記事 > ウェブフロントエンド > Bootstrap の aria-label と aria-labeledby application_javascript スキルの詳細な説明

Bootstrap の aria-label と aria-labeledby application_javascript スキルの詳細な説明

WBOYオリジナル: 2016-05-16 15:22:102270ブラウズ

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

しかし、入力ボックスにラベルを設定しない場合、入力ボックスがフォーカスを取得したときに、スクリーンリーダーは 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>

追記: 要素に aria-labelledby と aria-label の両方がある場合、画面読み上げソフトウェアは最初に aria-labelledby の内容を読み取ります

上記の内容は、編集者が紹介した Bootstrap の aria-label および aria-labeledby アプリケーションに関連したものです。また、この記事があなたのお役に立てば幸いです。また、Script House を引き続きご支援いただきますようお願いいたします。 Webサイト。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js_javascriptスキルにおけるクラスの各種関数のカプセル化方法を詳しく解説次の記事：js_javascriptスキルにおけるクラスの各種関数のカプセル化方法を詳しく解説

続きを見る

Bootstrap の aria-label と aria-labeledby application_javascript スキルの詳細な説明

関連記事