Dostępność web (a11y) 2024

Co to jest dostępność web (a11y) i co to WCAG?

Dostępność web (Web Accessibility, a11y): projektowanie stron dostępnych dla wszystkich, w tym osób z niepełnosprawnościami (wzrok, słuch, motoryka, kognicja). a11y: skrót od 'accessibility' (11 liter między 'a' i 'y'). WCAG (Web Content Accessibility Guidelines): standard dostępności web (W3C). Wersje: WCAG 2.0 (2008), WCAG 2.1 (2018), WCAG 2.2 (2023), WCAG 3.0 (w opracowaniu). Poziomy WCAG: A (minimum), AA (standard), AAA (najwyższy). Większość wymaga poziomu AA. Zasady POUR: Perceivable (postrzegalny) — treść dostępna dla zmysłów. Operable (operacyjny) — UI możliwe do obsługi. Understandable (zrozumiały) — treść i UI jasne. Robust (solidny) — działa z technologiami asystywnymi. Technologie asystujące: screen readers (NVDA, JAWS, VoiceOver, TalkBack). Switch access. Zoom magnifiers. Braille displays. Keyboard-only navigation. Wymogi prawne: ADA (USA), Section 508 (US federal), WCAG 2.1 AA (EU Web Accessibility Directive, ECODESIGN). Polska: WCAG 2.1 AA dla sektora publicznego. Prywatne firmy — brak twardego obowiązku (ale rosnące wymagania). Biznesowe korzyści: SEO (semantyczny HTML). Większy rynek (1 miliard ludzi z niepełnosprawnościami). Lepsza UX dla wszystkich.

Semantyczny HTML i ARIA — podstawy dostępnego kodu?

Semantyczny HTML: właściwe elementy HTML dla właściwej treści. button dla akcji (nie div). a href dla nawigacji. h1-h6 dla nagłówków (nie div z dużym fontem). nav, main, header, footer, aside, article, section — landmarks. form, label, input — formularze. table z th, caption — tabele danych. ul/ol/li — listy. Reguła: używaj natywnych elementów przed ARIA. Natywny button ma wbudowane: role='button', focusable, Enter/Space aktywacja. ARIA (Accessible Rich Internet Applications): atrybuty rozszerzające semantykę gdy HTML niewystarczający. Trzy typy ARIA: Roles: role='dialog', role='tablist', role='combobox'. Properties: aria-label='Zamknij', aria-labelledby='dialog-title', aria-describedby='desc'. States: aria-expanded='true', aria-checked='false', aria-disabled='true', aria-hidden='true'. Kluczowe ARIA patterns: Dialog: role='dialog', aria-modal='true', aria-labelledby. Focus trap wewnątrz. Escape zamyka. Tab (tablist/tab/tabpanel). Accordion (region + aria-expanded). Combobox (input + listbox + option). Alert (aria-live='assertive' lub role='alert'). Złe użycie ARIA: div z role='button' bez tabIndex i keyboard handler. aria-label na elemencie bez tekstu (bardziej problematyczne). Nadużywanie aria-label (redundantne z tekstem). Regula: 'No ARIA is better than bad ARIA'.

Keyboard navigation i focus management — co sprawdzić?

Keyboard navigation: wszystko dostępne z klawiatury (WCAG 2.1.1). Tab — focus na kolejny element. Shift+Tab — focus na poprzedni. Enter/Space — aktywacja (button, link). Arrow keys — wewnątrz komponentów (listbox, tabs, menu). Escape — zamknięcie (dialog, dropdown). Focus visible: :focus-visible — widoczny outline. Nie usuwaj outline bez alternatywy. :focus-visible zamiast :focus (outline widoczny tylko przy klawiaturze). tabIndex: tabIndex='0' — element w naturalnej kolejności tab. tabIndex='-1' — focusable przez JavaScript (nie tab). tabIndex='1+' — unikaj (chaos). Focus management: dialog open -> move focus inside. Dialog close -> return focus to trigger. Routing change (SPA) -> move focus to main/h1. Skip links: link do main content (pierwszy element). Widoczny przy focus. 'Przejdź do treści' na początku strony. Focus trap: dialogi, drawery — focus nie wydostaje się. biblioteka: focus-trap, Radix UI robi to automatycznie. Live regions: aria-live='polite' — ogłoś po zakończeniu akcji. aria-live='assertive' — ogłoś natychmiast (pilne). role='status' (polite), role='alert' (assertive). Testowanie keyboard: przejdź przez stronę tylko Tab/Shift-Tab. Sprawdź czy focus visible. Sprawdź czy wszystkie akcje dostępne. Sprawdź focus trap w modalach.

Kontrast kolorów, czytelność i dostępność dla osób niedowidzących?

Kontrast kolorów (WCAG 1.4.3): tekst normalny: minimum 4.5:1 (AA). Duży tekst (18pt lub 14pt bold): minimum 3:1 (AA). Grafiki i elementy UI: minimum 3:1. AAA: 7:1 dla normalnego tekstu. Narzędzia: WebAIM Contrast Checker. Chrome DevTools (Accessibility panel). Colour Contrast Analyser (aplikacja). Figma plugins (Contrast, Stark). Accessibility Insights. Czytelność tekstu: line-height: 1.5 (WCAG 1.4.8). Paragraph spacing: 2x font size. Letter spacing: 0.12em. Word spacing: 0.16em. Brak wyjustowania (justified text trudny dla dysleksji). Min font size: 16px dla body (nie wymóg WCAG ale best practice). Resize text: do 200% bez utraty funkcjonalności (WCAG 1.4.4). Zoom: do 400% (WCAG 1.4.10 Reflow). Nie blokuj zoom (viewport meta: user-scalable=no). Kolorowe znaczenie: nie przekazuj informacji tylko kolorem (WCAG 1.4.1). Error: czerwona obwódka + ikona + tekst. Link: podkreślenie (nie tylko kolor). Dark mode: prefers-color-scheme media query. Automatyczny dark mode. Respektuj OS preference. Animacje i ruch: prefers-reduced-motion. @media (prefers-reduced-motion: reduce) {animation: none}. Osoby z vestibular disorders.

Testowanie dostępności — narzędzia automatyczne i manualne?

Automatyczne testowanie: axe-core: najpopularniejszy engine (Deque). @axe-core/react — integracja React. axe DevTools — Chrome/Firefox extension. Playwright + axe: await injectAxe(page). const violations = await checkA11y(page). WAVE (WebAIM): wizualizacja błędów dostępności. Ikony na stronie. Darmowe. IBM Equal Access Checker: Chrome extension. Google Lighthouse: accessibility audit. Pa11y: CLI tool. Storybook a11y addon: @storybook/addon-a11y. Per komponent audit. Vitest + axe: import {axe} from 'jest-axe'. const results = await axe(container). expect(results).toHaveNoViolations(). Manualne testowanie: Screen reader: NVDA + Firefox (Windows, bezpłatny). JAWS (Windows, komercyjny). VoiceOver (macOS/iOS, wbudowany). TalkBack (Android, wbudowany). Orca (Linux). Keyboard only: przejdź całą stronę bez myszy. Zoom 400%: Chrome, ustaw Ctrl++ do 400%. High contrast mode: Windows High Contrast / Forced Colors. Color blind simulation: Chrome DevTools Rendering. Dostępność obrazów: alt text dla informacyjnych. alt='' dla dekoracyjnych. role='img' + aria-label dla SVG. Obrazy złożone: aria-describedby + ukryty opis. WCAG 2.2 nowe kryteria: Focus Appearance (2.4.11/2.4.12). Dragging Movements (2.5.7). Target Size Minimum (2.5.8). Consistent Help (3.2.6).

Wyślij zapytanie