Wstęp
Dostępność cyfrowa to praca wielu osób. Wspominaliśmy już co, może zrobić edytor, aby strona była bardziej dostępna cyfrowo. Zanim jednak przyjdzie kolei na edytora najpierw, trzeba stronę stworzyć, tu do pracy potrzebny jest UX/UI designer, który nam ją zaprojektuje i deweloper, który zbuduje stronę. Jeśli będziemy mieli solidne podstawy to, konieczność wprowadzenia zmian i usprawnień będzie łatwiejsza. W tym artykule przyjrzymy się podstawowym aspektom, które trzeba wziąć pod uwagę przy tworzeniu dostępnych stron.
Z tego artykułu dowiesz się:
- jak zbudować solidną strukturę strony
- na co zwrócić uwagę w przypadku zewnętrznych bibliotek
- jak zadbać o nawigacje klawiaturą
- jak zrobić dostępne formularze
Zadbaj o strukturę strony używając semantycznego HTML
Jedną z najważniejszych zasad dostępności jest to, aby była ona, zrozumiała i czytelna. Jeśli użyjesz przy tworzeniu dostępnych stron semantycznego HTML, rekomendowana wersja to HTML 5, to ułatwisz zrozumienie strony przez technologie wspomagające. Dzięki czemu, użytkownicy z nich korzystający nie będą czuli się zagubieni.
Solidną podstawę dadzą więc następujące elementy:
<header> — nagłówek strony lub sekcji.
<nav> — menu nawigacyjne.
<main> — główna zawartość strony.
<article> — samodzielna jednostka treści (np. post na blogu).
<aside> — treść poboczna (np. reklamy, linki do powiązanych artykułów).
<footer> — stopka strony lub sekcji.
Jeśli jest to możliwe zamiast ogólnych elementów takich jak <div> czy <span>, używaj bardziej opisowych znaczników, które wyjaśniają strukturę i rolę danych fragmentów strony.
Zamiast:
<div class=”header”>
<div class=”logo”>Moje Logo</div>
<div class=”menu”>
<a href=”#home”>Strona Główna</a>
<a href=”#about”>O nas</a>
<a href=”#contact”>Kontakt</a>
</div>
</div>
Użyj:
<header>
<h1>Moje Logo</h1>
<nav>
<a href=”#home”>Strona Główna</a>
<a href=”#about”>O nas</a>
<a href=”#contact”>Kontakt</a>
</nav>
</header>
Sprawdź czy zewnętrzne biblioteki, z których będziesz korzystać są dostępne cyfrowo
W przypadku używania zewnętrznych bibliotek, skryptów wpływających na UI warto zwrócić uwagę na ich zgodność z dostępnością cyfrową:
- przed implementacją nowych bibliotek sprawdź dokładną analizę ich zgodności z WCAG 2.1
- zweryfikuj czy istnieje dokumentacja dotycząca dostępności danej biblioteki
- priorytetyzuj biblioteki z aktywnym wsparciem i historią rozwiązywania problemów z dostępnością
- stwórz listę sprawdzonych i rekomendowanych bibliotek do wykorzystania w przyszłych projektach.
Zadbaj o nawigację klawiaturą
O tym, że treść strony musi być dostępna i obsługiwana za pomocą klawiatury, bez konieczności używania myszy mówi nam kryterium 1. WCAG 2.1.1 – Klawiatura (A).
Co jednak kryje się za tym kryterium?
- Wszystkie interaktywne elementy muszą być dostępne za pomocą klawiatury, dlatego niewskazane jest używanie <div> lepiej zastosować np <button>. Jest to powiązane ze wspomnianym wcześniej semantycznym kodem.
- Klawisze Enter lub Space powinny wywoływać akcje na odpowiednich elementach.
Z wyżej wymienionym kryterium powiązane jest kryterium 2.1.2 – Brak pułapek na klawiaturę (A), które mówi o tym, że użytkownik zawsze musi mieć możliwość przejścia dalej za pomocą Tab lub Shift + Tab ,a modalne okna może zamknąć za pomocą Esc.
Mówiąc o nawigacji klawiaturą, nie możemy zapomnieć o fokusie, o czym mówi nam kryterium 2.4.3 – Kolejność Fokusowania (A) i 2.4.7 – Widoczny Fokus (AA).
Naciśnięcie klawisza Tab powinno przenosić focus w logicznej kolejności dlatego zachowanie logicznej kolejność tabulacji zgodnie z wizualnym układem strony jest tak ważne.
Na stronie powinniśmy także zaimplementować ‘focus trap’ dla wszystkich modali i wyskakujących okien. Nie zapominajmy o tym, że fokus powinien być widoczny dla wszystkich elementów.
Pomocne w nawigacji klawiaturą są skip linki. Umożliwiają one pomijanie powtarzających się sekcji za pomocą skip linków. Pomagają użytkownikom szybko przejść do głównej treści, pomijając np. nagłówki i nawigację. Nie należy zatem o nich zapominać w projektowaniu strony. Stosując się do pewnych zasad:
- Link Przejdź powinien być pierwszym interaktywnym elementem w kodzie HTML,
- Dobrze widoczny po aktywacji (czyli po najechaniu klawiaturą),
- Skip-link powinien być linkiem (<a>), ponieważ nawiguje użytkownika do innego fragmentu strony, a nie wywołuje akcji.
- Tabindex=”0″ jest domyślną wartością i powinien być używany dla interaktywnych elementów
Nie zapomnij o dostępności cyfrowej formularzy
Formularze to bardzo ważna część strony, ponieważ bardzo często zapewniają one nam kontakt z klientem. Bez względu na to, czy będziemy korzystać z gotowych rozwiązań ,czy projektować formularze sami powinniśmy pamiętać o kilku elementach, które sprawią, że będą one dostępne dla wszystkich użytkowników.
Zapewnij jasny komunikat o błędach i sugestie ich rozwiązania. O tym jasno mówią nam kryteria 3.3.2 – Etykiety i instrukcje (A) i 3.3.3 – Sugestie dotyczące błędów (AA).
Np. Dodaj instrukcje lub tekst pomocniczy (aria-describedby) tam, gdzie użytkownik może potrzebować wsparcia.
Stosuj odpowiednie typy pól (type=”email”, type=”tel”, type=”number”). Pomaga to użytkownikom korzystającym z technologii wspomagających oraz urządzeń mobilnych.
Stosuj poprawnie powiązane etykiety (label) dla każdego pola formularza.Każde pole formularza powinno mieć etykietę <label> z poprawnie powiązanym atrybutem for, który wskazuje na identyfikator (id) pola.
Dzięki temu czytniki ekranowe mogą poprawnie odczytać etykietę.
Podsumowanie
Stworzenie solidnych podstaw dla strony dostępnej cyfrowej możemy zacząć od:
- wykorzystania do stworzenia struktury semantycznego HTMLa
- sprawdzenia zewnętrznych bibliotek pod kontem dostępności
- zadbania o nawigację klawiatura
- stworzenia dostępnych formularzy
Nie wyczerpują one jednak tematu. Lista wytycznych WCAG jest obszerna. Stosowanie się do wyżej wymienionych zasad w przyszłości pozwoli nam na uniknięcie problemów, jeśli będziemy musieli usprawnić dostępność cyfrową strony. W razie wątpliwości warto zwrócić się po kompleksowy audyt dostępności strony internetowej, który obejmuje zarówno analizę kodu, jak i testy manualne, które pozwalają wychwycić błędy niedostępne dla narzędzi automatycznych.
