Dostępność cyfrowa w internecie

6 rzeczy, które warto wiedzieć projektując stronę internetową

Chyba nie ma obecnie strony bez obrazków i linków.
Podstawową zasadą przy tworzeniu treści dostępnych cyfrowo jest zapewnienie dobrych opisów dla elementów takich jak hiperłącza czy obrazki.
Obrazki możemy podzielić na dekoracyjne i te niosące istotną treść.

6 rzeczy, o których warto pamiętać:

1. Pamiętaj – każdy obrazek „informacyjny” na stronie powinien mieć alternatywny opis. W przypadku kiedy obrazek ma istotną treść opisz go tak, aby był zrozumiały dla osób, które nie mogą go zobaczyć.
   Może to być opis zawartości obrazka lub jeśli zawiera jakiś tekst właśnie ten tekst.
   • Dla developerów: Jeśli opis obrazka jest dłuższy możesz użyć znaczników figure i figcaption lub w atrybucie longdesc wskazać element zawierający długi opis. W przypadku grupy obrazków np. zdjęcia klocków możesz wprowadzić opis tylko do jednego a w przypadku pozostałych atrybut alt pozostawić pusty.
2. Często na stronach zamiast przycisków z tekstem mamy klikalne obrazki. W przypadku obrazków odpowiadających za jakąś akcję atrybut alt powinien opisywać rezultat danej akcji np. zatwierdź formularz.
3. Jeśli obrazek pełni tylko funkcję dekoracyjną pomiń opis. Podobnie jeżeli obrazek nie wnosi dodatkowej treści – np. jest podsumowaniem informacji, która pojawia się w innym miejscu na stronie to taki obrazek możesz potraktować jako dekoracyjny i pozostawić atrybut alt niewypełniony.
   • Dla developerów: Obrazki dekoracyjne powinny mieć pusty atrybut alt lub być umieszczone przy użyciu arkusza styli CSS.
4. W przypadku tworzenia map z obrazków należy opisać zarówno główny element obrazka jak i każdy jego wyróżniony obszar.
5. W przypadku linków opisuj dokładnie do czego prowadzą i jaki jest cel. Co się stanie w wyniku kliknięcia na dany link. Linki także powinny być dobrze wyróżnione w treści strony tak żeby można się było łatwo zorientować, że dany fragment tekstu prowadzi do jakiejś innej zawartości. Jeśli sama treść linku nie jest wystarczająco zrozumiały uzupełnij atrybut title.
   • Dla developerów: Czasami zamiast title warto rozważyć urżycie aria-label.
6. Często treść strony uzupełniamy różnego rodzaju grafikami np. ikonkami symbolizującymi daną akcję. Takie elementy dekoracyjne powinniśmy tworzyć przy użyciu styli CSS lub ukrywać dla czytników. Jednocześnie należy zadbać o odpowiedni opis danej akcji.

3 zasady, które warto znać tworząc formularz na stronie

Praktycznie każda strona internetowa posiada formularz, np. kontaktowy lub zapisu na newsletter.
Mówiąc o dobrych praktykach w tworzeniu dostępnych stron internetowych nie możemy zapominać o zadbaniu od dostępności formularzy na stronie.
Niestety często główny nacisk kładziony jest na wygląd i estetykę, a nie na umożliwienie jego łatwej obsługi przez czytniki ekranowe.
Zapewnienie dostępności nie wymaga dużego wysiłku. Wystarczy pamiętać o 3 zasadach.

1. Każde pole formularza powinno mieć swój opis.
   • Dla developerów: Używaj zawsze znacznika label przy polu input. Nie ma znaczenia czy input posiada placeholder. Czytniki go nie widzą.
2. Zadbaj o tytuł formularz informujący o celu.
   • Dla developerów: Możemy go nadać używając atrybutu labalby.
3. Jeśli stosujesz tzw. captch-ę to zwróć uwagę na jej dostępność.
   • Do formularzy w celu zabezpieczenia się przed różnego rodzaju botami dodawana jest często captch-a.
     Należy z tym uważać, gdyż większość z nich nie jest dostępna dla wszystkich użytkowników. Na przykład osoby z dyslekcją mają problem z każdym rodzajem captch-y. Nie wspominając o captch-ach obrazkowych dla osób niewidomych i dźwiękowych dla mających kłopot ze słuchem.
     Dostępne są rozwiązania, które wychwytują nienaturalnie szybko wypełniony formularz lub mające czarną listę serwerów. To pozwala wyłapać boty.
     Metody, które można zastosować zamiast captch-y to na przykład dodanie weryfikacji przez SMS lub email.
     Też sprytnym pomysłem jest wprowadzenie niewidocznego checkboksa na stronie ,który nie zostanie oznaczony przez użytkownika a bot z reguły go odznaczy.
     Można też zastosować weryfikację biometryczną.

Jak zapewnić wygodne poruszanie się po Twojej stronie?

Po stronie poruszamy się najczęściej przy użyciu myszki, tachpada lub używając ekranów dotykowych urządzeń mobilnych.
Spora grupa użytkowników jednak korzysta tylko z klawiatury.
Osoby używające myszkę też często wolą wykonywać operacje na stronie bez konieczności klikania i precyzyjnego trafiania w elementy strony kursorem. Np. podczas wypełnienia formularza.

Klawisze, które wykorzystuje się do poruszania się po stronie to:

• tabulator (kolejny element) lub tabulator z shift-em jeśli chcemy się cofnąć,
• spację i enter do aktywacji danego elementu lub zatwierdzenia,
• strzałki do poruszania się po listach, zakładkach i tabelach.
• esc do zamykania wyskakujących powiadomień,
• lub backspace do rezygnacji.

4 rzeczy, o których warto pamiętać jeśli chcesz zapewnić wygodną obsługę przy użyciu klawiatury

1. Poprawna kolejność elementów na stronie.
   Bardzo ważna kwestia to poprawnie ustawiona kolejność elementów na stronie. Można sterować tą kolejnością przy użyciu atrybutu HTML tabindex .
   Służy on do określania kolejności w nawigowaniu po elementach, które mogą złapać fokus czyli mogą stać się aktywne.
   • Dla developerów: Nie trzeba go ustawiać dla elementów elementów, które domyślnie przyjmują fokus takich jak input, buton, select, textarea, a, area. Ustawiamy go dla własnych komponentów.
2. Skróty klawiszowe
   Warto też zadbać o wprowadzenie łatwo dostępnych skrótów klawiszowych do najważniejszych funkcji.
   • Dla developerów: Pamiętaj o ich oznaczeniu przy użyciu atrybutu aria-keyshortcuts oraz, że samo oznaczenie nie wystarczy musisz dodać dodatkowo obsługę zdarzeń w JavaScript.
3. Wyróżnienie aktywnych elementów
   Zadbaj o wyróżnienie elementów, na których jest ustawiony fokus.
   • Dla developerów: Najczęściej robi się to za pomocą własności stylu jakim jest outline. Nie usuwaj tej własności dla elementów z fokusem. Oczywiście możesz dostosować ją do wizualnej identyfikacji projektu.
4. Łatwe zamknięcie wyskakujących okien
   Jeśli masz wyskakujące okienka zadbaj by można je było łatwo zamknąć przy użyciu klawisza Esc.