Varför du borde sluta använda <div> som knapp

Alla har varit där. Du bygger en komponentbibliotek och designen kräver en knapp. Inte vilken knapp som helst — en speciell knapp. Custom styling, ett unikt hover-överdrag, kanske en gradient som förändras vid tryck.

Så du tar en <div>, lägger till lite CSS, och säger att det är klart.

Den ser perfekt ut i Figma. Den fungerar i din demo. Sen försöker en riktig användare tabba genom gränssnittet, skicka in ett formulär med tangentbordet, eller navigera sidan med en skärmläsare — och allting rasar samman.

Problemet är inte din CSS. Problemet är att du bad en <div> att utföra ett jobb den aldrig var designad för.

Den osynliga pakten

Native HTML-element kommer med en hel interaktionspaktsom de flesta utvecklare aldrig tänker på förrän den saknas.

När du använder en riktig <button> får du:

• Automatisk tangentbordshantering — Enter och Space fungerar exakt som användarna förväntar sig
• Korrekt fokushantering — Den hamnar i tab-ordningen naturligt, kan få fokus programmässigt
• Inaktiverat tillstånd — Blockerar all interaktion, går inte att fokusera, presenteras som inaktiverad
• Formulärdeltagande — Skickar formulär, respekterar validering, deltar i form.reset()
• Tillgänglighetssemantik — Skärmläsare presenterar den som en knapp utan extra ARIA
• Plattformskonventioner — Användare vet redan hur knappar beter sig för att knappar beter sig konsekvent överallt

Med en <div> utklädd till knapp får du... CSS:en. Allt annat är ditt ansvar att implementera.

Den verkliga frågan handlar inte om styling

Det här är var design-utvecklarsamarbete antingen lyckas eller skapar teknisk skuld. Utvecklare tolkar ofta "semantisk HTML" som "att acceptera webbläsarens fula standardutseende". Det är inte alls vad vi pratar om.

Frågan är inte "kan jag få det att se custom ut?" — det kan du absolut. Frågan är: "vilka nativa beteenden borde överleva stylingen?"

En <button> kan ha vilket visuellt uttryck du vill. Du kan ta bort all standardstyling med appearance: none. Du kan lägga till gradients, skuggor, animationer, egna typsnitt — vad designen än kräver. Webbläsarens interaktionspakt bryr sig inte om hur din knapp ser ut.

Vad du däremot inte enkelt kan göra med en <div> är replikera det webbläsaren ger dig gratis.

Bygg för den riktiga webben

Dina användare använder inte produkten i ett vakuum. De tabbar mellan fält med händerna på tangentbordet. De använder röststyrning för att navigera. De förstorar skärmen till 300% för att det fungerar för dem. De har olika webbläsare, olika operativsystem, olika hjälpmedel.

Webbplattformen ger dig en enorm försprång med semantisk HTML. Nativa element är tillgängliga som standard, tangentbordsnavigerbara som standard, plattformsoberoende som standard.

Nästa gång du ska ta tag i en <div> med role="button", fråga dig själv: bygger jag något som verkligen behöver en custom implementation, eller är jag bara rädd för <button>-taggen?

Den tråkiga lösningen är oftast den rätta. Och "webbläsaren hanterar det korrekt" är en feature, inte en begränsning.

Den semantiska webben handlar inte om att följa regler. Det handlar om att använda verktygen som byggdes för jobbet — och spendera din energi där det faktiskt gör skillnad.