Wyobraź sobie, że ktoś czeka na otwarcie Twojej strony lub aplikacji…
Pomyśl o tej osobie…
Może to być młoda mama przeglądająca sklep internetowy jedną ręką, bo drugą trzyma dziecko.
Może to być senior, który dopiero uczy się korzystać z internetu, lub osoba z niepełnosprawnością wzroku, która używa czytnika ekranu.
Każda z tych osób ma różne potrzeby, ale jedno pragnienie: łatwy dostęp do informacji i produktów.
Polski Akt o Dostępności, europejskie standardy ETR i WCAG (Web Content Accessibility Guidelines) powstały właśnie po to, by internet był miejscem przyjaznym dla każdego.
W tym artykule podpowiemy Ci, jak dostosować stronę www, aplikację czy treści promocyjne które tworzysz, do tych standardów – z korzyścią dla Twojej marki (i serca💛).
Co kryje się za WCAG, ETR i Polskim Aktem o Dostępności?
Każda z tych regulacji to krok w stronę bardziej otwartego internetu.
WCAG: międzynarodowe wytyczne, które pomagają tworzyć treści cyfrowe postrzegalne, operacyjne, zrozumiałe i solidne.
ETR: europejski standard dostępności, harmonizujący zasady w krajach UE.
Polski Akt o Dostępności: polskie przepisy, które wymagają dostosowania stron i aplikacji, szczególnie w sektorze publicznym, ale nie tylko. Od 6.2025 obejmie również przedsiębiorstwa zatrudniające powyżej 10 osób i generujące obrót powyżej 2 mln euro.
Historia, która otwiera oczy
Kiedyś w jednym z międzynarodowych sklepów internetowych wprowadzono prostą zmianę: opisano wszystkie zdjęcia produktów tekstem alternatywnym. Pewna klientka, niewidoma od urodzenia, napisała do firmy, że po raz pierwszy mogła „zobaczyć” kolekcję ubrań w sposób dostępny. Ta zmiana zwiększyła sprzedaż i zdobyła lojalność nowych klientów.
Lekcja: Czasem drobny krok po stronie twórcy to wielki krok dla użytkownika.
Jak tworzyć bardziej dostępne strony internetowe? Praktyczne przykłady i wskazówki
Dostępność stron internetowych to coś więcej niż poprawny wygląd – to zapewnienie, że każdy, niezależnie od umiejętności czy ograniczeń, będzie mógł z niej korzystać. Poniżej znajdziesz konkretne przykłady i wskazówki, jak dostosować swoją witrynę do standardów dostępności WCAG.
1. Kontrast kolorów – widoczność dla każdego
Przykład:
zamiast jasnoszarego tekstu na białym tle, użyj ciemnoszarego lub czarnego tekstu, który wyraźnie kontrastuje z tłem.
Dobre praktyki:
Zapewnij kontrast na poziomie co najmniej 4,5:1 dla tekstu i tła.
Skorzystaj z narzędzi takich jak Colouur Contrast Analyser
2. Opis alternatywny (alt text) dla obrazów
Przykład:
Obraz przedstawiający kawiarnię może mieć opis alternatywny typu: „Elegancka kawiarnia z drewnianymi stolikami i filiżanką cappuccino na pierwszym planie”.
Dobre praktyki:
Opisuj, co przedstawia obraz i dlaczego jest istotny.
Unikaj opisów typu „obrazek1.jpg”.
3. Nawigacja klawiaturą – pełna kontrola bez myszy
Przykład:
Użytkownik powinien być w stanie poruszać się między sekcjami strony za pomocą klawisza Tab.
Dobre praktyki:
Upewnij się, że wszystkie linki, przyciski i pola formularzy są dostępne przy użyciu klawiatury.
Stosuj wyraźny wskaźnik focus (np. obramowanie elementu, na którym znajduje się kursor).
4. Teksty łatwe do zrozumienia
Przykład:
Zamiast skomplikowanego opisu usługi:
„Nasz innowacyjny system optymalizuje procesy operacyjne w celu zwiększenia efektywności zasobów ludzkich.”
Zastosuj prostszy język jak na przykład:
„Nasz system pomaga firmom pracować szybciej i sprawniej.”
Dobre praktyki:
Używaj krótkich zdań i prostego języka.
Stosuj nagłówki i listy wypunktowane, aby podzielić tekst na sekcje.
5. Napisy i transkrypcje wideo
Przykład:
Film promujący produkt powinien zawierać napisy w języku, w którym jest nagrany, np. „Nasze oprogramowanie ułatwia zarządzanie projektami – przetestuj je teraz!”
Dobre praktyki:
Dodaj napisy do wszystkich filmów.
Oferuj transkrypcje dla materiałów audio.
6. Formularze – jasne i intuicyjne
Przykład:
Pole w formularzu „E-mail” powinno być opisane jako „Podaj swój adres e-mail (np. jan.kowalski@mail.com)”.
Dobre praktyki:
Dodaj etykiety do każdego pola formularza.
Informuj użytkowników o błędach i podpowiadaj, jak je naprawić.
7. Responsywność – dostosowanie do urządzeń mobilnych
Przykład:
Twoja strona powinna działać równie dobrze na laptopie, jak i na smartfonie. Menu na telefonie powinno być uproszczone, a przyciski większe, by łatwo było w nie kliknąć.
Dobre praktyki:
Testuj stronę na różnych urządzeniach i rozdzielczościach.
Stosuj technologię flexbox lub grid do responsywnego układu strony.
8. Ostrzeżenia i komunikaty w czasie rzeczywistym
Przykład:
Jeśli formularz wymaga wprowadzenia poprawnego formatu e-maila, a użytkownik wpisze błędny, wyświetl komunikat: „Nieprawidłowy adres e-mail. Użyj formatu: nazwa@domena.com”.
Dobre praktyki:
Komunikaty powinny być widoczne, zrozumiałe i łatwe do odczytania.
Unikaj błędów, które powodują przerwanie działania strony.
9. Czytniki ekranu – wsparcie dla użytkowników niewidomych i niedowidzących
Przykład:
Zadbaj, aby nagłówki były oznaczone w kodzie HTML jako <h1>, <h2>, itd., co pozwala czytnikom ekranu zrozumieć strukturę strony.
Dobre praktyki:
Zadbaj o poprawną hierarchię nagłówków.
Unikaj używania obrazków zamiast tekstu dla kluczowych informacji.
10. Linki – jasne i opisowe
Przykład:
Zamiast linku „Kliknij tutaj”, użyj „Dowiedz się więcej o naszych usługach”.
Dobre praktyki:
Linki powinny jasno informować, dokąd prowadzą.
Unikaj generowania linków złożonych wyłącznie z adresów URL.
Przykładowe rozwiązania i narzędzia które mogą okazać się pomocne w tworzeniu treści lepiej dostępnych
Wave – narzędzie do sprawdzania dostępności strony – tutaj link
Axe Accessibility Checker – wtyczka do przeglądarek analizująca dostępność – tutaj link
Contrast Checker – pomoc przy wyborze odpowiednich kolorów – tutaj link
Podsumowanie: Kluczowe zasady dostępności
- Używaj kontrastu, który widzi każdy
- Stosuj kolory, które dobrze się różnią.
- Wybieraj czcionki bezszeryfowe i odpowiedni ich rozmiar (ze wskazaniem na większy)
- Twórz proste nawigacje
- Menu powinno być jasne i intuicyjne.
- Umożliwiaj nawigację za pomocą klawiatury.
- Pamiętaj o alternatywach
- Opisuj zdjęcia tekstem alternatywnym (alt text).
- Dodawaj napisy i transkrypcje do filmów.
- Sprawdzaj dostępność na bieżąco
- Używaj narzędzi do sprawdzania dostępności serwisów.
Czy Twoje strony i aplikacje są dostępne dla każdego? Jeśli nie wiesz, od czego zacząć, zrób pierwszy krok – skontaktuj się z nami! Stworzymy treści i przygotujemy serwisy i aplikacje (lub dostosujemy je), tak aby były lepiej dostępne i czytelne pracując dla Twoich użytkowników i Twojej marki.
