- uncoverUX
- Posts
- Dostępność cyfrowa
Dostępność cyfrowa
Krótki tekst co to jest, dlaczego to ważne oraz kilka przykładów
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5ca61b0b-71aa-43d5-8b75-3f5a1f92c0e8/Instagram_post_-_423.png?t=1663589271)
Dostępność cyfrowa 😎
Czym jest dostępność cyfrowa? Dostępność cyfrowa jest niczym innym, niż możliwością korzystania z wszelkich dostępnych produktów elektronicznych przez osoby z niepełnosprawnościami.
Dlaczego to takie ważne? Według danych GOV szacuje się, że w Polsce jest od 3 do 7 mln osób z niepełnosprawnościami. Potencjalnie są to osoby, które nie są w stanie korzystać z tych samych produktów co osoby bez niepełnosprawności.
Czym jest WCAG 2.1? WCAG 2.1. – Web Content Accessibility Guidelines - jest to zbiór wskazówek, który nam - projektantom pozwala projektować w duchu dostępności.
Z czego się składa?
Z 4 głównych wytycznych:
postrzegalność – możliwość odbioru produktu za pomocą słuchu, wzroku lub dotyku,
funkcjonalność – możliwość skorzystania ze wszystkich funkcji strony internetowej lub aplikacji,
zrozumiałość – możliwość zrozumienia treści,
kompatybilność – możliwość współpracy strony lub aplikacji z innymi programami i urządzeniami wspomagającymi osoby niepełnosprawne.
Każda z tych wytycznych ma swoje kryteria sukcesu, które składają się z trzech poziomów – od A (najniższy poziom dostępności) do AAA (najwyższy poziom dostępności).
🤔 Przykłady kryteriów dostępności
Parę przykładów WCAG 2.1. z poziomów A i AA - aby nakreślić sprawę.
👉 Zawartość nietekstowa - treści nietekstowe to na przykład grafiki, zdjęcia z tekstem lub bez, ikony będące linkami, loga itp. Muszę one posiadać swój opis, czyli alternatywę dla tekstu po to, aby osoba korzystająca z czytnika ekranu była w stanie odczytać takie treści. Wyjątkiem są np. grafiki stricte dekoracyjne, nie powiązane linkiem i bez żadnych informacji.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d6c0df5e-d509-4c54-abff-135d9ac8c9ef/Zrzut_ekranu_2022-09-19_o_13.02.45.png)
👉 Kontrast - Kryterium to jest szczególnie ważne dla osób niedowidzących. Kontrast (tła do tekstu, bądź tła do ikony) powinien wynosić conajmniej 4,5:1.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0b26ca4f-11b7-4a3f-a703-adc46f9ed461/Zrzut_ekranu_2022-09-19_o_12.55.20.png)
👉 Dopasowanie do ekranu Strona powinna poprawnie wyświetlać się na różnych wielkościach ekranu, czyli prościej ujmując - powinna być responsywna.
![rtv euro agd - przykład resposywność](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6835bfbb-b294-484f-bb23-ac7a41f42937/rtv_euro_agd_-_przyk%C5%82ad_resposywnos%CC%81c%CC%81.png)
👉 Klawiatura Bardzo ważne kryterium dla osób, które podczas korzystania np. z serwisów internetowych nie używają myszki, bądź touchpada a tylko klawiatury i klawisza TAB. Wobec czego, ważne operacje muszą być możliwe do przejścia zarówno za pomocą klawiatury, jak i myszki.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/61fc7d5e-53d2-4bd2-87b7-9713675fa956/Zrzut_ekranu_2022-09-19_o_13.38.36.png)
👉 Odstępy w tekście Czyli możliwość zmiany odstępu między wierszami, akapitami, słowami i literami w taki sposób, aby informacje wyświetlane dalej były czytelne.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1b5bbbaf-3861-4091-beab-12e2d97fb163/Zrzut_ekranu_2022-09-19_o_13.37.00.png)
👉 Pauza, zatrzymanie, ukrycie - w tym kryterium chodzi przede wszystkim o karuzele, które użytkownik powinien móc kontrolować. Zazwyczaj wystarczy dodać przycisk “stop”, który umożliwia zapauzowanie karuzeli.
👉 Język strony - Aby czytniki ekranu mogły z łatwością odczytać język strony musi ona zawierać w kodzie informacje o swoim języku.
![Zalando - Język strony przykład](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/446f52d3-6f7f-40fe-8eae-22e5dd02e44e/Zrzut_ekranu_2022-09-19_o_13.15.02.png)
👉 Informacja i jej związki - każda strona powinna składać się z nagłówka strony, treści głównej, stopki i innych. W kodzie strony wprowadza się je odpowiednio znacznikami <header>, <main> i <footer>. Nazywamy to landmarkami, czyli punktami orientacyjnymi. Ponad to, struktura nagłówków powinna być prawidłowa i logiczna H1, H2, H3, H4 itd.</footer></main></header>
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/574de58b-b86b-4e4d-a45c-ec09ddeaa228/Zrzut_ekranu_2022-09-19_o_13.27.29.png)
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a08b18aa-9139-40cb-add9-6450720d182b/Zrzut_ekranu_2022-09-19_o_13.32.08.png)
⚙️ Jak to sprawdzić? Czyli kilka przydatnych narzędzi:
Text Spacing - Można to zrobić jako bookmarklet. Na przykład z tym kodem.
💡 Czy wiesz, że?
Wszystkie strony internetowe i aplikacje mobilne podmiotów publicznych muszą być dostępne cyfrowo. Wynika to z Ustawa z 4 kwietnia 2019r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych.
Do zobaczenia za ~ 2 tygodnie 👀