Nativ oder benutzerdefiniert: Wann Sie ein echtes Element verwenden sollten

Bei jedem Bedienelement stehen Sie vor einer Entscheidung: Verwenden Sie ein natives HTML-Element oder erstellen Sie ein benutzerdefiniertes? Native Elemente gewinnen fast immer.

Ein nativer Button kann fokussiert und per Maus, Tastatur und Touch bedient werden und wird korrekt angesagt. Sie schreiben ein Tag, und die Plattform erledigt den Rest.

Gestalten Sie ein span so, dass es wie ein Button aussieht: Es hat weiterhin keine Rolle, keinen Fokus und keine Tastaturunterstützung. Es täuscht nur das Auge.

Damit ein benutzerdefiniertes Steuerelement funktioniert, müssen Sie eine role, tabindex und Tastenhandler für Enter und die Leertaste hinzufügen. Das ist viel Code, um ein einziges Tag nachzubilden.

Selbst sorgfältig erstellte benutzerdefinierte Steuerelemente übersehen Sonderfälle: Fokusrahmen, deaktivierte Zustände und Touch-Bedienung. Das native element kümmert sich bereits um all das.

Das gilt für die gesamte Plattform. Ein echtes select, eine Checkbox oder ein details-Element bietet Ihnen Verhalten und Barrierefreiheit, die eine div-Nachbildung niemals vollständig erreicht.

Native Formularelemente werden mit dem form übermittelt, validieren sich selbst und werden automatisch mit einem Label verknüpft. Das von Hand nachzubauen lohnt sich nur selten.

Verwenden Sie nur dann eine custom-Lösung, wenn für das Muster kein natives Element existiert, etwa bei einer Oberfläche mit Tabs oder einem Baum. Befolgen Sie dann sorgfältig ein bewährtes Authoring Pattern.

Befürchten Sie, dass ein echtes Button-Element schlicht aussieht? Sie können native Elemente mit CSS umfassend stylen. Behalten Sie die Semantik bei und ändern Sie das Aussehen ganz nach Ihren Vorstellungen.

Wenn Sie zum echten element greifen, benötigen Sie weniger JavaScript, haben weniger Fehler und erhalten kostenlos ein Steuerelement, das Browser- und Aktualisierungen unterstützender Technologien problemlos übersteht.

Machen Sie es zu Ihrer Standardregel: zuerst native, eigene Lösungen nur als letzter Ausweg. Die Webplattform bietet enorme Unterstützung für Barrierefreiheit – lassen Sie sie die Arbeit erledigen.

Wählen Sie zuerst native: Ein echter Button oder ein echtes Eingabefeld bietet Fokus, Tastaturbedienung und Semantik kostenlos. Verwenden Sie nur dann eine eigene Lösung, wenn kein passendes Element existiert, und gestalten Sie native Elemente frei. 🎉