Wstęp
Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.
Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Niniejszy artykuł przedstawia fundamentalne zasady i techniczne wytyczne, których wdrożenie przyczyni się do zwiększenia dostępności witryny internetowej. Ma on na celu ma na celu pomóc programistom Liquid w tworzeniu dostępnych cyfrowo aplikacji i stron internetowych.
Najlepsze praktyki dostępności
Dostępność stron internetowych jest obecnie kluczowym aspektem ich projektowania, mającym na celu zapewnienie równego dostępu do treści dla wszystkich użytkowników, niezależnie od ich indywidualnych potrzeb czy ograniczeń. Przestrzeganie najlepszych praktyk w zakresie dostępności nie tylko wspiera osoby korzystające z technologii asystujących, ale również poprawia ogólną użyteczność i funkcjonalność serwisu.
W tym artykule przedstawiamy najlepsze praktyki dotyczące dostępności, które powinny być stosowane w kodzie HTML i CSS. Każdy z tych elementów odgrywa istotną rolę w budowaniu przyjaznego i dostępnego środowiska cyfrowego. Omówione zagadnienia obejmują:
- Stosowanie semantycznych znaczników HTML,
- Zapewnienie odpowiedniego kontrastu kolorystycznego,
- Właściwe oznaczanie grafik poprzez teksty alternatywne,
- Dostosowanie mechanizmów nawigacyjnych dla użytkowników korzystających z klawiatury.
Zasady ogólne
- Semantyczne znaczniki HTML
Używaj odpowiednich znaczników HTML, takich jak <header>, <nav>, <main>, <footer>, aby struktura strony była logiczna i zrozumiała, jeśli w szablonie znajdują się niestandardowe struktury lub elementy, upewnij się, że są one odpowiednio oznaczone i dostępne dla czytników ekranu, np. za pomocą landmarków ARIA Landmarks. - Kolory i kontrast
Zapewnij odpowiedni kontrast między tekstem a tłem. Używaj narzędzi do sprawdzania kontrastu, aby upewnić się, że spełniasz standardy WCAG. Wykorzystaj devtools do sprawdzania kontrastu kolorów, takie jak np. WebAIM Contrast Checker. Lub skorzystaj z narzędzia WAVE dostępnego jako rozszerzenie do przeglądarki. - Tekst alternatywny
Zawsze dodawaj tekst alternatywny do obrazów, aby osoby korzystające z czytników ekranu mogły zrozumieć ich zawartość. W większości przypadków wykorzystanie filtra Liquid Img automatycznie zapewni odpowiednie atrybuty alt, ale jeśli używasz niestandardowych obrazów, upewnij się, że dodajesz alt lub aria-label do elementu <img>. - Nawigacja klawiaturą
Umożliwiaj nawigację po stronie za pomocą klawiatury, zapewniając, że wszystkie interaktywne elementy są dostępne. Pamiętaj o zdefiniowaniu stylu swojego :focus oraz :focus-visible, aby użytkownicy mogli łatwo zidentyfikować, który element jest aktualnie aktywny. Niektóre znaczniki HTML5 są domyślnie dostępne dla nawigacji klawiaturą, takie jak <button>, <a>, <input>, ale jeśli używasz niestandardowych elementów, takich jak <div> lub <span>, upewnij się, że dodajesz tabindex=”0″ i odpowiednie role ARIA. - Czytelność
Używaj prostego i zrozumiałego języka. Unikaj skomplikowanych zdań i terminologii, która może być trudna do zrozumienia dla niektórych użytkowników.
Elementy interaktywne
- Formularze
Używaj odpowiednich znaczników formularzy, takich jak <input>, <select>, <textarea>, i zapewnij, że są one poprawnie oznaczone. Używaj aria-label lub aria-labelledby, jeśli etykiety nie są widoczne, jeśli w szablonie wykorzystywane są customowe pola formularzy, np. przy użyciu wykorzystania elementów <div> lub <span>, upewnij się, że są one dostępne dla czytników ekranu i użytkowników korzystających z klawiatury, np. poprzez dodanie role=”checkbox” lub role=”button” oraz odpowiednich atrybutów ARIA. - Przyciski
Używaj <button> zamiast <div> lub <span> do tworzenia przycisków. Jeśli używasz ikon jako przycisków, dodaj aria-label lub title, aby opisać ich funkcję. Ikony, które nie mają znaczenia informacyjnego, powinny mieć aria-hidden=”true” lub role=”presentation”, aby nie były odczytywane przez czytniki ekranu. - Linki
Używaj <a> do tworzenia linków. Tekst linku powinien jasno opisywać jego cel. Unikaj używania ogólnych fraz, takich jak „kliknij tutaj”. Jeśli chcesz dostarczyć dodatkowe informacje, użyj aria-label np. w przypadku linków do pobrania plików, np. <a href=”plik.pdf” aria-label=”Pobierz plik PDF”>Pobierz</a>. - Role ARIA
Używaj ról ARIA, aby poprawić dostępność elementów, które nie mają semantycznego znaczenia w HTML. Na przykład, jeśli używasz <div> jako przycisku, dodaj role=”button” i zapewnij odpowiednie atrybuty ARIA, takie jak aria-pressed dla przycisków przełączających. Dodawaj tłumaczenia do szablonu, aby zapewnić tłumaczenie tekstów używanych w atrybutach ARIA, takich jak aria-label, aria-labelledby i aria-describedby, aby były dostępne w różnych językach. np. aria-label=”{{translations.DownloadFile}}”.
Struktura treści
- Nagłówki
Używaj nagłówków od <h1> do <h6> w logicznej hierarchii. Nagłówek <h1> powinien być używany tylko raz na stronie, a kolejne nagłówki powinny być używane zgodnie z hierarchią. - Listy
Używaj <ul> dla list nieuporządkowanych i <ol> dla list uporządkowanych. Unikaj używania <div> lub <span> do tworzenia list. - Tabele
Używaj tabel do prezentacji danych. Dodaj <caption> opisujący tabelę i używaj nagłówków <th> z atrybutem scope=”col” lub scope=”row” dla kolumn i wierszy, aby poprawić dostępność. - Animacje i ruch
Unikaj automatycznych animacji, które mogą być dezorientujące dla użytkowników. Jeśli musisz użyć animacji, zapewnij możliwość ich wyłączenia lub ograniczenia. Używaj prefers-reduced-motion w CSS, aby dostosować animacje do preferencji użytkownika. - Wideo i audio
Zapewnij napisy i transkrypcje dla materiałów wideo i audio. Używaj znaczników <video> i <audio> z odpowiednimi atrybutami, takimi jak controls, aby umożliwić użytkownikom interakcję z multimediami. - Dynamiczne treści
Jeśli używasz JavaScript do dynamicznego aktualizowania treści, upewnij się, że zmiany są ogłaszane dla czytników ekranu. Używaj aria-live i aria-atomic, aby kontrolować, jak zmiany są komunikowane użytkownikom korzystającym z technologii asystujących. - Testowanie dostępności
Regularnie testuj swoją stronę pod kątem dostępności, używając narzędzi takich jak Lighthouse, Axe, czy WAVE. Testuj również z użytkownikami korzystającymi z technologii asystujących, aby uzyskać rzeczywiste opinie na temat dostępności Twojej strony. Weryfikuj dostępność swojej strony za pomocą narzędzi takich jak Lighthouse, Axe lub WAVE. Te narzędzia pomogą zidentyfikować problemy z dostępnością i zasugerują poprawki. Ręczne testowanie dostępności jest również ważne. Używaj czytników ekranu, takich jak NVDA lub VoiceOver, aby sprawdzić, jak Twoja strona jest odczytywana przez użytkowników korzystających z technologii asystujących. Testuj na różnych urządzeniach i przeglądarkach, aby upewnić się, że dostępność jest zachowana we wszystkich warunkach.
- Przepisach ustawy
- Wymogach standardu WCAG 2.1/2.2
- oraz w udostępnionej przez oficjalną stronę rządową listy kontrolnej do badania dostępności cyfrowej strony internetowej.
Podsumowanie
Dostępność jest kluczowym aspektem tworzenia stron internetowych i aplikacji. Stosowanie się do najlepszych praktyk dostępności pomoże zapewnić, że Twoje treści są dostępne dla wszystkich użytkowników, niezależnie od ich zdolności. Pamiętaj, że dostępność to proces ciągły, a regularne testowanie i aktualizowanie treści jest niezbędne, aby utrzymać wysokie standardy dostępności.