Im letzten Beitrag Blazor Libraries im Vergleich haben wir bei MatBlazor implizite HTML-Label als Nachteil aufgeführt. Das Label-Element in HTML hat die Aufgabe das zugeordnete Eingabe-Element zu beschreiben. Es dient somit zur Identifizierung des Elements.

Für die Identifizierung gibt es zwei Ansätze, aber was genau ist der Unterschied zwischen expliziten und impliziten HTML-Label?

Explizite HTML-Label

Beim expliziten Label-Ansatz wird das for – Attribut verwendet. Der Wert zeigt auf die Id des zugehörigen Eingabe-Elements.

<label for="firstname">Vorname<label>
<input type="text" name="firstname" id="firstname">

Kommt eine clientseitige Validierung hinzu, so können dazu die passenden ARIA-Attribute mit einem div oder span Element verwendet werden. Der entsprechende Container für die Fehlermeldung bekommt ebenfalls eine Id. Das Eingabe-Element referenziert mit dem Attribut aria-describedby auf die Container-Id. Dadurch können die Eingaben auch von Screenreadern ausgewertet und zugeordnet werden.

<label for="firstname">Vorname</label>
<input type="text" name="firstname" id="firstname" aria-describedby=" firstname_error" >
<div class="error" id="firstname_error" role="alert">Fehlertext</div>

In Verbindung mit JavaScript lässt sich die Fehlermeldung zur Eingabe bei fehlgeschlagener Validierung ein- bzw. ausblenden. Diese Struktur erfüllt die Zugänglichkeitskriterien. Im End to End – Testing, zum Beispiel mit Selenium, kann dieser Ansatz die Wiederwendbarkeit von Abfüllroutinen begünstigen und Qualitätskriterien wie Zugänglichkeit beim Test mit einbeziehen. Die Testroutine kann basierend auf das Label die Id des Eingabe-Elements ermitteln, den Wert abfüllen oder auslesen und prüfen, ob der passende Fehler ein- bzw. ausgeblendet ist und bricht zum Beispiel nicht bei Anpassungen am Design (Stichwort: Brittle Feature).

Implizite Label

Bei der Verwendung des impliziten Label-Ansatzes werden die Elemente verschachtelt. Dieser Ansatz kommt häufig im Bereich von Content-Management Systemen zum Einsatz. Also da, wo den HTML-Elementen keine Id zugeordnet werden kann.

Die Struktur hat dann folgenden Aufbau:

<label>Vorname
    <input type="text" name="firstname">
    <div class="error">Fehlertext</div>
</label>

Bisher wurde dieser Ansatz in der Entwicklung von Anwendungen nicht empfohlen. Im Bereich der Zugänglichkeit gibt es immer wieder mal Berichte über die Schwierigkeiten bei der Bedienung mit Screenreadern. Zum Beispiel nimmt das Label mehrere Zustände in der Darstellung an, wie die einfache Beschreibung für das Eingabe-Element und im Fehlerfall zusätzlich die Hinweise über den Fehler. Visuell ist dieser Unterschied zwar nicht spürbar, die Logik für einen End 2 End Test wird dadurch jedoch komplizierter. Es muss zum Beispiel innerhalb des Labels geprüft werden, welche Art von Eingabe-Element in der Verschachtelung vorhanden ist, damit die Werte abgefüllt bzw. ausgelesen werden können. Die Testlogik wird dadurch aufwändiger.

Fazit

Unser aktueller Kenntnisstand geht bei der Anwendungsentwicklung immer noch davon aus, dass für eine bessere Zugänglichkeit der explizite Label-Ansatz verwendet werden soll. Beim End 2 End Test mit Selenium vereinfacht dieser Ansatz auch die projektübergreifende Testautomatisierung aus der Anwenderperspektive. Es erfüllt in der Kategorie der Off-Stage-Stakeholder das Behindertengleichstellungsgesetz von 2004 mit weniger Aufwand, an welches  staatliche Betreiber und konzessionierte Unternehmen gebunden sind.

Welchen Ansatz bevorzugst du?