Wstęp
Projektowanie dostępnych stron to wspólna odpowiedzialność. Klienci, UX/UI designerzy, edytorzy treści, deweloperzy i audytorzy dostępności – każdy z nich ma kluczową rolę w budowaniu inkluzywnych doświadczeń. Co możesz zrobić ty jako edytor czy właściciel strony, którą zarządzasz, żeby była ona bardziej dostępna, jednocześnie nie wydając grosza na usługi specjalistów?
Z tego artykułu dowiesz się:
- jak przygotować odpowiednie opisy alternatywne dla zdjęć i grafik
- jak opisać przyciski na stronie, żeby były zrozumiałe dla wszystkich
- jak zadbać o strukturę nagłówków
Zadbaj o opisy alternatywne dla zdjęć
Zdjęcia to bardzo ważny wizualny element strony. Statystycznie obraz stanowi około 30–70% widocznej powierzchni ekranu. Są one ważnym nośnikiem informacji, dającym często kontekst, którego nie da się wyrazić słowami. Dodajemy je do artykułów, aby pomóc wizualizować treści, stanowią dużą część identyfikacji marki, pokazują produkt, który chcemy sprzedać.
Tekst alternatywny obrazka ALT jest bardzo istotny dla wyszukiwarek, bo pomaga powiązać obraz z zawartością strony, co może pozytywnie wpłynąć na ranking strony w wynikach wyszukiwania grafik Google. Jest to jednak perspektywa SEO a co z dostępnością cyfrową?
To właśnie dzięki Alt text osoby niewidome i niedowidzące mają dostęp do treści wizualnych poprzez czytniki ekranu. Opis alternatywny zdjęć ma więc bardzo duże znaczenie dla projektowanie dostępnych stron.
Tworząc opisy alt, powinniśmy kierować się kilkoma zasadami, zdefiniowanymi przez kryteria dostępności:
- WCAG 2.1 – Kryterium 1.1.1: Treść nietekstowa (Poziom A)
Każdy obraz informacyjny powinien mieć adekwatny opis, który przekazuje to, co na nim jest. Tworząc treść alternatywną powinniśmy skupić się na faktach, a nie na własnej interpretacji.
Np. „Wykres pokazuje wzrost sprzedaży o 20% w 2023 roku”
W przypadku obrazu dekoracyjnego, bo takie też występują na stronie, np. Logo powinien mieć pusty atrybut alt=””, aby był pomijany przez czytniki ekranu.
- WCAG 2.1 – Kryterium 1.4.5: Obrazy tekstu (Poziom AA)
Tekst nie powinien być osadzony w obrazach. Często spotykamy się np z banerami, których hasła są częścią obrazu. Jeśli tekst jest w obrazie, należy zapewnić jego alternatywną wersję w HTML. Najlepiej jednak jest unikać takich sytuacji, wyjątek stanowi np. Logo.
- WCAG 2.1 – Kryterium 2.4.4: Cel linku (Poziom A)
Jeśli obraz pełni funkcję linku, jego alt musi wyjaśniać cel odnośnika. Czytniki ekranu odczytują alt jako opis linku.
Zadbaj o opisy przycisków, linków
Kolejnym często występującym elementem strony są przyciski. Stanowią one łącznik między poszczególnymi stronami. Pozwalają pozostać czytelnikowi na stronie dłużej np. “Czytaj dalej”, nawołują do zakupu “Dodaj do koszyka” czy pozwalają zapisać się na newsletter “ Zapisz się”. Często więc są one kluczowym elementem strony bo nawołują do akcji, na której nam jako właścicielom stron bardzo zależy. Warto więc zadbać o to, aby były dostępne.
Jako edytorzy mamy realny wpływ na to, jaką treść linku lub przycisku zastosujemy. Według Kryterium 2.4.4: Cel linku (Poziom A) powinien on jasno wskazywać cel bez potrzeby odczytywania dodatkowego kontekstu.
Przykład:
Zamiast „Więcej”, „Czytaj dalej” np. „Przeczytaj poradnik dla kobiet”
Zamiast „Zapisz się” np. „Zapisz się do newslettera”
Zamiast „Kliknij tutaj” „Pobierz raport PDF”
Ta sama zasada dotyczy np. linków w artykule.
Zadbaj o strukturę nagłówków
O strukturę nagłówków na stronie musi zadbać deweloper tworzący stronę. Ty jako edytor możesz to jednak robić, pisząc artykuły na stronie czy inne ważne informacje stanowiące treści informacyjne twojej strony.
Dlaczego struktura nagłówków jest taka ważna dla dostępności stron? Pozwala ona zorientować się czytelnikowi na stronie. Jest niczym mapa podająca słuszny kierunek. Ułatwia skanowanie treści przez czytniki i znalezienie potrzebnych informacji. Użytkownik może przeskakiwać między sekcjami, zamiast słuchać całej treści.
Tworząc strukturę nagłówków, powinniśmy kierować się kilkoma zasadami, zdefiniowanymi przez kryteria dostępności:
- WCAG 2.1 – Kryterium sukcesu 1.3.1 (Informacje i relacje)
Używaj H1 tylko raz – powinien zawierać główny temat artykułu.
H1 – Tytuł strony
H2 – Główne sekcje
H3 – Podsekcje
- WCAG 2.1 – Kryterium sukcesu 2.4.10 (Sekwencja nagłówków)
Zachowaj hierarchię – H2 dla głównych sekcji, H3 dla podsekcji itd. Unikaj przeskakiwania poziomów – np. nie stosuj H4 bez wcześniejszego H3.
- WCAG 2.1 – Kryterium sukcesu 2.4.6 (Nagłówki i etykiety)
Stosuj nagłówki opisowe – powinny jasno wskazywać temat sekcji np . „Wyniki badań” zamiast „Sekcja 3”.
Aby artykuł i treści były jeszcze bardziej zorganizowane i zrozumiałe stosuj listy punktowane i numerowane. Dziel tekst na krótkie akapity.
Powiązane artykuły
Dostępność cyfrowa z perspektywy dewelopera
Dostępność cyfrowa z perspektywy projektanta strony
Podsumowanie
- Przygotowanie odpowiednich opisów alternatywnych zdjęć i grafik
- Opisanie przycisków na stronie, żeby były zrozumiałe dla wszystkich
- Zadbanie o strukturę nagłówków
Wszystkie powyżej wymienione praktyki, to praktyki, na które jako edytorzy treści mamy realny wpływ. Dzięki ich zastosowaniu nawigowanie po stronie będzie dużo prostsze i efektywne. Poprawią one nie tylko dostępność strony, ale również SEO i znaczącą wpłyną na jej pozycję w wyszukiwarkach. W wielu organizacjach szkolenia z zakresu dostępności cyfrowej pomagają zespołom redakcyjnym unikać podstawowych błędów już na etapie tworzenia treści.
