Native versus custom: wanneer u een echt element kiest

Bij elk bedieningselement sta je voor één keuze: gebruik een native HTML-element of bouw er zelf een. Native wint bijna altijd.

Een native button kan focus krijgen, kan met muis, toetsenbord en aanraking worden geactiveerd en wordt correct aangekondigd. Je schrijft één tag en het platform doet de rest.

Maak een span op zodat die eruitziet als een button, en hij heeft nog steeds geen rol, geen focus en geen toetsenbordondersteuning. Hij misleidt alleen het oog.

Om een aangepast besturingselement te laten werken, moet je een rol, tabindex en toetsafhandelaars voor Enter en Space toevoegen. Dat is veel code om één tag na te bouwen.

Zelfs zorgvuldige aangepaste besturingselementen missen randgevallen: focusranden, uitgeschakelde statussen en aanraking. Het native element handelt dit allemaal al af.

Dit geldt voor het hele platform. Een echte select, checkbox of details biedt gedrag en toegankelijkheid die een nagebouwde div nooit volledig kan evenaren.

Native formulierbesturingselementen worden samen met het form verzonden, valideren zichzelf en worden automatisch aan een label gekoppeld. Dat met de hand nabouwen is het zelden waard.

Kies alleen voor aangepast als er geen native element bestaat voor het patroon, zoals een interface met tabbladen of een boomstructuur. Volg dan zorgvuldig een bewezen ontwerppatroon.

Bang dat een echte knop er saai uitziet? Je kunt native elementen uitgebreid stylen met CSS. Behoud de semantiek en geef de vormgeving elke gewenste uitstraling.

Als je het echte element gebruikt, heb je minder JavaScript en minder fouten, en blijft je besturingselement zonder extra werk werken met updates van browsers en ondersteunende technologie.

Maak dit je standaard: eerst native, en aangepast alleen als laatste redmiddel. Het webplatform biedt enorm veel toegankelijkheid, dus laat het zijn werk doen.

Kies eerst native: een echte knop of invoer biedt je gratis focus, toetsen en semantiek. Kies alleen voor aangepast als er geen element bestaat, en style native naar hartenlust. 🎉