Vorherige

Nächste

Übung: Beheben von Problemen mit der Formularbarrierefreiheit

Abgeschlossen

In dieser Übung verwenden Sie Accessibility Insights for Web, um Barrierefreiheitsprobleme in einem Formular zu ermitteln und zu beheben.

Installieren der Accessibility Insights for Web-Browsererweiterung

1. Navigieren Sie in Chrome oder Microsoft Edge zur Seite Accessibility Insights for Web.
2. Klicken Sie auf die Installationsschaltfläche für Ihren Browser.
3. Wenn die Erweiterungsseite angezeigt wird, klicken Sie auf die entsprechende Schaltfläche für Ihren Browser (Abrufen für Microsoft Edge, Zu Chrome hinzufügen für Chrome), um die Erweiterung zu installieren.

Untersuchen des Formulars mithilfe von FastPass

Für diese Übung verwenden Sie das FastPass-Tool. Sie führen drei Tests in FastPass durch, um in weniger als fünf Minuten die häufigsten Probleme hinsichtlich der Barrierefreiheit zu ermitteln.

1. Öffnen Sie das Launchpad für Accessibility Insights for Web, indem Sie in der Symbolleiste des Browsers auf die Schaltfläche für die Erweiterung klicken. Sie können auch die Tastenkombination STRG+UMSCHALT+K (⌘+UMSCHALT+K für macOS) verwenden.

   

2. Klicken Sie auf den Link FastPass. Ein zweites Fenster wird geöffnet, in dem die Barrierefreiheitsprobleme aufgelistet werden, die FastPass mithilfe automatisierter Überprüfungen erkannt hat.

   

   Bei den automatisierten Überprüfungen wurden viele Fehler erkannt. In dieser Übung konzentrieren wir uns auf das Formular.

3. Es gibt zwei Möglichkeiten, mit Fehlermeldungen zu interagieren. Sie können die Liste im FastPass-Tool verwenden oder die Fehlermeldungen auf der Webseite auswählen. In diesem Fall listet das FastPass-Tool Fehler auf der gesamten Seite auf. Dies kann etwas unübersichtlich sein, wenn Sie sich auf das Formular konzentrieren möchten. Wir verwenden jetzt die Fehlermeldung auf der Seite.

   Klicken Sie auf das Ausrufezeichen rechts neben der Bezeichnung First Name (Vorname).

   

   Die Benutzeroberfläche zeigt an, dass diese Bezeichnung einen geringen Kontrast aufweist. Sie werden auch darauf aufmerksam gemacht, dass Sie die Pflichtfelder in diesem Formular mithilfe einer Farbcodierung kennzeichnen.

   Wenn Sie auf die Fehlersymbole für die weiteren Bezeichnungen klicken, sehen Sie, dass sie alle einen geringen Kontrast aufweisen. Sehen wir uns den HTML-Code für den Abschnitt First Name des Formulars an, um das Farbkontrastproblem zu verstehen.

   <div class="row">
     <div class="col-4 text-primary">
       First Name
     </div>
     <div class="col-8">
       <input type="text" id="Name">
     </div>
   </div>
   

   Hier sehen Sie, dass für die Bezeichnung First Name die Bootstrap-Klasse text-primary verwendet wird, um durch eine hellblaue Textfarbe auf ein Pflichtfeld hinzuweisen. Entfernen Sie die text-primary-Klasse, und fügen Sie stattdessen wie folgt dem <input>-Tag ein required-Attribut hinzu.

   <div class="row">
     <div class="col-4">
       First Name
     </div>
     <div class="col-8">
       <input type="text" id="Name" required>
     </div>
   </div>
   

4. Führen Sie die Anwendung und dann FastPass erneut aus. Sie sehen, dass der Fehler für die Bezeichnung First Name behoben wurde.

   

   Sehr gut! Da Sie die Vorgehensweise nun kennen, können Sie für die übrigen Bezeichnungen ebenfalls eine Korrektur durchführen.

5. Überprüfen Sie den HTML-Code für den Rest des Formulars. Sie können sehen, dass die Bezeichnungen entweder text-primary oder text-black-50 für die Farbe verwenden. Entfernen Sie diese Attribute, und fügen Sie den Eingabefeldern Last Name und Email Address das Attribut required hinzu.

   <form name="CustomerInfo">
     <div class="container w-50 p-3">
       <div class="row">
         <div class="col-4">
           First Name
         </div>
         <div class="col-8">
           <input type="text" id="Name" required>
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           Last Name
         </div>
         <div class="col-8">
           <input type="text" id="Name" required>
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           Phone
         </div>
         <div class="col-8">
           <input type="text" id="Phone">
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           Birthday
         </div>
         <div class="col-8">
           <input type="text" id="Birthday">
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           Email Address
         </div>
         <div class="col-8">
           <input type="text" id="Email" required>
         </div>
       </div>
       <div class="button">
         <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
           Submit Form
         </a>
       </div>
     </div>
   </form>
   

6. Führen Sie die Anwendung aus, und zeigen Sie FastPass erneut an. Sie können sehen, dass alle Fehlermeldungen für Bezeichnungen behoben wurden.

7. Obwohl es nicht unbedingt erforderlich ist, können Sie weiterhin Hinweise für die Pflichtfelder anzeigen. Aktualisieren Sie den <style>-Block am oberen Rand der Seite, um Regeln für Pflicht- und optionale Felder einzuschließen.

   input:optional {
     border-color: #ccc;
   }
   input:required {
     border-color: mediumblue;
   }
   

   Die Pflichtfelder werden nun durch einen blauen Rahmen gekennzeichnet.

8. Jetzt können Sie das Formularelement korrigieren. Wenn Sie die Fehleranzeige für das Feld First Name auswählen, werden zwei Fehler angezeigt. Im ersten Fehler wird angegeben, dass das <input>-Tag des Formulars kein eindeutiges Attribut aufweist. Dieser Attributwert ist ein Problem, da HTML-IDs immer als eindeutig betrachtet werden und Hilfstechnologien oft nur auf das erste Element reagieren.

   

   Ein Blick in den Quellcode zeigt, dass Name sowohl als ID für das Feld First Name als auch für das Feld Last Name verwendet wurde.

   <div class="col-8">
       <input type="text" id="Name" required>
     </div>
   </div>
   <div class="row">
     <div class="col-4">
       Last Name
     </div>
     <div class="col-8">
       <input type="text" id="Name" required>
     </div>
   </div>
   

   Ändern Sie die IDs in FirstName bzw. LastName.

   <div class="col-8">
       <input type="text" id="FirstName" required>
     </div>
   </div>
   <div class="row">
     <div class="col-4">
       Last Name
     </div>
     <div class="col-8">
       <input type="text" id="LastName" required>
     </div>
   </div>
   

9. Führen Sie die Anwendung aus, und führen Sie eine erneute FastPass-Überprüfung durch. Wenn Sie für jedes Eingabefeld auf die Fehleranzeige klicken, sehen Sie, dass wir uns dem Ziel nähern. Für jedes Eingabefeld wird die gleiche Fehlermeldung angezeigt, nach der eine Bezeichnung erforderlich ist.

   

10. Ändern Sie den Text First Name so ab, dass ein <label>-Tag verwendet wird.

    <div class="row">
      <div class="col-4">
        <label for="FirstName">First Name</label>
      </div>
      <div class="col-8">
        <input type="text" id="FirstName" required>
      </div>
    </div>
    

11. Führen Sie die Anwendung aus, und führen Sie eine erneute FastPass-Überprüfung durch. Zwei Dinge sollten Ihnen auffallen. Zunächst wurde die Fehlermeldung für das FirstName-Element behoben. Zweitens wird beim Auswählen der Bezeichnung First Name nun die Eingabe First Name ausgewählt.

12. Fügen Sie den anderen Formulareingabefeldern <label>-Tags hinzu. Ihr Formularcode sollte folgendermaßen aussehen:

    <form name="CustomerInfo">
      <div class="container w-50 p-3">
        <div class="row">
          <div class="col-4">
            <label for="FirstName">First Name</label>
          </div>
          <div class="col-8">
            <input type="text" id="FirstName" required>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <label for="LastName">Last Name</label>
          </div>
          <div class="col-8">
            <input type="text" id="LastName" required>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <label for="Phone">Phone</label>
          </div>
          <div class="col-8">
            <input type="text" id="Phone">
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <label for="Birthday">Birthday</label>
          </div>
          <div class="col-8">
            <input type="text" id="Birthday">
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <label for="Email">Email Address</label>
          </div>
          <div class="col-8">
            <input type="text" id="Email" required>
          </div>
        </div>
        <div class="button">
          <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
            Submit Form
          </a>
        </div>
      </div>
    </form>   
    

    Durch diesen Code werden alle Formularfeldfehler gelöscht!

13. Nun ist es an der Zeit, die Schaltfläche Submit (Senden) zu korrigieren. Die Probleme sind hier ein geringer Kontrast (wie in der Fehlermeldung gezeigt) und ein onclick-Ereignis, das benutzerdefinierten JavaScript-Code ausführt. Sie können all dies beheben, indem Sie die Schaltfläche durch eine standardmäßige <input type="submit">-Klasse ersetzen.

    Suchen Sie diesen Code:

    <div class="button">
      <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
        Submit Form
      </a>
    </div>   
    

    Ersetzen Sie diesen durch den folgenden Code:

    <div class="text-center">
       <input class="btn btn-primary" type="submit">
    </div>   
    

Sie haben alle erforderlichen Korrekturen durchgeführt, aber es gibt noch eine weitere Verbesserung, die Sie schnell vornehmen können. Sie können die Eingabetypen von text in einen spezifischeren Typ ändern, sofern verfügbar.

1. Ändern Sie das type-Attribut für das Feld Phone (Telefon) in tel.

2. Ändern Sie das type-Attribut für das Feld Birthday (Geburtstag) in date.

3. Ändern Sie das type-Attribut für das Feld Email in email. Der fertige Code für das Formular sollte nun wie folgt aussehen.

   <form name="CustomerInfo">
     <div class="container w-50 p-3">
       <div class="row">
         <div class="col-4">
           <label for="FirstName">First Name</label>
         </div>
         <div class="col-8">
           <input type="text" id="FirstName" required>
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           <label for="LastName">Last Name</label>
         </div>
         <div class="col-8">
           <input type="text" id="LastName" required>
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           <label for="Phone">Phone</label>
         </div>
         <div class="col-8">
           <input type="tel" id="Phone">
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           <label for="Birthday">Birthday</label>
         </div>
         <div class="col-8">
           <input type="date" id="Birthday">
         </div>
       </div>
       <div class="row">
         <div class="col-4">
           <label for="Email">Email Address</label>
         </div>
         <div class="col-8">
           <input type="email" id="Email" required>
         </div>
       </div>
       <div class="text-center">
          <input class="btn btn-primary" type="submit">
       </div>
     </div>
   </form>   
   

4. Führen Sie die Anwendung aus, und überprüfen Sie sie mit FastPass. Sie werden feststellen, dass Sie das Erlebnis für alle Benutzer verbessert und gleichzeitig Probleme mit der Barrierefreiheit behoben haben. Für das neue Formular werden keine Fehler in FastPass angezeigt, und es enthält ohne weiteren Code browsernative Eingabesteuerelemente mit Validierung sowie eine Pflichtfeldüberprüfung.

   

Weiter