Spis treści
Wstęp
Najlepsze praktyki dostępności
Podsumowanie
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.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
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.
Wskazówka
Ten artykuł przeznaczony jest dla osób z zaawansowaną wiedzą dotyczącą modyfikacji kodu szablonu. Jeśli nie jesteś programistą i nie dokonujesz zmian w kodzie, to przejdź do artykułów ogólnych:
- Posiadam własny szablon. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?
- Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?
- Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?
Zasady ogólne
- Semantyczne znaczniki HTMLUżywaj odpowiednich znaczników HTML, takich jak
, - Kolory i kontrastZapewnij 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, natomiast jeśli używasz niestandardowych obrazów, upewnij się, że dodajesz alt lub aria-label do elementu.
- Nawigacja klawiaturą
Zagwarantuj opcję poruszania się po stronie przy użyciu klawiatury, jednocześnie dbając o dostępność wszystkich interaktywnych elementów. 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