ByBence Academy / Akadálymentesség
Ne csak szabályos legyen. Legyen tényleg használható.
Az akadálymentesség már része a UI/UX Academynek, ezért nem készítek ugyanarra a keresési szándékra második, versengő leckesorozatot. Ez a hub a meglévő accessibility anyagokat fűzi össze egy WCAG 2.2-központú tanulási útvonallá.
6 részletes lecke
WCAG 2.2 referencia
UI/UX + színek + webfejlesztés metszete
01
Érzékelhető
A tartalom ne csak egyetlen érzékszervre vagy vizuális jelre támaszkodjon.
02
Működtethető
Billentyűzettel, fókuszkezeléssel és megfelelő célmérettel is működjön.
03
Érthető
A felület, űrlap és visszajelzés legyen következetes és kiszámítható.
04
Robusztus
Szemantikus HTML-lel és kompatibilis komponensekkel segítő technológiák számára is értelmezhető legyen.
Tanulási útvonal
Az alapoktól az ellenőrizhető UI-ig.
01
Web accessibility
A web accessibility azt jelenti, hogy a webes tartalmak és funkciók különböző képességekkel, segítő technológiákkal és beviteli módokkal is használhatók.
→
02
Színkontraszt
A színkontraszt azt méri, mennyire különül el a szöveg vagy vizuális elem a hátterétől. A megfelelő kontraszt alapvető az olvashatósághoz és a WCAG megfeleléshez.
→
03
Billentyűzetes navigáció
A billentyűzetes navigáció lehetővé teszi, hogy a felület interaktív elemei egér nélkül, például Tab, Shift+Tab, Enter, Space és nyílbillentyűk segítségével használhatók legyenek.
→
04
Focus state
A focus state vizuálisan jelzi, mely interaktív elem kapta meg a billentyűzetes fókuszt. A felhasználó ebből tudja, melyik kontroll fog reagálni a következő billentyűparancsra.
→
05
Kattintható terület mérete
A target size az interaktív elem ténylegesen kattintható vagy érinthető területének mérete. A WCAG 2.2 AA Target Size (Minimum) követelménye általánosan legalább 24×24 CSS pixeles célterületet vagy megfelelő kivételi spacinget ír le; az Enhanced AAA kritérium 44×44 CSS pixelt céloz.
→
06
Akadálymentes űrlap
Az akadálymentes űrlap programozottan kapcsolja össze a címkéket, instrukciókat és hibákat a mezőkkel, billentyűzettel kezelhető, és nem kizárólag vizuális jelekből közvetít állapotot.
→