Dostępność cyfrowa

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.

👉 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.

👉 Dopasowanie do ekranu Strona powinna poprawnie wyświetlać się na różnych wielkościach ekranu, czyli prościej ujmując - powinna być responsywna.

👉 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.

👉 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.

👉 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.

 👉 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>

⚙️ Jak to sprawdzić? Czyli kilka przydatnych narzędzi:

• ANDI (Accessible Name & Description Inspector

• Headings Map

• Landmarks navigation via Keyboard

• Text Spacing - Można to zrobić jako bookmarklet. Na przykład z tym kodem.

• Color Contrast Checker

💡 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 👀