Ausführliche Erläuterung der Bootstraps Aria-Label- und Aria-Labeledby Applications_Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ausführliche Erläuterung der Bootstraps Aria-Label- und Aria-Labeledby Applications_Javascript-Fähigkeiten

May 16, 2016 pm 03:22 PM

aria-label

Unter normalen Umständen verfügt die Eingabekomponente des Formulars über eine entsprechende Beschriftung. Wenn die Eingabekomponente den Fokus erhält, liest der Bildschirmleser den Text in der entsprechenden Beschriftung.
Zum Beispiel:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
 &lt;meta charset = "utf-8"&gt; 
 &lt;title&gt;demo&lt;/title&gt; 
 &lt;link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"&gt; 
 &lt;style type="text/css"&gt; 
  body{padding: 20px;} 
 &lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
 &lt;form role = "form"&gt; 
  &lt;div class="form-group col-lg-3 form-horizontal"&gt; 
   &lt;label for = "idCard" class="control-label col-lg-5"&gt;身份证号：&lt;/label&gt; 
   &lt;div class="col-lg-7"&gt; 
    &lt;input type = "text" id = "idCard" class="form-control"&gt; 
   &lt;/div&gt;   
  &lt;/div&gt;  
 &lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Wenn wir jedoch keine Beschriftung für das Eingabefeld festlegen, liest der Bildschirmleser beim Fokussieren den Wert des aria-label-Attributs und das aria-label hat keinen visuellen Effekt.
Zum Beispiel:

&lt;body&gt; 
 &lt;form role = "form"&gt; 
  &lt;div class="form-group col-lg-3 form-horizontal"&gt; 
   &lt;div class="col-lg-7"&gt; 
    &lt;input type = "text" id = "idCard" class="form-control" aria-label = "身份证号"&gt; 
   &lt;/div&gt;   
  &lt;/div&gt;  
 &lt;/form&gt; 
&lt;/body&gt;

Nach dem Login kopieren

Aria-labelledby-Attribut

Wenn der gewünschte Beschriftungstext bereits in anderen Elementen vorhanden ist, können Sie aria-labelledby verwenden und seinen Wert auf die ID aller gelesenen Elemente setzen. Wie folgt:
Wenn ul den Fokus erhält, liest der Bildschirmleser: „Wählen Sie Ihre Position“

&lt;body&gt; 
 &lt;div class="dropdown"&gt; 
  &lt;button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown"&gt; 
   选择您的职位 
   &lt;span class="caret"&gt;&lt;/span&gt; 
  &lt;/button&gt; 
  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt; 
   &lt;li role="presentation"&gt; 
    &lt;a role="menuitem" tabindex="-1" href="#"&gt;测试工程师&lt;/a&gt; 
   &lt;/li&gt; 
   &lt;li role="presentation"&gt; 
    &lt;a role="menuitem" tabindex="-1" href="#"&gt;开发工程师&lt;/a&gt; 
   &lt;/li&gt; 
   &lt;li role="presentation"&gt; 
    &lt;a role="menuitem" tabindex="-1" href="#"&gt;销售工程师&lt;/a&gt; 
   &lt;/li&gt;   
  &lt;/ul&gt; 
 &lt;/div&gt; 
&lt;/body&gt;

Nach dem Login kopieren

PS: Wenn ein Element sowohl aria-labelledby als auch aria-label hat, liest die Bildschirmlesesoftware zuerst den Inhalt von aria-labelledby

Der obige Inhalt bezieht sich auf die vom Herausgeber vorgestellten Aria-Label- und Aria-Labelby-Anwendungen. Ich hoffe, dass das Teilen dieses Artikels allen helfen kann Script House-Website.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn