A div, ami button akart lenni

Minden fejlesztő átélt már ilyet. Komponenskönyvtárat építesz, és a dizájn egy gombot igényel. Nem is akármilyet – egy különlegeset. Egyedi stílus, különleges hover effektus, lehetőleg olyan gradient, ami nyomásra eltolódik. Hátrahajítasz egy <div>-et, írsz rá némi CSS-t, kész.

Figmában tökéletes. A demódban működik. Aztán egy valódi felhasználó próbálja tab-bal végigvinni az felületet, beküld egy űrlapot billentyűzettel, vagy egy képernyőolvasóval navigál – és minden összeomlik.

A probléma nem a CSS. A probléma az, hogy egy <div>-től vártál el olyasmit, amire sosem tervezték.

A 200 sornyi "megoldás"

Nézzük, mi történik ilyenkor a gyakorlatban: szükséged van egy gombra, ami úgy néz ki, ahogy a dizájn előírja. Létrehozol egy <div>-et, adsz neki egy class="btn"-ot, és styled until it matches. Gyönyörű. De most már kell, hogy a gomb viselkedjen is gombként.

Először jön a click handler. Aztán a hover állapot. Aztán a focus ring a billentyűzetes felhasználóknak. Aztán rájössz, hogy a Space és az Enter nem működik, szóval keydown listenereket pakolsz rá. A gombot néha ki kell kapcsolni, szóval kreálsz egy .disabled class-t, ami remélhetőleg letiltja a megfelelő interakciókat. És valahol közben odateszed a role="button"-t és a tabindex="0"-t, hogy az akadálymentességi eszközök ne ignorálják teljesen a kreálmányodat.

Gratulálok. Megépítettél egy gombformájú objektumot, ami nagyjából 200 sornyi JavaScriptet igényel ahhoz, hogy megközelítse, amit a böngésző ingyen adott volna.

Ez az, amit "bérleti díjnak" nevezünk a rossz architektúrákért. Minden sornyi workaround kód a kamat a kezdeti rossz döntésre.

A láthatatlan szerződés

A natív HTML elemekkel rengeteg minden jár, amiről a legtöbb fejlesztő csak akkor szerez tudomást, amikor hiányzik.

Egy igazi <button> használatakor megkapod:

• Automatikus billentyűkezelés – Az Enter és a Space pont úgy működik, ahogy a felhasználók várják
• Megfelelő focus menedzsment – Természetesen kerül a tab sorrendbe, programozottan fókuszálható
• Disabled állapot viselkedés – Letilt minden interakciót, nem fókuszálható, letiltottként jelenti be az akadálymentességi eszközöknek
• Űrlap részvétel – Beküldi az űrlapokat, tiszteletben tartja az validációt, részt vesz a form.reset()-ben
• Akadálymentességi szemantika – A képernyőolvasó gombként jelenti be további ARIA nélkül
• Platform konvenciók – A felhasználók már tudják, hogyan működnek a gombok, mert a gombok mindenhol következetesen viselkednek

Egy gombnak öltöztetett <div>-vel... a CSS-t kapod. Minden mást neked kell megoldanod. És itt a titok: neked soha nem fog olyan jól sikerülni, mint a böngészőknek. Böngészőknek csapatnyi mérnökük dolgozik azon, hogy ezek a viselkedések minden platformon, edge case-ben és asszisztív technológiában optimálisak legyenek. A te egyedi gombodnak csak te vagy.

A valódi kérdés nem az, hogy "stylingolható-e"

Itt válik el, hogy a design-fejlesztő együttműködés either ragyog vagy technikai adósságot teremt. A fejlesztők gyakran a "szemantikus HTML"-t úgy értelmezik, hogy "el kell fogadnod a böngésző csúnya alapértelmezéseit". De nem erről van szó.

A kérdés nem az, hogy "tudom-e egyedit csinálni". Persze, hogy tudod. A kérdés az: "mely natív viselkedéseknek kell túlélniük a stylingot?"

Egy <button> bármilyen vizuális kezelést kaphat. Le lehet venni az összes alapértelmezett stílust az appearance: none-nal. Lehetséges gradient, árnyékok, animációk, egyedi betűtípusok – bármi, amit a dizájn előír. A böngésző interakciós szerződése nem érdekli, hogyan néz ki a gomb.

Amit nem tudsz könnyen megcsinálni egy <div>-vel, az a böngésző automatikus ajándéka. Szóval válassz harcot: az engineering erőfeszítésedet arra fordítsd, ami a termékedet egyedivé teszi, ne a gombok újra feltalálására.

A valódi webre építünk

A felhasználóid nem laboratóriumi körülmények közt használják a termékedet. Tab-bal ugrálnak mezők közt, miközben a kezük a billentyűzeten van. Hangvezérléssel navigálnak. 300%-ra nagyítják a képernyőt, mert az működik nekik. Különböző böngészőik, operációs rendszereik, akadálymentességi technológiáik vannak.

A web platform hatalmas előnyt ad a szemantikus HTML-lel. A natív elemek alapértelmezetten akadálymentesek, alapértelmezetten billentyűzetesen navigálhatók, alapértelmezetten platformfüggetlenek. Amikor ezt az infrastruktúrát megháborítod, nem csak több munkát vállalsz magadra – olyan komponenseket hozol létre, amik finom módokon fognak elbukni a valódi felhasználóknál.

Következő alkalommal, amikor egy <div> felé nyúlsz role="button"-nal, kérdezd meg magadtól: valóban olyasmit építek-e, ami egyedi implementációt igényel, vagy csak félek a <button> tagtől? Mert az unalmas megoldás általában a helyes. És "a böngésző helyesen kezeli" egy feature, nem limitáció.

A szemantikus web nem szabályok követéséről szól. Arról szól, hogy a munkára tervezett eszközöket használd – és az energiádat oda fordítsd, ahol tényleg számít.