WCAG 2.2 ist bist dato noch ein Arbeitsentwurf, aber in ein paar Monaten wird die Erweiterung voraussichtlich aufgenommen und zum neuen Standard. Dort kommt ein neues AA Kriterium hinzu, welches notwendig ist um Logins barrierefrei zu gestalten. In diesem Fall ist die Erweiterung dafür gedacht, dass Menschen mit kognitiven Beeinträchtigungen logins einfacher verwenden können und es nicht notwendig ist einen kognitiven Test zu bestehen, um sich erfolgreich einloggen zu können. Dabei ist der kognitive Test bereits damit definiert, dass es sich um das Merken von Zugangsdaten handelt oder das Lösen von mathematischen Aufgaben (oft bei Captachs in Verwendung).
Positive Beispiele
- Username und Passwort können von Passwort Manager (z.B. in Chrome) gespeichert werden
- Es ist möglich Username und Passwort mit kopierten Werten zu befüllen
- Ein Login mit einer dritten Instanz, z.B. einem oAuth Provider wie Google, ist möglich
Beispiel in HTML
In HTML ist es möglich diverse autocomplete Eigenschaften als Attribute zu setzen. Dabei gibt es einige vordefinierte Werte, welche man hier findet: Documentation
<form>
<label for="username">Username</label>
<input name="username" id="username" autocomplete="username">
<label for="password">Password</label>
<input name="password" id="password" autocomplete="current-password">
<button type="submit">Submit</button>
</form>
Example in Angular
In Angular ist es möglich eine barrierefreie Authentifizierung mit reactive und template driven Forms umzusetzen. Das Beispiel zeigt die Umsetzung mit einer reactiven Form. Wie beim required Attribute ist es auch dort notwendig, dies direkt im Template zu ergänzen. (Natürlich gibt es die Möglichkeit das Attribute auch über renderer zu setzen, sehe ich in diesem Fall aber als over engineered für die meisten Use-Cases) Full Example provided on Stackblitz
<form [formGroup]="loginFOrm">
<label for="username">Username*: </label>
<input
id="username"
type="text"
formControlName="username"
autocomplete="username"
/>
<label for="password">password*: </label>
<input
id="password"
type="password"
formControlName="password"
autocomplete="current-password"
/>
</form>
Keine Kommentare