MP Web Studio
CSS100 din 100 disponibile
90 / 100

LECȚIA 90 DIN 100

Construiește un buton interactiv accesibil

Combină o țintă confortabilă, hover, focus vizibil, tranziție explicită și mișcare redusă.

Sursă oficialăW3C WCAG 2.2 — visible keyboard focusRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Un component robust nu se bazează pe o singură stare. Dimensiunea minimă ajută atingerea, hover oferă feedback pointerului, focus-visible păstrează navigarea cu tastatura, iar preferința de mișcare poate dezactiva tranziția.

Exemplu corect
.action { min-height: 44px; transition: background-color 160ms ease; } .action:hover { background-color: #115e59; } .action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .action { transition: none; } }

Același buton oferă feedback pentru atingere, pointer și tastatură fără a impune mișcare.

Greșeală frecventă
.action:hover { transform: scale(1.2); } .action:focus { outline: none; }

Mărirea puternică poate destabiliza interfața, iar eliminarea focusului îi blochează pe utilizatorii tastaturii.

PASUL 2 · APLICĂ

Exercițiul tău

Completează min-height 44px, tranziția fundalului 160ms ease, hover #115e59, focusul de 3px cu offset 3px și transition: none pentru mișcare redusă.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Butonul are minimum 44px înălțime.
  • Este tranziționat numai fundalul.
  • Hover folosește #115e59.
  • Focusul are outline-ul cerut.
  • Focusul are offset de 3px.
  • Mișcarea redusă elimină tranziția.
  • Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării

Fiecare regulă are o responsabilitate: dimensiune, feedback pointer, focus tastatură sau adaptarea mișcării.