Analysieren der Tastaturunterstützung in Formularen

In diesem Artikel werden das Inspect-Tool und die Registerkarte Ereignislistener verwendet, um die fehlende Tastaturunterstützung auf einer Demoseite zu analysieren, die Schaltflächen enthält, die das <div> -Element verwenden.

Auf der Demo-Webseite für Barrierefreiheitstests sind im Spendenformular die Schaltflächen "Betrag" und die Schaltfläche "Spenden " nicht über eine Tastatur zugänglich. Gehen Sie wie folgt vor, um dies zu testen:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie im Abschnitt Helfen Sie uns mit einer Spende in das Textfeld Andere , um den Fokus darauf zu setzen.

3. Versuchen Sie, tab oderUMSCHALT-TAB zu drücken, um den Fokus auf die Schaltflächen Spenden, 50, 100 oder 200 zu verschieben. Auf die Schaltflächen kann nicht über die Tastatur zugegriffen werden.

Das Debuggen des Spendenformulars erfordert ein Verständnis dafür, warum der Mangel an Fokusformatierung bei automatischen Testtools wie dem Problemtool nicht als Problem gekennzeichnet wird. In diesem Beispiel werden die Schaltflächen mithilfe von <div> HTML-Elementen implementiert, die von diesen Tools nicht als Formularsteuerelemente erkannt werden.

Analysieren der fehlenden Tastaturunterstützung mithilfe des Inspect-Tools

So verwenden Sie das Inspect-Tool , um die fehlende Tastaturunterstützung auf der Demoseite zu analysieren:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus.

3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Inspect (), damit die Schaltfläche hervorgehoben (blau) ist.

4. Zeigen Sie auf die Schaltfläche 50, 100 und 200 Spenden. Das Tool Überprüfen wird auf der Webseite als Überlagerung angezeigt. Die Zeile mit fokussierbarer Tastatur der Überlagerung "Inspect" zeigt, dass keine der Spendenbetragsschaltflächen über die Tastatur zugänglich ist, wie durch einen grauen durchgestrichenen Kreis angegeben:

   

   Die Schaltflächen haben keinen Namen und haben die Rolle , generic da sie Elemente sind <div> , was bedeutet, dass die Schaltflächen für Hilfstechnologien nicht zugänglich sind.

5. Wenn das Überprüfungstool aktiv ist, wählen Sie auf der Webseite das Textfeld Andere Eingabe über der Schaltfläche Spenden aus. Das Tool Elemente wird geöffnet und zeigt die DOM-Struktur für die Webseite an. Das -Element <input id="freedonation" class="smallinput"> ist ausgewählt.

   <div class="donationrow">
       <div class="donationbutton">50</div>
       <div class="donationbutton">100</div>
       <div class="donationbutton">200</div>
   </div>
   <div class="donationrow">
       <label for="freedonation">Other</label>
       <input id="freedonation" class="smallinput">
   </div>
   <div class="donationrow">
       <div class="submitbutton">Donate</div>
   </div>
   

   Die Verwendung der <label> - und <input> -Elemente im Textfeld Other ist gültig, was bedeutet, dass die Bezeichnung Other ordnungsgemäß mit dem Eingabetextfeld verknüpft ist. Auf das <input> Textfeld kann auch über die Tastatur zugegriffen werden. Der Rest des Markups des Formulars verwendet <div> Elemente, die mit CSS leicht zu formatieren sind, aber keine Bedeutung für Hilfstechnologien haben und nicht über die Tastatur zugänglich sind.

Analysieren der fehlenden Tastaturunterstützung mithilfe der Registerkarte "Ereignislistener"

Die Funktionalität des Formulars wird mithilfe von JavaScript erstellt, und Sie können dies testen, indem Sie die Registerkarte Ereignislistener wie folgt überprüfen:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie auf der Webseite mit der rechten Maustaste auf das Textfeld Andere , und wählen Sie dann Untersuchen aus. Das Tool Elemente wird geöffnet, und das <input id="freedonation" class="smallinput"> Element ist ausgewählt.

3. Wenn das Element <input id="freedonation" class="smallinput"> in der DOM-Struktur noch ausgewählt ist, wählen Sie rechts neben der Registerkarte Formatvorlagen die Registerkarte Ereignislistener aus, und erweitern Sie dann den click Ereignislistener.

   

4. Klicken Sie auf den buttons.js:18 Link. Das Tool Quellen wird geöffnet und zeigt das angewendete JavaScript an:

   

   Hier ist eine Codeauflistung des angewendeten JavaScript:

   donations.addEventListener('click', e => {
     let t = e.target;
     if (t.classList.contains('donationbutton')) {
       if (currentbutton) { currentbutton.classList.remove('current'); }
       t.classList.add('current');
       currentbutton = t;
       e.preventDefault();
     }
     if (t.classList.contains('submitbutton')) {
       alert('Thanks for your donation!')
     }
   })
   

Die Verwendung eines click Ereignislisteners zum Ausführen von Code, wenn eine Schaltfläche verwendet wird, ist eine bewährte Methode, da ein click Ereignis sowohl bei Mauszeiger- als auch tastaturinteraktion ausgelöst wird. Die Schaltfläche "Spenden " wird jedoch mithilfe eines <div> HTML-Elements implementiert, das nicht mit der Tastatur fokussiert werden kann. Das click Ereignis wird nur ausgeführt, wenn Sie eine Maus oder eine andere Quelle eines click Ereignisses verwenden, z. B. eine spezielle Schaltfläche, die auf einigen Tastaturen verfügbar ist.

Dies ist ein klassisches Beispiel, in dem JavaScript hinzugefügt wurde, um die Funktionalität neu zu erstellen, die <button> Elemente nativ bereitstellen. Die Simulation der Funktionalität von Schaltflächen mithilfe <div> von -Elementen hat zu einer unzugänglichen Erfahrung führen.