Wszystko, co musisz wiedzieć o dostępności stron internetowych

Każdy użytkownik odwiedzający Twoją stronę powinien mieć prawo do zrozumiałego doświadczenia użytkownika, bez względu na jego możliwości lub ich brak. To nie tylko nasza opinia, ale w niektórych krajach jest to prawo. Ale to nie jedyny powód, aby upewnić się, że Twoja witryna spełnia standardy dostępności. Według raportu na temat niepełnosprawności 1 miliard ludzi żyje z niepełnosprawnością, co odpowiada 15% światowej populacji . Z Twojej strony będą korzystać osoby z niepełnosprawnością fizyczną, wzrokową, poznawczą, neurologiczną, ruchową i słuchową. Chociaż używanie liczb jako powodu wydaje się odpychające, jest to znaczna liczba potencjalnych odwiedzających. Sprawienie, by Twoja witryna była użyteczna dla wszystkich, jest tego warta.

Przepaść między dostępnymi witrynami a tymi, które zwykle nie są dostępne w budżecie. Sprawienie, by Twoja witryna była inkluzywna, wymaga po prostu więcej wysiłku podczas tworzenia, a więcej wysiłku oznacza więcej pieniędzy. Ale kiedy robisz to strategicznie i za pomocą CMS, takiego jak Drupal, nie musi to oznaczać znaczącego wysiłku. Rdzeń Drupal wspiera projektowanie i tworzenie stron internetowych zgodnych ze standardami WCAG 2.0 i ATAG 2.0. W rzeczywistości istnieje cała społeczność (społeczność Drupal Accessibility) poświęcona ulepszaniu i aktualizowaniu standardów dostępności. Można nawet powiedzieć, że dostępność jest podstawową siłą Drupala.

To wszystko świetnie, jeśli masz zamiar przebudować swoją witrynę, ale co, jeśli pracujesz z już istniejącą? Zagłębmy się w dostępność sieci i dowiedzmy się, czy Twoja witryna jest dostępna, czy nie.

Co to jest dostępność sieciowa?

Dostępność sieci jest bardzo ważnym aspektem w tworzeniu stron internetowych. Mówiąc potocznie, dostępność sieci to zapewnienie, że Twoja witryna będzie dostępna dla wszystkich, niezależnie od ich niepełnosprawności. Chociaż często się zakłada, dostępność dotyczy nie tylko osób niepełnosprawnych. Jako osoba pełnosprawna istnieją okoliczności, w których możesz się znaleźć – sytuacyjne lub tymczasowe – które mogą mieć wpływ na dostęp do strony internetowej.

Dlaczego dostępność w sieci jest ważna

Innym błędnym przekonaniem jest to, że dostępność sieci jest wykorzystywana głównie do tworzenia pozytywnego wizerunku marki. Ale jest o wiele więcej namacalnych korzyści z posiadania dostępnej strony internetowej, niż wielu myśli.

• Zwiększ zasięg swoich odbiorców
• Unikaj problemów prawnych ( pamiętaj o pozwie przeciwko Beyonce w 2019 r., kiedy jej strona internetowa nie była zgodna z ADA (Americans with Disabilities Act))
• Poprawa doświadczenia użytkownika w zakresie ułatwień dostępu oznacza również poprawę ogólnego wyniku UX
• Popraw pozycję swojej witryny w wyszukiwarkach

To powiedziawszy, niedawny wzrost i popularność marek zorientowanych na cel wskazuje, że bycie inkluzywnym może być kluczowym wyróżnikiem marki.

Zgodność i poziomy

Konsorcjum World Wide Web (W3C) opracowało i opublikowało zestaw wytycznych - WCAG (Web Content Accessibility Guidelines), które regulują standardy dostępności sieci. Kryteria sukcesu tych standardów (WCAG 2.0, WCAG 2.1 i WCAG 2.2) mają trzy poziomy zgodności:

• Poziom A
• Poziom AA
• Poziom AAA

Poziom A — jest to minimalny poziom dostępności, który obejmuje najbardziej podstawowe wymagania funkcji ułatwień dostępu.

Poziom AA - Ten poziom wymaga wszystkiego na poziomie A plus kilka dodatkowych wymagań. Kiedy strona internetowa dopasowuje się do tego poziomu, jest to wielka sprawa, ponieważ wiele z największych barier dostępności zostaje usuniętych.

Poziom AAA - Poziom AAA wymaga wszystkiego na poziomach A i AA oraz kilku dodatkowych wymagań. Ten poziom jest trudny do osiągnięcia przez większość stron internetowych i jest to najwyższy poziom dostępności według standardów WCAG.

Skąd wiesz, czy Twoja witryna jest dostępna?

WCAG ustanowiło 4 zasady i 13 wytycznych dotyczących dostępności sieci. Nieprzestrzeganie którejkolwiek z tych czterech zasad spowoduje, że Twoja witryna będzie niedostępna dla użytkowników niepełnosprawnych. Zasady te są znane jako zasady POUR

1. Dostrzegalny
2. Wykonalny
3. Zrozumiale
4. Solidny

Postrzegalne — wszystkie wytyczne zgrupowane w kategorii „Dostrzegalne” dotyczą upewnienia się, że ludzie mogą znaleźć Twoje treści.

Funkcjonalny — musisz upewnić się, że Twoja witryna działa. Ludzie muszą mieć możliwość korzystania z Twojej witryny.

Zrozumiałe — ludzie muszą być w stanie zrozumieć Twoją witrynę.

Solidna - Twoja witryna powinna być kompatybilna ze wszystkimi przeglądarkami, systemami operacyjnymi i urządzeniami.

Wytyczne dotyczące ułatwień dostępu

Teraz każda zasada ma swój własny zestaw wytycznych , o których tutaj omówimy:

Dostrzegalne wytyczne

1.1) Alternatywy tekstowe – Pierwsza wytyczna „Dostrzegalne”, „ dostrzegalne” 1.1 wymaga, aby wszystkie treści nietekstowe miały alternatywę tekstową. Oznacza to, że obrazy muszą mieć sensowny tekst alternatywny. Tekst alternatywny powinien opisywać, co dzieje się na obrazie.

1.2) Media oparte na czasie - Perceivable 1.2 wymaga, aby istniały alternatywne opcje dla mediów opartych na czasie. Dodawaj napisy do filmów dla osób niedosłyszących. Napisy mogą pomóc nadać im kontekst.

1.3) Adaptowalność - Perceivable 1.3 wymaga, aby treść mogła być prezentowana na różne sposoby bez utraty kontekstu.

1.4) Rozróżnialny – Ostatnią wytyczną dotyczącą postrzegalności jest Postrzegalność 1.4 i wymaga ona wizualnego oddzielenia treści od tła. Oznacza to, że pomiędzy kolorem tekstu i tła powinien być wystarczający kontrast. Tekst musi mieć minimalny współczynnik kontrastu 4,5.

Operacyjne wytyczne

2.1) Dostęp z klawiatury — Pierwsza wytyczna 2.1 dotycząca obsługi wymaga, aby dostęp do wszystkich części witryny był możliwy wyłącznie za pomocą klawiatury .

2.2) Wystarczająco dużo czasu - Operable 2.2 wymaga, aby ludzie mieli wystarczająco dużo czasu na korzystanie z zawartości Twojej witryny. Musisz dać użytkownikowi czas na wykonanie zadania bez pośpiechu. Musisz również wziąć pod uwagę, że różni ludzie mają różne umiejętności, a niektórzy mogą być nieco wolniejsi w wykonywaniu zadań.

2.3) Napady i reakcje fizyczne - Operaable 2.3 wymaga, aby zawartość nie była zaprojektowana w sposób powodujący napady. Animacje i filmy nie powinny migać więcej niż 3 razy na sekundę.

2.4) Navigable - Operable 2.4 wymaga, aby ludzie mogli poruszać się po witrynie i rozumieć, gdzie się znajdują. Wszystkie linki, dane wejściowe i przyciski na stronie powinny mieć skoncentrowany stan, aby wskazać, gdzie na ekranie znajduje się dana osoba, gdy użytkownicy nawigują za pomocą kart.

2.5) Metody wprowadzania danych – Ostatnią wytyczną dla Operable jest Operable 2.5 i wymaga ona, aby dostęp do wszystkich części witryny był możliwy za pomocą innych urządzeń wejściowych oprócz klawiatury. Zasadniczo będziesz chciał się upewnić, że Twoja witryna działa z myszą, urządzeniami z ekranem dotykowym i mową na tekst.

Zrozumiałe wytyczne

3.1) Czytelny - Zrozumiały 3.1 wymaga, aby treść była czytelna i łatwa do zrozumienia. Używaj prostego języka i staraj się unikać żargonu.

3.2) Przewidywalne - Zrozumiałe 3.2 wymaga, aby strony internetowe były przewidywalne pod względem wyglądu i działania. Treść będzie inna na każdej stronie, ale główna struktura strony powinna pozostać taka sama. Nawigacja, kolejność linków i wyszukiwanie powinny zawsze znajdować się w tym samym miejscu na stronie.

3.3) Wprowadzanie pomocy - Zrozumiałe 3.3 wymaga, aby ludzie mogli łatwo korygować i unikać błędów.

Solidne wytyczne

4.1) Kompatybilny - W ramach solidnego istnieje tylko jedna wytyczna, a mianowicie 4.1 . Wymaga to, aby witryna była kompatybilna ze wszystkimi przeglądarkami, systemami operacyjnymi i urządzeniami. Można to osiągnąć, pisząc poprawny, semantyczny kod HTML. Jeśli z jakiegoś powodu strona nadal potrzebuje pomocy dotyczącej ułatwień dostępu, dodaj kilka atrybutów ARIA.

Jak przetestować dostępność?

Wreszcie, chcesz włączyć testowanie dostępności do procesu zarządzania witryną. Na przykład możesz przeszukiwać strony, aby przetestować dostępność klawiatury. Na szczęście w Internecie dostępnych jest wiele narzędzi do automatyzacji testów:

• Fala
• Latarnia morska

Witryny referencyjne

Zapoznaj się z poniższymi witrynami W3C, aby zapoznać się ze standardami i wytycznymi.

• https://www.w3.org/
• https://www.w3.org/WAI/
• https://www.w3.org/WAI/standards-guidelines/wcag/
• https://www.w3.org/WAI/WCAG21/quickref/