Twoje Centrum Szkoleniowe

Wprowadzenie do WCAG: tworzenie dostępnych stron

WCAG (Web Content Accessibility Guidelines) to zbiór międzynarodowych wytycznych opracowanych przez W3C (World Wide Web Consortium), które mają na celu ułatwienie tworzenia stron internetowych dostępnych dla jak najszerszego grona użytkowników, w tym osób z niepełnosprawnościami. Tworzenie dostępnych stron nie tylko spełnia wymogi prawne w wielu krajach, ale przede wszystkim jest wyrazem szacunku i odpowiedzialności społecznej.

Dlaczego dostępność jest ważna?

• Inkluzywność: Umożliwia korzystanie ze strony osobom z różnymi niepełnosprawnościami, takimi jak zaburzenia wzroku, słuchu, motoryki czy poznawcze.
• Zgodność z prawem: W wielu krajach istnieją regulacje prawne wymagające dostępności stron, szczególnie w sektorze publicznym.
• Lepsze doświadczenie użytkownika: Dostępne strony są zazwyczaj bardziej czytelne i łatwiejsze w nawigacji dla wszystkich użytkowników.
• SEO: Wiele praktyk dostępności pokrywa się z optymalizacją dla wyszukiwarek, co może poprawić pozycję strony w wynikach wyszukiwania.

Czym jest WCAG?

WCAG (Web Content Accessibility Guidelines) to zestaw wytycznych, które mają pomóc twórcom stron internetowych w tworzeniu treści dostępnych dla jak najszerszego grona użytkowników.

Aktualna wersja to WCAG 2.1, która zawiera 13 wytycznych zorganizowanych wokół czterech głównych zasad, znanych jako POUR:

1. Perceivable (Postrzegalność): Informacje i komponenty interfejsu muszą być przedstawione w sposób, który może być zauważony przez użytkowników.
2. Operable (Operacyjność): Komponenty interfejsu i nawigacja muszą być dostępne do obsługi.
3. Understandable (Zrozumiałość): Informacje i obsługa interfejsu muszą być zrozumiałe.
4. Robust (Solidność): Treść musi być wystarczająco solidna, aby mogła być prawidłowo interpretowana przez różne narzędzia, w tym technologie asystujące.

Każda wytyczna zawiera szczegółowe kryteria sukcesu, które są podzielone na trzy poziomy zgodności:

• Poziom A: Podstawowy poziom dostępności.
• Poziom AA: Poziom zalecany jako minimalny dla większości stron.
• Poziom AAA: Najwyższy poziom dostępności.

Zasady i wytyczne WCAG

1. Perceivable (Postrzegalność)

Wytyczna 1.1: Treść nietekstowa

Kryterium sukcesu 1.1.1: Dostarcz tekst alternatywny dla wszelkich treści nietekstowych.

Praktyczne zastosowanie:

• Obrazki: Dodaj atrybut alt do tagów <img> z opisem obrazka.

<img src="logo.png" alt="Logo firmy XYZ">

• Dekoracyjne obrazki: Jeśli obrazek jest czysto dekoracyjny, użyj pustego atrybutu alt.

<img src="dekoracja.png" alt="">

Wytyczna 1.3: Możliwość dostosowania

Kryterium sukcesu 1.3.1: Informacje, struktura i relacje powinny być programowo określone lub dostępne w tekście.

Praktyczne zastosowanie:

• Semantyczny HTML: Używaj odpowiednich znaczników HTML do strukturyzacji treści (np. <header>, <nav>, <main>, <section>, <article>, <footer>).
• Listy i tabele: Używaj znaczników <ul>, <ol>, <table> do prezentacji list i tabelarycznych danych.

Wytyczna 1.4: Możliwość odróżnienia

Kryterium sukcesu 1.4.3: Minimalny kontrast tekstu i tła powinien wynosić co najmniej 4.5:1.

Praktyczne zastosowanie:

• Kontrast kolorów: Upewnij się, że kolor tekstu i tła zapewnia wystarczający kontrast.
• Testery kontrastu: Używaj narzędzi do sprawdzania kontrastu, takich jak WebAIM Contrast Checker.

2. Operable (Operacyjność)

Wytyczna 2.1: Dostęp z klawiatury

Kryterium sukcesu 2.1.1: Zapewnij dostęp do wszystkich funkcjonalności strony za pomocą klawiatury.

Praktyczne zastosowanie:

• Elementy interaktywne: Używaj znaczników <button>, <a> (z atrybutem href), które są domyślnie dostępne z klawiatury.
• Unikaj zablokowanych elementów: Nie blokuj możliwości fokusowania elementów za pomocą tabindex="-1".

Wytyczna 2.4: Nawigowalność

Kryterium sukcesu 2.4.1: Dostarcz mechanizmy pozwalające na pominięcie bloków treści powtarzających się na wielu stronach.

Praktyczne zastosowanie:

• Link "Przejdź do treści": Dodaj ukryty link na początku strony, który pozwala użytkownikom szybko przejść do głównej treści.

  <a href="#main" class="skip-link">Przejdź do treści</a>

   

• Stylizacja linku "Przejdź do treści": Upewnij się, że link jest widoczny po fokusowaniu.

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
}

.skip-link:focus {
  top: 0;
}

3. Understandable (Zrozumiałość)

Wytyczna 3.1: Czytelność

Kryterium sukcesu 3.1.1: Określ język strony.

Praktyczne zastosowanie:

• Atrybut lang: Ustaw język dokumentu w znaczniku <html>.

<html lang="pl">

Wytyczna 3.2: Przewidywalność

Kryterium sukcesu 3.2.3: Zapewnij, że nawigacja jest spójna na wszystkich stronach.

Praktyczne zastosowanie:

• Spójna nawigacja: Upewnij się, że menu i elementy nawigacyjne mają taką samą kolejność i strukturę na każdej stronie.

4. Robust (Solidność)

Wytyczna 4.1: Kompatybilność

Kryterium sukcesu 4.1.1: Upewnij się, że elementy są poprawnie sformatowane i zamknięte.

Praktyczne zastosowanie:

• Poprawny kod HTML: Waliduj swój kod za pomocą narzędzi takich jak W3C Markup Validation Service.
• Atrybuty: Używaj prawidłowych atrybutów i wartości w znacznikach.

Praktyczne wskazówki tworzenia dostępnych stron

1. Tekst alternatywny dla obrazków

• Opisuj funkcję obrazka: Tekst alternatywny powinien opisywać, co obrazek przedstawia lub jaką pełni funkcję.
• Unikaj słów "obrazek", "grafika": Czytniki ekranu informują użytkownika, że jest to obrazek.

2. Nagłówki i struktura treści

• Hierarchia nagłówków: Używaj nagłówków od <h1> do <h6> w odpowiedniej kolejności, aby odzwierciedlić strukturę treści.
• Nie pomijaj poziomów nagłówków: Nie przechodź bezpośrednio z <h1> do <h3>.

3. Formularze

• Etykiety pól: Używaj znacznika <label> powiązanego z polem formularza za pomocą atrybutu for.

<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email">

• Instrukcje i komunikaty o błędach: Zapewnij jasne instrukcje i komunikaty o błędach, które pomogą użytkownikowi poprawić dane.

4. Kontrast kolorów

• Sprawdź kontrast: Upewnij się, że tekst jest czytelny na tle i spełnia minimalne wymagania kontrastu.
• Nie polegaj wyłącznie na kolorze: Nie używaj koloru jako jedynego środka przekazywania informacji (np. zaznaczenie błędnych pól na czerwono bez dodatkowej informacji).

5. Multimedia

• Napisy do filmów: Zapewnij napisy dla treści wideo.
• Transkrypcje audio: Dostarcz transkrypcje dla treści audio.

6. Responsywność i powiększanie

• Skalowanie treści: Upewnij się, że strona jest czytelna po powiększeniu do 200%.
• Responsywny design: Projektuj strony, które dostosowują się do różnych rozmiarów ekranu.

7. Unikanie migających elementów

• Bezpieczne animacje: Unikaj treści, które migają z częstotliwością między 2 a 55 Hz, aby zapobiec wywołaniu ataków epilepsji.

Testowanie dostępności

1. Walidatory i narzędzia automatyczne

• WAVE Web Accessibility Evaluation Tool: https://wave.webaim.org/
• Axe DevTools: Wtyczka do przeglądarki umożliwiająca analizę dostępności.

2. Testy manualne

• Nawigacja klawiaturą: Sprawdź, czy możesz nawigować po stronie za pomocą klawiatury (klawisze Tab, Enter, Strzałki).
• Czytniki ekranu: Przetestuj stronę za pomocą czytnika ekranu, takiego jak NVDA (Windows) czy VoiceOver (macOS).

3. Symulatory

• Symulacja wad wzroku: Narzędzia takie jak Funkify pozwalają symulować różne rodzaje niepełnosprawności wzrokowych.

Dobre praktyki i unikanie błędów

1. Unikaj używania tylko obrazków do przekazywania informacji

• Jeśli obrazek zawiera tekst, rozważ użycie tekstu HTML zamiast niego lub zapewnij odpowiedni tekst alternatywny.

2. Używaj jasnych i prostych języków

• Pisząc treści, używaj prostego języka i krótkich zdań.

3. Zapewnij wystarczający czas na interakcje

• Jeśli strona zawiera elementy czasowe (np. karuzele), upewnij się, że użytkownik może je zatrzymać lub wydłużyć czas.

4. Unikaj automatycznego odtwarzania dźwięku

• Dźwięk odtwarzany automatycznie może przeszkadzać użytkownikom korzystającym z czytników ekranu.

5. Zapewnij widoczny fokus

• Elementy interaktywne powinny mieć wyraźny styl fokusu, aby użytkownicy korzystający z klawiatury wiedzieli, który element jest aktywny.

a:focus,
button:focus,
input:focus {
  outline: 2px solid #005fcc;
}

Przykładowe wdrożenie dostępnej strony

Struktura HTML

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Dostępna strona</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="#main-content" class="skip-link">Przejdź do treści</a>
  <header>
    <h1>Moja dostępna strona</h1>
    <nav>
      <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content">
    <article>
      <h2>Tytuł artykułu</h2>
      <p>Witaj na mojej dostępnej stronie...</p>
      <img src="obrazek.jpg" alt="Opis obrazka przedstawiającego krajobraz górski">
    </article>
    <form action="#" method="post">
      <fieldset>
        <legend>Formularz kontaktowy</legend>
        <label for="name">Imię:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Wiadomość:</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Wyślij</button>
      </fieldset>
    </form>
  </main>
  <footer>
    <p>&copy; 2024 Moja dostępna strona</p>
  </footer>
</body>
</html>

Stylizacja widocznego fokusu

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid #005fcc;
}

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym jest WCAG i jakie są jego główne zasady (POUR).
• Jak stosować wytyczne WCAG w praktyce, aby tworzyć dostępne strony internetowe.
• Jak pisać dostępny kod HTML, używając semantycznych znaczników i poprawnych atrybutów.
• Jak zapewnić dostępność treści nietekstowych, takich jak obrazki i multimedia.
• Jak testować dostępność stron za pomocą narzędzi automatycznych i testów manualnych.
• Dobrych praktyk w tworzeniu dostępnych stron oraz jak unikać typowych błędów.

Tworzenie dostępnych stron internetowych jest nie tylko obowiązkiem prawnym w wielu krajach, ale przede wszystkim etycznym. Dzięki temu zapewniamy, że nasze strony są użyteczne dla wszystkich użytkowników, niezależnie od ich możliwości.

Zadania do samodzielnego wykonania

1. Przeanalizuj istniejącą stronę pod kątem dostępności:

   • Wybierz jedną ze swoich wcześniejszych stron.
   • Użyj narzędzia WAVE do analizy dostępności.
   • Zanotuj znalezione problemy i wprowadź odpowiednie poprawki.

2. Stwórz prostą stronę zgodną z WCAG:

   • Zaprojektuj stronę z nagłówkiem, główną treścią, obrazkami i formularzem.
   • Zastosuj wytyczne WCAG, takie jak tekst alternatywny, poprawna struktura nagłówków, widoczny fokus.
   • Przetestuj stronę za pomocą czytnika ekranu.

3. Sprawdź kontrast kolorów na swojej stronie:

   • Użyj narzędzia WebAIM Contrast Checker.
   • Upewnij się, że wszystkie kombinacje kolorów spełniają minimalne wymagania kontrastu.
   • Wprowadź zmiany w stylach, jeśli to konieczne.

Dodatkowe materiały

• Dokumentacja WCAG 2.1:
  • WCAG 2.1 w języku polskim: https://www.w3.org/Translations/WCAG21-pl/

Ciekawostka

Czy wiesz, że zgodnie z raportem WHO, na świecie żyje ponad miliard osób z niepełnosprawnościami? To około 15% globalnej populacji. Tworząc dostępne strony internetowe, otwierasz drzwi do swojej treści dla ogromnej liczby ludzi, którzy inaczej mogliby napotkać na bariery nie do pokonania. Dostępność nie jest więc tylko dodatkiem, ale kluczowym elementem tworzenia stron w dzisiejszym cyfrowym świecie.