Proč <button> není jen divné <div>

Každý vývojář to zná. Stavíte knihovnu komponent a designer chce tlačítko. Ne ledajaké – speciální. S vlastním stylem, originálním efektem při najetí myší, možná s gradientem, který se mění při stisku. Tak sáhnete po <div>, přidáte CSS a hotovo.

Vypadá to dokonale ve Figma. Funguje v demo verzi. Pak ale nějaký reálný uživatel prochází vaše rozhraní pomocí klávesnice, odešle formulář.enterem, nebo naviguje pomocí čtečky obrazovky – a všechno se rozpadne.

Problém není v CSS. Problém je, že jste nechali <div> dělat práci, na kterou nikdy nebylo stavěné.

Div, který se chtěl stát tlačítkem

Tohle je typický scénář: potřebujete tlačítko v určitém stylu. Vytvoříte <div>, přidáte class="btn", stylujete, dokud to neodpovídá návrhu. Vypadá skvěle. Pak ale potřebujete, aby to dělalo věci jako tlačítko.

Tak přidáte click handler. Pak hover state. Pak focus ring pro klávesnicové uživatele. Pak zjistíte, že nefunguje Space a Enter, takže přidáte keydown listenery. Tlačítko se má někdy deaktivovat, takže přidáte .disabled třídu, která snad blokuje správné interakce. Někde v tom všem přidáte role="button" a tabindex="0", aby přístupnost aspoň trochu fungovala.

Gratuluju. Vytvořili jste objekt ve tvaru tlačítka, který vyžaduje zhruba 200 řádků JavaScriptu, abyste se přiblížili tomu, co by vám prohlížeč dal zadarmo.

Tohle je přesně ten "daň z podvodu" za špatné architektonické rozhodnutí. Každý řádek workaround kódu je úrok z původní volby použít špatný element.

Neviditelná smlouva

Tady je pointa ohledně nativních HTML elementů: přicházejí s celou sadou interakčního chování, o kterém většina vývojářů nikdy nepřemýšlí – dokud není pryč.

Když použijete skutečný <button>, dostanete:

• Automatické klávesnicové ovládání – Enter a Space fungují přesně tak, jak uživatelé očekávají
• Správnou správu focusu – Je součástí přirozeného pořadí tabulátoru, lze na něj programově přesunout focus
• Chování pro deaktivovaný stav – Blokuje veškerou interakci, nejde na něj focusnout, čtečky ho oznamují jako deaktivovaný
• Účast ve formulářích – Odesílá formuláře, respektuje validaci, účastní se form.reset()
• Přístupnostní sémantiku – Čtečky obrazovky ho oznamují jako tlačítko bez dalších ARIA atributů
• Platformní konvence – Uživatelé už vědí, jak se tlačítka chovají, protože se všude chovají stejně

S <div> převlečeným za tlačítko dostanete... CSS. Všechno ostatní je na vás. A tady je ten špinavý secret: ať jste sebepozornější, vaše implementace bude horší než to, co prohlížeče poskytují. Prohlížeče mají týmy inženýrů, kteří optimalizují toto chování napříč platformami, edge cases a asistivními technologiemi. Váš custom button má jen vás.

Opravdová otázka není "Dokážu to nastylovat?"

Tady se spolupráce designérů a vývojářů buď ukáže v nejlepším světle, nebo vytvoří technický dluh. Vývojáři často chápou "sémantické HTML" jako "přijmout ošklivé výchozí hodnoty prohlížeče." To ale vůbec není to, o čem mluvíme.

Otázka není "dokážu to udělat vlastní vzhled?" Samozřejmě že jo. Otázka je: "které nativní chování by mělo styling přežít?"

<button> může mít jakýkoliv vizuální vzhled, jaký chcete. Můžete odstranit veškerý výchozí styl pomocí appearance: none. Můžete přidat gradienty, stíny, animace, vlastní fonty – cokoliv design vyžaduje. Interakční kontrakt prohlížeče nezávisí na tom, jak tlačítko vypadá.

Co ale nejde snadno udělat s <div>, je replikovat to, co prohlížeč dává automaticky. Takže si vyberte správné bitvy: věnujte svoji engineering energii tomu, co dělá váš produkt unikátním, ne vynalézání tlačítek.

Stavění pro skutečný web

Vaši uživatelé nepoužívají váš produkt v izolaci. Přepínají mezi poli, zatímco mají ruce na klávesnici. Používají hlasové ovládání k navigaci. Zvětšují obrazovku na 300 %, protože jim to vyhovuje. Mají různé prohlížeče, různé operační systémy, různé asistivní technologie.

Webová platforma vám dává obrovský náskok se sémantickým HTML. Nativní elementy jsou přístupné defaultně, ovladatelné klávesnicí defaultně, multiplatformní defaultně. Když bojujete proti této infrastruktuře, nevytváříte si jen víc práce – vytváříte komponenty, které budou selhávat v subtétních ohledech pro skutečné uživatele.

Příště, až budete sahat po <div> s role="button", zeptejte se sami sebe: stavím něco, co genuinně potřebuje vlastní implementaci, nebo se jen bojím tagu <button>? Protože nudné řešení je obvykle to správné. A "prohlížeč to řeší správně" je feature, ne limitace.

Sémantický web není o následování pravidel. Je o používání nástrojů, které jsou pro danou práci stavěné – a o tom, že svoji energii věnujete tam, kde to opravdu dává smysl.