Słów kilka o uczynieniu witryny wygodniejszą do użycia przez osoby z dysfunkcjami.
Co to jest dostępność?
Kiedy przychodzi na myśl dostępność, większość ludzi myśli o po prostu dodaniu tekstu alternatywnego do obrazu albo dopracowanie UX. To nie tak. Technologia i Internet mają ułatwiać ludziom życie. Dostępność oznacza utworzenie witryny internetowej, po której każdy (bez względu na fizyczne, poznawcze lub aktualne umiejętności danej osoby) może się poruszać, wchodzić w interakcje a nawet współtworzyć tę witrynę (np. zamieszczając komentarz). Microsoft Inclusive Design Toolkit opisuje to tak:
Jeśli jako punkt wyjścia wykorzystamy własne zdolności i uprzedzenia, otrzymamy produkty przeznaczone dla osób określonej płci, wieku, umiejętności językowych, umiejętności technicznych i sprawności fizycznej. Osoby ze specjalnym dostępem do pieniędzy, czasu i sieci społecznościowej.
Często programiści czy specjaliści od front-endu nie stawiają dostępności na pierwszym planie podczas tworzenia a późniejsze przeróbki nie są łatwe.
Jak zacząć?
Jest wiele rzeczy, które należy wziąć pod uwagę, zwiększając dostępność witryny, ponieważ istnieje też wiele rodzajów niepełnosprawności, które należy uwzględnić. The Web Content Accessibility Guidelines podzieliły podstawowe zagadnienia na 4 grupy:
- Dostrzegalne: użytkownicy muszą być w stanie dostrzec to w jakiś sposób, używając jednego lub więcej zmysłów.
- Obsługiwane: Użytkownicy muszą mieć możliwość sterowania elementami interfejsu użytkownika (np. przyciski muszą być w jakiś sposób klikalne - mysz, klawiatura, polecenie głosowe itd.).
- Zrozumiałe: treść musi być zrozumiała dla użytkowników.
- Solidne: treść musi być opracowana przy użyciu dobrze przyjętych standardów internetowych, które będą działać w różnych przeglądarkach, teraz i w przyszłości.
Poniżej znajduje się krótka lista tego, co możesz zrobić, aby Twoja witryna była bardziej dostępna. Należy pamiętać, że jest wiele rzeczy i niepełnosprawności do uwzględnienia, ten zarys to minimum tego, co możesz zrobić. Dokumentacja WC3 zawiera pełne wytyczne w tym zakresie.
Kolor
Nie używaj koloru jako jedynego sposobu przekazania użytkownikowi pewnych informacji. Pomaga to użytkownikom, którzy nie są w stanie odróżnić jeden kolor od drugiego. Jest to bardzo ważne w przypadku komunikatów o błędach, zwłaszcza informacji wprowadzanych przez użytkownika. Może to pomóc osobom, które są daltonistami (1 na 12 mężczyzn i 1 na 200 kobiet), niedowidzącymi (1 na 30 osób) lub niewidomymi (1 na 188 osób). Zamiast polegać wyłącznie na kolorze, możesz użyć tekstu lub ikony, aby wskazać użytkownikowi, że pole jest wymagane lub wystąpił błąd.
Tekst alternatywny
Użyj atrybutu alt, gdy używasz obrazów. To jest to, co jest wyświetlane, gdy użytkownik nie może załadować obrazu lub polega na czytnikach ekranu. Tekst alternatywny jest obsługiwany w większości przeglądarek, a tekst powinien najlepiej opisywać, czym jest obraz: <img src=”my_picture.png” alt = ”Moje zdjęcie”>.
ARIA Landmarks i semantyka HTML
Zasady tworzenia wzorców projektowych W3C zawierają wytyczne dotyczące tworzenia dostępnych menu, formularzy i nie tylko. Każdy z nich wymaga użycia semantycznych elementów HTML, takich jak na przykład <p>, <main> czy <nav>. ARIA Landmarks to atrybuty, które można dodać do elementu, aby zdefiniować ich role na stronie internetowej. Elementy semantyczne HTML i punkty orientacyjne ARIA informują czytniki ekranu, dokąd zmierzają, i pozwalają im łatwo przeskakiwać z jednej sekcji do drugiej.
Możesz dodać punkt orientacyjny, używając atrybutu role. Niektóre przykłady punktów orientacyjnych to baner, formularz i wyszukiwanie (banner, form, search). Należy zwrócić uwagę na to, że atrybut role należy umieszczać tylko na elementach takich jak <div> i <span>, a nie na elementach o znaczeniu semantycznym, takich jak <ul> lub <p>. Na przykład:
<div id = "nav" role = "navigation">
<ul>
<li> Strona główna </li>
<li> Sklep </li>
<li> Skontaktuj się z nami </li>
</ul>
</div>Sprawdź oferty pracy na TeamQuest
Formularze
Obramowania i etykiety są ważne na formularzach i nie należy ich pomijać. Dostępny formularz to taki, który ma zdefiniowaną ramkę i widoczną etykietę opisującą potrzebne dane wejściowe. Tekst zastępczy nie zastępuje etykiety. Zdefiniowane granice danych wejściowych do formularza także są niezbędne dla użytkowników z upośledzeniem ruchowym i zaburzeniami poznawczymi. Obramowania ułatwiają użytkownikowi poznanie lokalizacji i rozmiaru danych wejściowych, dzięki czemu użytkownik wie, gdzie kliknąć.
Rem / Em vs Px
Jeśli chcemy, aby użytkownicy niedowidzący mieli możliwość powiększania tekstu, to nie powinniśmy używać pikseli (px, pixels). Jeśli użyjesz px, rozmiar tekstu i odstępy między wierszami nie będą reagować na powiększanie strony. Dlatego najlepszą praktyką jest używanie rem lub em w tekście - są one responsywne.
