A gombnak kinézetett div a képernyőolvasónak egy téglalap. Az ARIA áthidalja a rést: a role='button' megmondja, mi az, az aria-label megnevezi, az aria-expanded jelzi, nyitva-e a menü. Ez az akadálymentesítési réteg minden egyedi elemhez — tabok, dialógusok, toasztok —, amihez a HTML nem nőtt fel.
Az ARIA első szabálya: „ne használd az ARIA-t” — a natív <button> már helyesen jelenti magát, így a jó szemantikára tett ARIA legjobb esetben zaj, rosszabb esetben hazugság. Ott nyúlj érte, ahol a natív elemek tényleg nem tudják — és a rossz markup annotálása helyett inkább javítsd a markupot.
Kapcsolódó fogalmak
WCAG
A Web Content Accessibility Guidelines — a szabvány, ami meghatározza, mi teszi a webtartalmat fogyatékkal élők számára is használhatóvá; az AA-kontraszt törzsszövegre 4,5:1.
Szemantikus HTML
Olyan elemek használata, amik azt jelentik, amit tartalmaznak — nav, article, button —, hogy a képernyőolvasó, a crawler és a böngésző ingyen értse az oldalt.
Hidratáció
Az a lépés, amikor a JavaScript a böngészőben átveszi a szerveren renderelt HTML-t, és interaktívvá teszi.
Ide tartozó munkapad
Full-stackHa el tudod mondani, meg tudjuk csinálni. React és Next.js elöl, Python vagy Node mögötte, Postgres alatta, olyan helyre szállítva, aminek a futtatását megengedheted magadnak.
