Barrierefreie Web-Formulare mit individuellem Design gestalten

Erstellt am 26.02.2022

HTML ist von Haus aus barrierefrei. Zumindest wenn du native Elemente verwendest. Sehr oft implementieren Entwickler:innen benutzerdefinierte UI-Komponenten für Formulare, um Design-Anforderungen zu erfüllen. Dabei bleibt die Barrierefreiheit meist auf der Strecke.

In diesem Artikel zeige ich dir, wie du native Formularelemente mit CSS individuell stylen kannst. Auf diese Weise kannst du barrierefreie Web-Formulare mit einem konsistenten Look über alle Plattformen gestalten.

Pinsel und Malspachtel auf einer bunt bemalten Leinwand Foto: © Steve Johnson / pexels.com

Wenn Design-Anforderungen die Barrierefreiheit zerstören

Native Formularelemente wie input oder select sind grundsätzlich barrierefrei. Sie erhalten den Fokus, wenn Nutzer:innen die Tab-Taste drücken. Sie ermöglichen die Interaktion mit der Enter- oder Leertaste, z.B. um eine Checkbox anzuhaken. Und sie kommunizieren ihre Rolle und ihren aktuellen Status an Screenreader.

Klingt super! Wer würde jemals auf die verrückte Idee kommen, statt der nativen Formularelemente eigene UI-Komponenten mit nicht-semantischem Spaghetti-Code zu implementieren? Wie wir leider alle wissen, sind benutzerdefinierte Formularelemente weit verbreitet. Meistens sind sie nicht barrierefrei. Sehen wir uns folgendes Beispiel für eine selbstgebaute Auswahlliste an:

<div class="custom-select">
    <div class="select-trigger">
        <span>PlayStation 5</span>
        <div class="arrow"></div>
    </div>
    <div class="custom-options">
        <span class="option selected">
            PlayStation 5
        </span>
        <span class="option">Nintendo Switch</span>
        <span class="option">Xbox Series X</span>
    </div>
</div>

Dieser wilde Haufen von div und span Tags ist an sich nicht barrierefrei für Tastatur- und Screenreader-Nutzer:innen. Natürlich lässt sich das mit ARIA-Attributen und Keydown Event Listeners beheben. Doch vielen Entwickler:innen fehlt entweder dieses Wissen oder es ist ihnen schlichtweg egal. Für sie zählt vor allem eines: Die Formularelemente entsprechend der Design-Anforderungen der Kund:innen zu gestalten.

Warum das Styling von nativen Elementen herausfordernd sein kann

Das Styling von Formularelementen mit CSS war in der Vergangenheit oft schwierig. Browser wenden jeweils ihr eigenes Standard-Styling an. Formularelemente unterscheiden sich stark darin, wie einfach ihr Aussehen mit CSS angepasst werden kann. Glücklicherweise werden immer mehr veraltete Browser ausgemustert (Stichwort: Tod dem IE11), weshalb man ohne Probleme auf neue Features moderner Browser zurückgreifen kann.

Mozilla hat einen tollen Artikel über das Styling von Web-Formularen verfasst, den ihr unbedingt lesen solltet. Sie unterteilen native Formularelemente in drei Gruppen: „Die Guten“, „Die Bösen“ und „Das Hässliche“. Ich stimme großteils mit dem Artikel überein, mit Ausnahme der Einschätzung, dass Checkboxen und Radio-Buttons schwer zu stylen wären. Das war vielleicht in der Vergangenheit so, trifft aber heute nicht mehr zu. Mit modernem CSS sind der Fantasie keine Grenzen gesetzt.

Styling-Beispiel 1: Radio-Buttons

Um Radio-Buttons mit CSS umzugestalten, müsst ihr zuerst für die CSS-Eigenschaft appearance den Wert none setzen. Damit entfernt ihr das Standard-Styling des Browsers bzw. Betriebssystems. Nun könnt ihr euch kreativ austoben und sogar Zustands-Änderungen animieren:

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    position: relative;
    width: 1.4em;
    height: 1.4em;
    border: 0.15rem solid darkred;
    border-radius: 50%;
}

input[type="radio"]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: darkred;
    /* scale(0) hides the dot in unchecked state */
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center;
    transition: all 0.3s ease-in;
}

input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}

In meinem Beispiel werden Radio-Buttons im nicht ausgewählten Zustand als dunkelroter Kreis dargestellt. Mithilfe des Pseudo-Elements ::before und der Pseudo-Klasse :checked wird ein dunkelroter Punkt angezeigt, wenn der Radio-Button ausgewählt wird. Probiere es selbst in meiner Demo auf Codepen aus.

Styling-Beispiel 2: Select

Das HTML-Element select zählt zur Kategorie „Das Hässliche“. Die Formularelemente in dieser Gruppe sind problematisch, da sie von Browsern auf sehr unterschiedliche Weise dargestellt werden. Du kannst sie zu einem gewissen Grad gestalten, doch einzelne Bestandteile entziehen sich völlig dem Zugriff von CSS.

Mit der CSS-Eigenschaft appearance kannst du das Standard-Styling des select Elements grundsätzlich überschreiben. Das hat jedoch keine Auswirkungen auf die Optionen-Liste, die beim Klick auf das Element eingeblendet wird. Das Styling des HTML-Elements option mit CSS ist stark eingeschränkt und wird nur von wenigen Browsern unterstützt.

Meiner Meinung nach sind die Styling-Möglichkeiten aber ausreichend, um grundlegende Design-Anforderungen (Farbe, Schriftart etc.) zu erfüllen. In meiner Demo auf Codepen habe ich folgendes Styling angewandt:

select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    background-color: white;
    background-image:
        url('/assets/custom_arrow_for_select.svg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0.25rem solid darkred;
    padding: 0.25em;
    /* Leave enough space for the arrow on the right */
    padding-right: 2em;
}

Natives HTML ist immer besser

Mit diesem Artikel wollte ich folgendes zeigen: Wenn du die Wahl zwischen nativem HTML und benutzerdefinierten Formularelementen hast, dann entscheide dich für native HTML-Elemente. Sie sind von Haus aus barrierefrei und können ausreichend mit CSS gestylt werden.