Orqestria Letöltés
← Frontend és designrendszerek adatlapja

Skill · 1.0.0 verzió

Akadálymentes felületek

Segít, hogy a felület billentyűzettel és képernyőolvasóval is használható legyen, jól olvasható színekkel, egyértelmű címkékkel és érthető hibaüzenetekkel.

web-accessibility

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Ez a skill abban segít, hogy a felület billentyűzettel, képernyőolvasóval és különböző méretű kijelzőkön is használható legyen. A teljes felhasználói folyamatban vizsgálja a kezelést, az olvashatóságot és a visszajelzéseket.

Miben segít neked?

  • Beszédes HTML-elemeket, látható mezőcímkéket, érthető hivatkozásokat és megfelelő képleírásokat használ.
  • Ellenőrzi a fókusz sorrendjét, a billentyűzetes vezérlést, a párbeszédablakokat és a hibaüzeneteket.
  • Vizsgálja a kontrasztot, a szövegnagyítást, a mobilos tördelést és a csökkentett mozgást, kézi és elérhető automatikus ellenőrzésekkel.

Például ezt kérheted

Vizsgáld át a tanulói regisztrációt és a kvízkitöltést akadálymentességi szempontból. Ellenőrizd a billentyűzetes kezelést, a mezőhibákat, a kontrasztot és a keskeny kijelzős használatot. Csak billentyűzettel regisztrálj és adj hibás kvízválaszt. A tanuló találja meg a hibát, javíthasson, és színre hagyatkozás nélkül felismerje a befejezést.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Web Accessibility (WCAG 2.2 AA)

Semantic HTML first

  • Native elements: button for actions, a href for navigation, input/select/textarea for data, table for tabular data, lists for lists. Never a clickable div.
  • Landmarks: one main, plus header, nav (labelled if several), footer.
  • One h1 per page; headings in order without skipping levels.
  • Set lang on html and a unique, descriptive title per page or route.

Keyboard and focus

  • Everything interactive works with Tab, Shift+Tab, Enter, Space, Escape, and arrow keys where the pattern expects them.
  • Never remove focus outlines without a visible replacement (:focus-visible). Focused items must not hide behind sticky headers.
  • Focus order follows visual order; no positive tabindex.
  • Dialogs: move focus in on open, keep it inside, close on Escape, return focus to the trigger. Prefer the native dialog element or the repo's accessible component.
  • Add a skip link on pages with repeated navigation. In SPAs, move focus or announce on route change.

Text, color and media

  • Contrast 4.5:1 for normal text; 3:1 for large text, icons, focus indicators and control borders.
  • Never convey meaning by color alone.
  • Alt text states the image's purpose; decorative images get alt="". Icon-only buttons need an accessible name.
  • Content reflows at 320px width and 200% text size without loss or horizontal scrolling.
  • Captions for video; no autoplaying audio.

Forms and errors

  • Every control has a visible label bound with for/id; a placeholder is not a label. Group related controls with fieldset and legend.
  • Mark required fields in text; use autocomplete attributes for personal data.
  • Errors name the field and the fix in text, link via aria-describedby, and are announced or focused on submit.
  • Do not make users re-enter data they already gave; no cognitive puzzles to log in.

ARIA only when needed

  • No ARIA beats wrong ARIA. Use it only when HTML has no native equivalent.
  • Custom widgets (tabs, combobox, menu) follow the WAI-ARIA Authoring Practices roles, states and keys.
  • Keep states in sync: aria-expanded, aria-selected, aria-checked, aria-current. Use aria-live for async status messages.

Motion and targets

  • Respect prefers-reduced-motion: reduce or remove non-essential animation.
  • Nothing flashes more than three times per second.
  • Pointer targets at least 24x24 CSS px; offer a non-drag alternative to drag actions.

Test

  • Keyboard-only pass through the changed flow.
  • Screen reader pass (VoiceOver or NVDA) on changed components: names, roles, states, announcements.
  • Check that status messages (toasts, inline errors, loading and saved states) are announced, and that the page stays usable in forced-colors (high contrast) mode and at 400% zoom.
  • Run the automated checker the repo has (axe, jest-axe, Playwright axe, Lighthouse). Automated tools catch only part of the problems.

Before you finish

  • Semantic elements, headings and landmarks correct.
  • Full keyboard operation with visible focus.
  • Contrast and non-color cues meet AA.
  • Every input and icon button has an accessible name; errors are announced.
  • Reduced motion respected.
  • Keyboard, screen reader and automated checks done.

Csomagban lévő fájlok 1

  • SKILL.md