Amanoba Logo
Back to Course

Hozzáférhetőség tervezési alapszabály

Day 10 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

WCAG-alapokat építesz a rendszerbe: kontraszt, fókusz, billentyűkezelés, mozgás, olvashatóság.

Tanulási cél

  • WCAG alapok: kontraszt, fókusz, billentyű-navigáció, ARIA.
  • Prefers-reduced-motion figyelembevétele.
  • Alt szövegek, űrlap label kötelező szabályai.
  • Checklistet készítesz a Playbookhoz.

Miért fontos

  • Jogszabály, reputáció, inkluzivitás.
  • Jobb használhatóság mindenkinek.
  • A rendszer nem lehet „szép, de használhatatlan”.

Magyarázat

  • Kontraszt: szöveg 4.5:1 (kis szöveg 7:1).
  • Fókusz: látható, billentyűvel elérhető.
  • Billentyű-navigáció: tab sorrend, skip link.
  • MoZGÁS: prefers-reduced-motion media query.
  • ARIA: role, label, describedby alapok.

Példák

Rossz: Láthatatlan fókusz, 2:1 kontraszt, autoplay animáció.

Jó: 4.5:1 kontraszt, fókusz-gyűrű, tab sorrend, reduce-motion fallback.

Gyakorlat (vezetett, 10-15 perc)

  1. Írj A11Y checklistet: kontraszt, fókusz, tab sorrend, aria-label, alt text.
  2. Kapcsold a szín- és tipó-rendszerhez (kontraszt táblázat).
  3. Állítsd be a prefers-reduced-motion fallbackot.

Gyakorlat (önálló, 5-10 perc)

Ellenőrizd egy képernyődet a checklist ellen, készíts hibajegyet a hiányokról.

Önellenőrzés

  • Checklist készen van.
  • Kontraszt és fókusz szabály dokumentálva.
  • Reduce-motion beállítva.
  • Alt/label kötelező.

Opcionális mélyítés