Barrierefreie Authentifizierung – Warum und wie? (WCAG 2.2)

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>

Quellen

Keine Kommentare

You can be the first one to leave a comment.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

This site uses Akismet to reduce spam. Learn how your comment data is processed.