Dostępna strona internetowa to strona, z której może skorzystać jak najszersza grupa osób (bez względu na ich ograniczenia), w możliwie największym stopniu.
Od czego zacząć? Na co zwrócić szczególną uwagę?
- Tytuł strony
- Język strony
- Nagłówki
- Paragrafy
- Listy elementów
- Tabele
- Czcionka
- Kontrast
- Linki (hiperłącza)
- Zdjęcia, grafiki (treść nietekstowa)
- Materiały wideo/animacje
- Udostępnione pliki
- Formularze
Zobacz również:
- Poprawny semantycznie kod HTML
- Obsługa za pomocą klawiatury
- Zrozumiała/jednoznaczna kolejność
- Właściwości zmysłowe
- Brak utraty informacji/treści i funkcjonalności
- Dodatkowe treści wywołane wskazaniem kursora lub otrzymaniem fokusu
Wszystkie wytyczne dla dostępności treści internetowych zostały przedstawione poniżej.
Wytyczne dla dostępności treści internetowych (WCAG) 2.1
Na podstawie autoryzowanego tłumaczenie na język polski.
- 1. Postrzegalność / Perceivable
Przedstawiaj użytkownikom informacje i komponenty interfejsu w sposób dostrzegalny dla ich zmysłów.- 1.1 Alternatywa tekstowa / Text Alternatives
Zapewnij tekstowe zamienniki wszystkich treści nietekstowych, aby można je było zamienić na inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub prostszy język).- 1.1.1 Treść nietekstowa / Non-text Content (A)
- 1.2 Multimedia / Time-based Media)
Zapewnij rozwiązania alternatywne dla mediów opartych na czasie.
- 1.2.1 Tylko audio lub tylko wideo (nagranie) / Audio-only and Video-only (Prerecorded) (A)
- 1.2.2 Napisy rozszerzone (nagranie) / Captions (Prerecorded) (A)
- 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) / Audio Description or Media Alternative (Prerecorded) (A)
- 1.2.4 Napisy rozszerzone (na żywo) (AA)
- 1.2.5 Audiodeskrypcja (nagranie) / Audio Description (Prerecorded) (AA)
- 1.2.6 Język migowy (nagranie) (AAA)
- 1.2.7 Rozszerzona audiodeskrypcja (nagranie) (AAA)
- 1.2.8 Alternatywa dla mediów (nagranie) (AAA)
- 1.2.9 Tylko audio (na żywo) (AAA)
- 1.3 Możliwość adaptacji / Adaptable
Twórz treści, które mogą być prezentowane na różne sposoby bez utraty informacji czy struktur.- 1.3.1 Informacje i relacje / Info and Relationships (A)
- 1.3.2 Zrozumiała kolejność / Meaningful Sequence (A)
- 1.3.3 Właściwości zmysłowe / Sensory Characteristics (A)
- 1.3.4 Orientacja / Orientation (AA)
- 1.3.5 Określenie pożądanej wartości / Identify Input Purpose (AA)
- 1.3.6 Określenie przeznaczenia (AAA)
- 1.4 Rozróżnialność / Distinguishable
Ułatwiaj oglądanie i słuchanie treści oraz oddzielanie informacji od tła.- 1.4.1 Użycie koloru / Use of Color (A)
- 1.4.2 Kontrola odtwarzania dźwięku / Audio Control (A)
- 1.4.3 Kontrast (minimum) / Contrast (Minimum) (AA)
- 1.4.4 Zmiana rozmiaru tekstu / Resize text (AA)
- 1.4.5 Obrazy tekstu / Images of Text (AA)
- 1.4.6 Kontrast (wzmocniony) / Contrast (Enhanced) (AAA)
- 1.4.7 Niska głośność lub bez dźwięków w tle (AAA)
- 1.4.8 Prezentacja wizualna (odstępy, justowanie) (AAA)
- 1.4.9 Obrazy tekstu (bez wyjątków) (AAA)
- 1.4.10 Dopasowanie do ekranu / Reflow (AA)
- 1.4.11 Kontrast elementów nietekstowych / Non-text Contrast (AA)
- 1.4.12 Odstępy w tekście / Text Spacing (AA)
- 1.4.13 Treść spod kursora lub fokusu / Content on Hover or Focus (AA)
- 1.1 Alternatywa tekstowa / Text Alternatives
- 2. Funkcjonalność / Operable
Zapewnij, aby komponenty interfejsu użytkownika i nawigacja były możliwe do użycia
- 2.1 Dostępność z klawiatury / Keyboard Accessible
Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury.
- 2.1.1 Klawiatura / Keyboard (A)
- 2.1.2 Bez pułapki na klawiaturę / No Keyboard Trap (A)
- 2.1.3 Klawiatura (bez wyjątków) (AAA)
- 2.1.4 Jednoznakowe skróty klawiaturowe / Character Key Shortcuts (A)
- 2.2 Wystarczający czas / Enough Time
Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści.
- 2.2.1 Dostosowanie czasu / Timing Adjustable (A)
- 2.2.2 Pauza, zatrzymanie, ukrycie / Pause, Stop, Hide (A)
- 2.2.3 Bez ograniczeń czasowych (AAA)
- 2.2.4 Przerywanie (AAA)
- 2.2.5 Ponowne potwierdzenie autentyczności (AAA)
- 2.2.6 Ostrzeżenie o limicie czasu (AAA)
- 2.3 Ataki padaczki / Seizures and Physical Reaction
Prezentuj treść tak, aby nie wywoływała napadów padaczkowych.- 2.3.1 Trzy błyski lub wartości poniżej progu / Three Flashes or Below Threshold (A)
- 2.3.2 Trzy błyski (AAA)
- 2.3.3 Animacja po interakcji (AAA)
- 2.4 Możliwość nawigacji / Navigable
Zapewnij użytkownikowi narzędzia pomagające w nawigacji, znalezieniu treści i określeniu, gdzie się aktualnie znajduje.- 2.4.1 Możliwość pominięcia bloków / Bypass Blocks (A)
- 2.4.2 Tytuł strony / Page Titled (A)
- 2.4.3 Kolejność fokusu / Focus Order (A)
- 2.4.4 Cel łącza (w kontekście) / Link Purpose (In Context) (A)
- 2.4.5 Wiele dróg / Multiple Ways (AA)
- 2.4.6 Nagłówki i etykiety (Headings and Labels) (AA)
- 2.4.7 Widoczny fokus / Focus Visible (AA)
- 2.4.8 Lokalizacja (AAA)
- 2.4.9 Cel łącza (z samego łącza) / Link Purpose (Link Only) (AAA)
- 2.4.10 Nagłówki sekcji (AAA)
- 2.5 Metody obsługi / Input Modalities
Ułatwiaj użytkownikom obsługę funkcji za pomocą różnych sposobów poza klawiaturą.- 2.5.1 Gesty dotykowe / Pointer Gestures (A)
- 2.5.2 Rezygnacja ze wskazania / Pointer Cancellation (A)
- 2.5.3 Etykieta w nazwie / Label in Name (A)
- 2.5.4 Aktywowanie ruchem / Motion Actuation (A)
- 2.5.5 Rozmiar celu dotykowego (AAA)
- 2.5.6 Równoległy mechanizm wprowadzania danych (AAA)
- 2.1 Dostępność z klawiatury / Keyboard Accessible
- 3. Zrozumiałość / Understandable
Zadbaj o to, aby informacje i obsługa interfejsu były zrozumiałe.- 3.1 Możliwość odczytania / Readable
Twórz treści możliwe do odczytania i zrozumienia.
- 3.1.1 Język strony / Language of Page (A)
- 3.1.2 Język części / Language of Parts (AA)
- 3.1.3 Nietypowe słowa (AAA)
- 3.1.4 Skróty (AAA)
- 3.1.5 Poziom umiejętności czytania (AAA)
- 3.1.6 Wymowa (AAA)
- 3.2 Przewidywalność / Predictable
Twórz strony internetowe tak, aby otwierały się, wyglądały i działały w sposób przewidywalny.- 3.2.1 Po otrzymaniu fokusu / On Focus (A)
- 3.2.2 Podczas wprowadzania danych / On Input (A)
- 3.2.3 Spójna nawigacja / Consistent Navigation (AA)
- 3.2.4 Spójna identyfikacja / Consistent Identification (AA)
- 3.2.5 Zmiana na żądanie (AAA)
- 3.3 Pomoc przy wprowadzaniu informacji / Input Assistance
Pomagaj użytkownikom unikać błędów i je korygować.- 3.3.1 Identyfikacja błędu / Error Identification (A)
- 3.3.2 Etykiety lub instrukcje / Labels or Instructions (A)
- 3.3.3 Sugestie korekty błędów / Error Suggestion (AA)
- 3.3.4 Zapobieganie błędom (prawnym, finansowym, w danych) / Error Prevention (Legal, Financial, Data) (AA)
- 3.3.5 Pomoc (AAA)
- 3.3.6 Zapobieganie błędom (wszystkim) (AAA)
- 3.1 Możliwość odczytania / Readable
- 4. Solidność / Robust
Twórz treści solidnie, aby mogły być skutecznie interpretowane przez różne programy użytkownika, w tym technologie wspomagające.- 4.1 Kompatybilność / Compatible
Zapewnij jak największą zgodność z aktualnymi i przyszłymi programami użytkownika, w tym z technologiami asystującymi.- 4.1.1 Poprawność kodu / Parsing (A)
- 4.1.2 Nazwa, rola, wartość / Name, Role, Value (A)
- 4.1.3 Komunikaty o stanie / Status Messages (AA)
- 4.1 Kompatybilność / Compatible