Jak przeprowadzić audyt dostępności pod kątem zgodności z WCAG

WCAG (wytyczne dotyczące dostępności treści internetowych) został stworzony przez konsorcjum World Wide Web (W3C) i jest najbardziej rozpoznawanym światowym standardem dostępności.

W tym artykule przedstawiamy zadania wymagane do przeprowadzenia audytu sprawdzającego zgodność ze standardem WCAG 2.1.

Ułatwienia dostępu mają na celu zapewnienie szerszej publiczności dostępu do treści i funkcji witryny.

Na przykład:

• Tymczasowa bariera dostępu – Ktoś zgubił okulary!
• Problemy z urządzeniem – znajdują się na urządzeniu, które jest restrykcyjne, np. telefonie komórkowym
• Sytuacja – Jasne światło słoneczne, ciemny pokój itp.
• Trwała niepełnosprawność – brak wzroku, słuchu, problemy poznawcze itp.
• Problemy z przepustowością – bardzo wolne połączenie

Jak widać, istnieje wiele form niepełnosprawności, które należy wziąć pod uwagę.

Wytyczne WCAG dzielą się na następujące:

Zanim przejdziesz przez każdą sekcję, oto lista tego, co będziesz potrzebować do przeprowadzenia testów:

1. Dostrzegalny

• Wybór przeglądarek zawierających tylko tekst (np. Lynx)
• Narzędzie do sprawdzania tagów alt, nagłówków itp. (np. ScreamingFrog)
• Czytnik ekranu, taki jak NVDA
• Narzędzie do testowania dostępności stron internetowych
• Narzędzia programistyczne Chrome
• Dostęp do wybranych urządzeń

Chodzi o upewnienie się, że treść jest dostępna w różnych formach. Na przykład ktoś może zobaczyć treść, odsłuchać jej, użyć dotyku, aby zrozumieć treść itp. Obejmuje to również elementy interfejsu użytkownika, takie jak menu i przyciski.

Narzędzie ułatwień dostępu WAVE jest jednym z wielu narzędzi, które można wykorzystać do wyszukiwania problemów w tym obszarze:

W powyższym przykładzie strona radzi sobie całkiem nieźle. Ma tylko 1 błąd i 5 błędów z problemami z kontrastem kolorów.

Jedynym błędem jest to, że ta strona nie wskazuje języka.

Ale na stronie jest wiele dobrych rzeczy. Na przykład na obrazku po prawej stronie, gdzie widać 2 elementy podświetlone na zielono, oba używają etykiet „ARIA”, aby pomóc czytnikowi ekranu zrozumieć tę treść. Później wyjaśnimy więcej na ten temat.

Przejdźmy przez wytyczne i kryteria sukcesu.

Wytyczna 1.1 – Zapewnienie tekstowych alternatyw dla treści nietekstowych

Czy istnieją alternatywy tekstowe dla treści nietekstowych?

Jeśli na ekranie masz zawartość nietekstową, musisz sprawdzić, czy istnieją opisy dla każdego z tych elementów.

Zanim podamy przykłady, chcę omówić ARIA, która jest sposobem na dodawanie dodatkowych opisów do elementów i powinna być używana tylko wtedy, gdy standardowy HTML nie jest możliwy.

Kiedy używasz HTML, automatycznie uzyskujesz kontrolę nad klawiaturą, fokus itp. i to jest preferencja, ale ARIA może być używana jako kopia zapasowa.

Co to jest ARIA?

ARIA (dostępne bogate aplikacje internetowe) to sposób opisywania treści, których nie da się wystarczająco opisać za pomocą standardowego HTML. Jego głównym celem są czytniki ekranu. Jeśli możesz użyć standardowego HTML, to jest to najlepsze podejście, ponieważ automatycznie zapewni fokus na elemencie i kontrolce klawiatury. Gdy nie jest to możliwe, alternatywą jest ARIA.

Obrazy opisowe

Obraz opisowy to coś, co przedstawia coś, co ma znaczenie. Na przykład zdjęcie samochodu Toyota Prius.

Jeśli nie możesz zobaczyć obrazu, musi istnieć sposób opisania tego, co przedstawia ten obraz, czyli gdzie pojawia się tag Alt.

Na platformach takich jak WordPress możesz dodać tag alt podczas przesyłania obrazu:

Dość często aktualizujemy ten tag alt, aby upewnić się, że odpowiednie słowa kluczowe są uwzględniane w celach SEO, ale musimy wyjść poza to.

Screaming Frog przeprowadzi analizę wszystkich obrazów w Twojej witrynie i wyświetli, które obrazy nie mają tagów alt, zduplikowanych tagów alt, zbyt długich tagów alt lub zbyt krótkich tagów alt!

Możesz zobaczyć obrazy obok szczegółów obrazu również:

Obraz dekoracyjny

Obraz dekoracyjny to obraz, który ma uwydatnić projekt, ale nie ma w nim nic, co warto opisać!

Obrazy dekoracyjne powinny używać właściwości tła CSS, chyba że istnieje dobry powód, aby używać tagu „img”. Jeśli czytnik ekranu widzi właściwość tła CSS, wie, że powinien zignorować obraz.

Oto przykład obrazu opisanego jako obraz tła w witrynie My Emergency Doctor w Australii:

Oto kod stojący za tym:

Ponieważ ten obraz nie jest wymieniony jako <img>, używa on roli=img, aby poinformować czytniki ekranu, że jest to obraz. Wykorzystuje „etykietę Aria”, aby dać dobry, dokładny opis obrazu. Definiuje również obraz jako „obraz w tle”.

Uwaga: jeśli używasz tagu „img” jako obrazu tła, musisz zdefiniować pusty tag alt, np. alt="”

Kiedy należy używać <img> zamiast background-color?

Jeśli obraz jest ważną częścią treści, użyj <img>. Na przykład, jeśli masz zdjęcie produktu, to jest to <img> . Możesz również mieć obrazy, które są tylko obrazami tła używanymi do celów dekoracyjnych i nie ma sensu opisywać ich jako obrazów (które będą indeksowane przez Google).

W powyższym przykładzie możesz zapytać, czy wyświetlany obraz powinien być zdefiniowany jako img, ale jest to fotografia stockowa i zdecydowali się zdefiniować go jako obraz tła, co jest w porządku.

Uwaga: <img> to znacznik HTML, ale obraz tła to styl CSS, którego używasz.

Sterowanie w interfejsie użytkownika

Istnieją różne kontrolki interfejsu użytkownika, które wymagają tekstu, aby opisać, co to jest.

Na przykład przycisk lub kontrolka formularza.

Przycisk służy do pomocy w wykonaniu funkcji. Może to być przycisk, który ma tylko ikonę i taki, który ma tekst w przycisku. Oba mogą być traktowane inaczej.

Używając ARIA możesz zdefiniować 'role=button', ale przy standardowym HTML możesz użyć tagu <button>. Którego powinieneś użyć?

Oto przykład przycisku, który ma tylko X, który wymaga od nas utworzenia „etykiety aria” opisującej, co robi przycisk.

<button aria-label=”Zamknij” onclick=”myDialog.close()”>X</button>

Oto lista typowych kontrolek interfejsu użytkownika, które musisz przetestować:

Jeśli korzystasz z formularzy, musisz upewnić się, że każde pole jest poprawnie oznaczone. Oto przykład dobrego etykietowania:

<label for=”fname”>Imię:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>Nazwisko:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

Uwaga: w przypadku formularzy należy również zapewnić:

• Wyraźnie zaznacz pola obowiązkowe. Jeśli pole jest obowiązkowe, to musi być również poprawnie oznaczone w html.
• Są instrukcje dla użytkownika (zwykle u góry formularza)
• Użytkownicy uzyskują pomoc, gdy popełnią błąd podczas wypełniania pola formularza (np. nieprawidłowy format daty, to trzeba wpisać).

Captcha

Może to być bardzo problematyczne w zależności od tego, jak jest zaimplementowane. Na przykład, gdy wyświetlane są zdjęcia i jesteś proszony o określenie, które zdjęcie zawiera sygnalizację świetlną!

Sprawdzimy implementację i przedstawimy odpowiednie sugestie.

Treści multimedialne

Wideo/audio wymaga przynajmniej opisu, aby określić, o czym jest wideo/audio.

Spinki do mankietów

Chcesz się upewnić, że linki wyraźnie wyróżniają się na stronie (np. innym kolorem) oraz że zawierają odpowiedni tekst kotwicy i opis linku.

Wytyczna 1.2 – Media oparte na czasie

Ten obszar dotyczy obsługi treści wideo i audio, które muszą być bardziej dostępne.

Czy dostępna jest transkrypcja tylko dla nagranego dźwięku, czy tylko wideo?

Transkrypcja wideo to tłumaczenie dźwięku w Twoim filmie na tekst. Transkrypcja nie zawiera informacji dźwiękowych, które opisują takie rzeczy, jak elementy wizualne wyświetlane w filmie. Jest to traktowane oddzielnie.

Wskazówka dotycząca transkrypcji!

Rev.com to świetna usługa do tworzenia podpisów/transkrypcji do audio/wideo. Zapewniają nawet usługę napisów na żywo do wideo Zoom.

Czy dostępne są napisy do wcześniej nagranego dźwięku?

Podpis to tekst, który pojawia się w filmie, aby poinformować użytkownika o tym, co dana osoba mówi.

Czy istnieje audiodeskrypcja lub alternatywa dla mediów (nagrana) ?

Kiedy oglądasz film, podpisy mogą nie wystarczyć do opisania tego, co jest w nim pokazane. Tutaj również wymagana jest audiodeskrypcja.

Na przykład audiodeskrypcja może opisywać to, co dzieje się w tle, gdy ktoś mówi, aby dać użytkownikom pewien kontekst.

Oto przykład transkrypcji zawierającej audiodeskrypcję.

To jest świetne dla odwiedzających Twoją witrynę, ale jest również dobre dla SEO!

Wskazówka dotycząca wyboru dostępnego gracza:

Chcesz się upewnić, że używany odtwarzacz wideo obsługuje wymagania dotyczące ułatwień dostępu:

1. Obsługuje napisy kodowane
2. Audiodeskrypcję można włączać i wyłączać
3. Kontrola słów kluczowych może być używana w odtwarzaczu multimedialnym
4. Odtwarzacz multimedialny działa na różnych urządzeniach i przeglądarkach
5. Wszystkie elementy sterujące są dostępne.

Czy są napisy do audio na żywo ?

Na ogół nie będziesz mieć żadnych treści wideo ani audio na żywo w swojej witrynie, ale jeśli tak, musisz jednocześnie tworzyć podpisy, aby użytkownicy widzieli podpisy wyświetlane, gdy osoba mówi.

Dostępne są narzędzia do automatycznego tworzenia napisów do wideo i dźwięku na żywo.

Czy istnieje audiodeskrypcja dla wcześniej nagranych zsynchronizowanych multimediów?

To jest dla mediów zawierających wideo i audio. Chcemy informacji audio, która towarzyszy mediom.

Wytyczna 1.3 – Możliwość dostosowania – Przedstawianie informacji w formacie zrozumiałym dla oprogramowania.

Musisz upewnić się, że to, co możesz zinterpretować wizualnie, patrząc na coś, jest opisane programowo, aby mogło być poprawnie zinterpretowane przez oprogramowanie, takie jak czytniki ekranu.

Czy istnieje logiczna struktura treści i czy łatwo jest zrozumieć związek z każdym elementem treści w tej strukturze?

Kiedy przeglądasz stronę internetową, zwykle widzisz nagłówki, akapity, pogrubioną zawartość, tabele itp. A kiedy przeglądasz szczegóły tabeli, widzisz nagłówki i wyraźnie widzisz, który wiersz jest odpowiedni do którego nagłówka.

Oto, co musisz sprawdzić:

• Czy treść jest podzielona na podtytuły?
• Czy listy, tabele itp. są używane, gdy jest to właściwe?
• Czy w treści jest poprawny kod HTML dla innych elementów strukturalnych?
• Czy etykiety i tekst alternatywny są używane zgodnie z wymaganiami (np. w formularzach?)

Wskazówka

Dobrym punktem wyjścia jest przetestowanie swojej witryny za pomocą narzędzia sprawdzającego poprawność html (np. walidator html W3.org).

Oto przykład formularza, który wyświetla wymagane pola na czerwono. Jest to w porządku dla użytkownika wizualnego, ale co z osobą korzystającą z monitora brajlowskiego?

Aby rozwiązać ten problem, słowo „wymagane” jest również dodawane do etykiety na nazwisko, które jest polem wymaganym.

 <label for="lastname" class="required">Nazwisko (wymagane): </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .wymagany {
    kolor czerwony;
  }
</style>

Czy istnieje porządek treści, który ma sens?

• Kiedy przeglądasz stronę internetową, zobaczysz pasek nawigacji, a następnie trochę treści, nagłówki, podtytuły, akapity tekstu. Chcesz się upewnić, że jest to przedstawione w odpowiedniej kolejności.
• Użyj stylów nagłówków, aby wskazać ważność sekcji. Zwykle masz tylko jeden styl <h1> do identyfikacji strony z treścią, a następnie możesz mieć wiele H2, H3 itp.
• Oddziel nawigację od treści (np. zdefiniuj nawigację za pomocą <nav>)
• Użyj prawidłowego html

Oto typowa struktura nagłówków, która ma sens:

Czy użytkownicy mogą zrozumieć treść, gdy nie są w stanie dostrzec kształtu, rozmiaru lub wykorzystać informacji o kształcie lub rozmiarze przestrzennym?

Najłatwiej to wyjaśnić na przykładzie:

Załóżmy, że masz tabelę porównawczą funkcji oprogramowania, a gdy produkt ma funkcję, w tej kolumnie wyświetlany jest obraz rombu. To nie wystarczy, musisz dodać tekst, aby wskazać, co reprezentuje ten diament.

Czy strona działa dobrze w trybie pionowym i poziomym?

Witryna musi być w stanie dostosować się do trybu pionowego lub poziomego bez utraty znaczenia.

Jeśli witryna ma poprawnie zaimplementowany projekt responsywny, to po zmianie orientacji dostosowuje się do innego widoku (tj. wybiera bardziej odpowiedni wyświetlacz na podstawie wymiarów ekranu).

Czy dane wejściowe do formularzy są poprawnie opisane?

Ma to na celu zapewnienie, że programowo istnieje wystarczająca ilość informacji o każdym polu, które należy wypełnić w formularzu.

A jeśli to możliwe, włącz automatyczne wypełnianie, aby użytkownik nie musiał wypełniać wszystkiego!

Czy przeznaczenie elementów na stronie można określić programistycznie?

Przykładem tego jest użycie elementu ARIA „role” dla sekcji strony internetowej.

Na przykład baner zawierający logo/nazwę firmy itp. można opisać jako „role=banner”.

lub za pomocą etykiet wejściowych na formularzach dotyczących adresu e-mail, nazwiska, adresu itp.

Oto jak zobaczysz to w HTML:

<typ wejścia=”e-mail>

Czy istnieje wersja tekstowa dowolnego wykresu?

Jeśli istnieje jakakolwiek zawartość typu wykres, będziesz potrzebować tabeli, która podsumowuje, o czym jest ta zawartość.

Wytyczna 1.4 – Zobacz i usłysz treści

Chodzi o ułatwienie ludziom oglądania i słyszenia treści.

Czy istnieją alternatywy tekstowe, gdy do przekazywania informacji używany jest kolor?

Wyobraź sobie, że masz formularz, a wymagane pole jest wyświetlane na czerwono.

To niewiele znaczy dla czytnika ekranu!

Ale możesz dodać słowo „wymagane” do tabeli, jak w poniższym przykładzie:

<label for=”lastname” class=”required”>Nazwisko (wymagane): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”text/css”> .wymagane { kolor:czerwony; } </style>

Czy istnieje mechanizm wstrzymywania lub zatrzymywania dźwięku, jeśli jest odtwarzany dłużej niż 3 sekundy?

Jeśli używasz czytnika ekranu i wideo automatycznie odtwarza się w tym samym czasie, usłyszysz dwa głosy!

Najlepiej byłoby, gdyby nie było automatycznego odtwarzania wideo, co rozwiąże ten problem.

Jeśli jest automatyczne odtwarzanie, upewnij się, że trwa krócej niż 3 sekundy, a jeśli nie, upewnij się, że istnieje sposób kontrolowania dźwięku odtwarzanego wideo.

Czy istnieje dobry kontrast między tekstem a obrazami/kolorem w tle?

Wszyscy wiemy, jak ważne są kolory w projektowaniu i brandingu, ale dla osób niedowidzących, które odwiedzają Twoją witrynę, kolory nie będą miały większego wpływu na ich wrażenia.

Na przykład osoby nierozróżniające kolorów nie zauważą różnicy między kolorem czerwonym, pomarańczowym, żółtym i zielonym i trzeba im również zadbać.

Kluczem jest tutaj uwzględnienie współczynnika kontrastu, który jest jednym z najczęstszych problemów związanych z dostępnością na stronach internetowych.

Czy kontrast między kolorem tekstu a jego tłem jest wystarczający? Narzędzie, takie jak sprawdzanie kontrastu kolorów, może Ci pomóc!

Kolor tła znajduje się po lewej stronie, a kolor tekstu po prawej. Wynik jest w środku.

Zaleca się, aby kontrast wynosił co najmniej 4,5:1 lub 3,1 w przypadku dużego tekstu (np. 18 lub 14 punktów pogrubioną czcionką).

Upewnij się też, że do przekazywania ważnych treści i informacji w witrynie używasz narzędzi innych niż kolor.

Na przykład Twoje główne wezwanie do działania zwykle pojawia się na stronie ze względu na kolor, który sprawia, że ​​użytkownicy je zauważają. Aby uczynić CTA bardziej dostępnym, możesz użyć rozmiaru, rozmieszczenia, pogrubienia, kontrastu, aby były zauważalne dla osób ze ślepotą barw.

Czy tekst można powiększyć, a witryna nadal będzie działać normalnie?

Oczywistym jest po prostu powiększenie tekstu na ekranie, aby pomóc osobie z wadą wzroku.

Ale chcesz, aby witryna działała normalnie, jeśli użytkownik zwiększy rozmiar tekstu.

Na przykład, gdy użytkownik powiększa tekst do 400%, musisz upewnić się, że żadne informacje nie zostaną utracone.

Oto obraz z W3.org. Jestem pewien, że nie chcesz, aby Twoja witryna wyglądała jak ta po prawej stronie po powiększeniu tekstu.

Wymóg WCAG 2.1 mówi, że powinieneś być w stanie powiększyć o 200% bez żadnych problemów.

Czy unika się obrazów tekstu, chyba że jest to konieczne?

Możesz mieć logo zawierające tekst (np. nazwę Twojej firmy), co jest w porządku.

Ale co z obrazami tekstu?

Jeśli masz obraz tekstu, musisz przynajmniej podać etykietę, która go opisuje.

Ale lepiej unikaj tego typu obrazów, chyba że:

• To niezbędne
• Jest konfigurowalny

Czy strona jest responsywna?

Przewijanie w dół w celu wyświetlenia całej strony internetowej jest normalne, ale nie w prawo lub w lewo.

Po przejściu z pulpitu na mniejsze urządzenie ekran powinien automatycznie dostosować się, aby nadal nie trzeba było przewijać w prawo lub w lewo.

Czy jest wystarczający kontrast dla treści nietekstowych?

Sąsiednie kolory muszą mieć współczynnik kontrastu co najmniej 3:1

To wymaganie dotyczy osób o stosunkowo słabym wzroku.

Czy odstępy/wysokość linii można regulować bez utraty wydajności?

• Wysokość linii (odstępy między wierszami) powinna być co najmniej 1,5 raza większa od rozmiaru czcionki;
• Odstępy w kolejnych akapitach powinny być co najmniej 2 razy większe od rozmiaru czcionki;
• Odstępy między literami (śledzenie) powinny być co najmniej 0,12 razy większe od rozmiaru czcionki;
• Odstępy między wyrazami powinny być co najmniej 0,16 razy większe od rozmiaru czcionki.

Czy treść jest poprawnie wyświetlana po najechaniu kursorem lub fokusie?

Kiedy skupisz się na elemencie (np. tabulatorze do niego) lub najedziesz na niego kursorem, zobaczysz dodatkową zawartość.

Na przykład najedziesz kursorem na przycisk i pojawi się wyskakujące okienko.

…lub wyświetlane jest podmenu.

Ta treść musi być:

Odrzucone — na przykład, jeśli klikniesz Escape, zawartość nie będzie już wyświetlana.

Hoverable — po najechaniu kursorem na zawartość zawartość jest wyświetlana tak długo, jak mysz znajduje się nad wyzwalaczem.

Trwałe – jest to połączenie obu. Treść pozostaje widoczna, dopóki użytkownik jej nie odrzuci, użytkownik odsunie mysz lub treść nie zawiera już ważnych informacji.

Uwaga: Nie dotyczy to sytuacji, gdy element HTML, taki jak tytuł, jest wyświetlany po najechaniu na coś (np. obraz).

Czy czcionka jest czytelna?

Niektóre czcionki/krój pisma są bardziej czytelne niż inne. Preferuje się serif lub sans serif, ale nie jest to obowiązkowe. Kluczową częścią jest to, że jest czytelny.

2. Działa

Oznacza to, że użytkownicy muszą mieć możliwość korzystania z nawigacji i interfejsu użytkownika poprzez interakcję z nimi. Na przykład mogą „obsługiwać” interfejs użytkownika za pomocą klawiatury.

Wytyczna 2.1 – Dostępna klawiatura

Wielu użytkowników używa klawiatury zamiast myszy lub gładzika, w tym użytkownicy z ograniczeniami mobilności lub korzystający z czytnika ekranu.

Dlatego wszystkie funkcje w Twojej witrynie muszą być dostępne za pomocą klawiatury – linki, przyciski, formularze i inne elementy sterujące.

Czy wszystko jest dostępne za pomocą klawiatury?

Nadszedł czas, aby przestać używać myszy i używać tylko klawiatury.

Sprawdzasz:

Czy wszystko odbywa się w logicznej kolejności idąc do przodu lub do tyłu (używając tabulatora, aby przejść do przodu i przesunięcia tabulatora, aby cofnąć się).

Czy będąc na konkretnym przycisku, sekcji itp. widzisz, że ten element jest podświetlony? W poniższym przykładzie jest oczywiste, że wybraliśmy zakładkę „artykuły”.

Czy wszystko jest dostępne za pomocą klawisza tabulacji i czy naciśnięcie klawisza Enter, gdy masz fokus, aktywuje akcję?

Uwaga: jeśli pojawi się wyskakujące okienko, musisz mieć możliwość nawigacji po nim.

Czy możesz pominąć nagłówek?

Kiedy używasz czytnika ekranu, nie chcesz, aby odczytywał ten sam nagłówek na każdej stronie. To doprowadziłoby cię do szaleństwa. Powinieneś więc być w stanie przejść do linku „Przejdź do treści”, naciśnij Enter, a następna karta pominie tę sekcję.

Gdy klikniesz kartę po wejściu na poniższą witrynę, znajdziesz się na linku „Przejdź do treści”. Jeśli naciśniesz enter, przejdziesz od razu do treści.

Jeśli naciśniesz drugą kartę, przejdziesz do linku „Przejdź do nawigacji”. Jeśli naciśniesz enter, zostaniesz przeniesiony do nawigacji.

Jeśli ponownie naciśniesz tabulator, przejdziesz do „przeskocz do nawigacji”. Jeśli wybierzesz tę opcję, przejdziesz bezpośrednio do nawigacji.

Jeśli jako skrót używany jest znak, interpunkcja, cyfra lub symbol, musi istnieć sposób na wyłączenie lub zmianę tego skrótu na jeden lub więcej znaków niedrukowalnych. Jedynym wyjątkiem jest sytuacja, gdy skrót jest dostępny tylko wtedy, gdy element ma fokus.

2.1.2 Czy są sytuacje, w których wpadasz w ślepy zaułek z klawiaturą (pułapka na klawiaturę) ?

Wprowadzasz zakładkę do miejsca na stronie i nie możesz przechodzić do przodu lub do tyłu.

Nazywa się to pułapką na klawiaturę. Gdy piosenka toczy się… złapany w pułapkę, nie mogę się cofnąć….

Czy istnieje alternatywa dla skrótu klawiaturowego zaimplementowanego za pomocą litery?

Posiadanie skrótu klawiszowego znaku z osobą, która polega na klawiaturze do nawigacji, nie jest dobre, ponieważ może to spowodować omyłkowe naciśnięcie go.

Dlatego musimy zapewnić alternatywę.

a) Możliwość przemapowania tej postaci na inny skrót

b). Wyłącz to

c). Jest aktywny tylko wtedy, gdy się na tym skupisz. Oznacza to, że jeśli użyjesz skrótu, nic się nie stanie, chyba że faktycznie na nim jesteś!

Wytyczna 2.2 – Wystarczająco dużo czasu

Wyobraź sobie, że ustalasz limit czasu na wypełnienie formularza, ale uwzględniasz tylko użytkowników, którzy nie potrzebują ułatwień dostępu. Ten termin może być zbyt krótki.

Czy czas jest regulowany?

Wyłączenie terminu jest idealne, ale możliwość jego przedłużenia (tj. gdy limit czasu jest bliski) lub dostosowania go do nowego czasu jest w porządku.

Czy użytkownik serwisu może wstrzymać, zatrzymać lub ukryć poruszające się, migające lub automatycznie aktualizujące treści?

Jeśli się porusza/mruga lub wije i:

a). uruchamia się automatycznie

b). trwa dłużej niż 5 sekund

c). jest prezentowana równolegle z innymi treściami

Następnie istnieje mechanizm wstrzymywania, zatrzymywania lub usuwania.

Ten sam problem z automatyczną aktualizacją treści.

Wytyczna 2.3 – Napady padaczkowe i reakcje fizyczne

Ta wytyczna ma na celu upewnienie się, że nic nie zostało zaprojektowane, co mogłoby spowodować napad lub reakcję fizyczną.

Czy „mignięcia” na ekranie spełniają wytyczne?

Zasadą numer jeden jest unikanie migających obiektów, ale jeśli nie jest to możliwe, upewnij się, że nie migają one więcej niż 3 razy w ciągu jednej sekundy lub migają poniżej ogólnego lub czerwonego progu błysku.

Wytyczna 2.4 – Nawigacja

Chodzi o ułatwienie poruszania się po witrynie.

Czy możesz pominąć powtarzające się bloki?

Wyobraź sobie, że używasz czytnika ekranu i za każdym razem, gdy trafia na nową stronę, odczytuje nawigację. To nie byłoby zabawne. Musisz więc być w stanie je pominąć. Przykład tego podałem wcześniej.

Czy wszystkie strony są poprawnie zatytułowane?

Potrzebujesz dobrych opisowych tytułów na wszystkich stronach. Jest to dobre dla dostępności, ale także dobre dla SEO.

Możesz użyć Screaming Frog, aby przeglądać tytuły stron w jednym miejscu:

Czy porządek ostrości zachowuje znaczenie?

Jeśli przeglądasz zawartość, ale robisz to w kolejności, która nie ma sensu, musisz to naprawić.

Czy możesz określić przeznaczenie linku na podstawie tekstu linku?

„Kliknij tutaj” nie jest zbyt pomocnym tekstem zakotwiczenia. Musisz mieć słowa opisujące treść, do której prowadzi link.

Co to jest tekst kotwicy?

Kiedy łączysz się z inną stroną w swojej witrynie lub zewnętrznej witrynie, tekst kotwicy to widoczny tekst, który jest powiązany ze stroną, na którą wysyłasz ludzi. Zamiast pokazywać tylko link, lepiej pokazać rzeczywisty tekst.

Czy istnieje więcej niż jeden sposób na zlokalizowanie strony internetowej?

Oto kilka przykładów:

• Mapa witryny – Miej listę wszystkich stron na mapie witryny
• Szybkie linki – masz szybkie linki, aby dostać się do ważnych stron
• Szukaj – Wyszukaj, aby znaleźć odpowiednią stronę

Czy fokus klawiatury jest widoczny?

Pytanie mówi wszystko! Zostało to również omówione w jednym z wcześniejszych wytycznych. Kiedy wybierasz się w dowolne miejsce, musisz być w stanie wizualnie zobaczyć, jak fokus znajduje się w tym obszarze.

Czy nagłówek, treść i stopka są jasno zdefiniowane?

Technologie wspomagające muszą być w stanie wyraźnie identyfikować nagłówek, stopkę i treść. Istnieją znaczniki HTML, które definiują te obszary.

Wytyczna 2.5 Metody wprowadzania

Ta wskazówka dotyczy nowszych interfejsów, w których do nawigacji nie można używać klawiatury ani myszy. Na przykład na smartfonach możesz przesuwać, szczypać i powiększać, stukać itp.

Czy funkcje wykorzystujące gesty wielopunktowe lub oparte na ścieżce mogą być obsługiwane za pomocą jednego wskaźnika bez użycia gestu (chyba że jest to konieczne)?

Gest oparty na ścieżce to miejsce, w którym musisz poruszać się po określonej ścieżce. Na przykład przesuń palcem w górę, aby uzyskać dostęp do określonej funkcji lub w dół, aby uzyskać dostęp do innych. Gest wielopunktowy polega na tym, że używasz co najmniej dwóch punktów kontaktu, aby uzyskać dostęp do funkcji, np. użyj 2 palców do uszczypnięcia i przybliżenia.

Czy istnieje prosty sposób na wyjście z akcji zainicjowanej jednym wskaźnikiem?

Co to jest pojedynczy wskaźnik?

Tutaj możesz uzyskać dostęp do funkcji za pomocą jednego punktu interakcji z ekranem, np. dotknij, kliknij, długie naciśnięcie itp.

Co najmniej jedno z poniższych musi być prawdziwe:

• Brak zdarzenia w dół – wyzwalacz jest realizowany po naciśnięciu przycisku
• Przerwij lub Cofnij — używasz zdarzenia up (tj. funkcja jest włączona po zwolnieniu wskaźnika) i istnieje sposób na przerwanie. Na przykład, naciskasz coś palcem i zamiast unosić palec prosto do góry, przesuwasz go do innej części ekranu i funkcja zostaje przerwana.
• Odwrócenie w górę – Zdarzenie w górę odwraca zdarzenie w dół
• Niezbędne – Niezbędne jest spełnienie funkcji zdarzenia w dół.

Czy widoczna etykieta komponentu odpowiada programowej nazwie tego komponentu?

Jeśli widzący użytkownik używa tekstu na mowę, zostanie odczytana nazwa programowa i lepiej będzie, jeśli będzie pasować do widocznej etykiety.

Czy funkcja obsługiwana przez ruch lub gesty może być obsługiwana również przez inne elementy sterujące interfejsu użytkownika?

Jeśli potrząśniesz lub przechylisz coś, aby to kontrolować, czy możesz użyć innego elementu sterującego interfejsu użytkownika, aby uzyskać dostęp do tej funkcji?

Zrozumiale

Chodzi o upewnienie się, że język użyty na stronie jest zrozumiały.

3.1 Czytelny

Obejmujemy następujące zagadnienia:

Czy język strony lub sekcji strony można określić programistycznie?

Powinieneś zobaczyć coś takiego na początku każdej strony. „Lang” wskazuje język strony.

<html class=”ie ie7″ lang=”en-US”>

Jeśli język na stronie zmieni się, musisz być w stanie to również zidentyfikować.

3.2 Przewidywalne

Chcesz, aby Twój interfejs działał w przewidywalny sposób, bez niespodzianek!

Czy nawigacja na stronach jest w tej samej kolejności?

Pozycja nawigacji na jednej stronie powinna być taka sama na wszystkich innych stronach, chyba że użytkownik dokona zmiany w nawigacji.

Czy komponenty, obrazy itp. są spójnie nazwane na wszystkich stronach?

Jeśli masz obraz na jednej stronie i ten sam obraz na innej stronie, chcesz, aby obraz miał taką samą nazwę.

Jeśli masz kilka stron postu i nazwałeś strony strona 1, strona 2, strona 3, która jest spójna. Etykietowanie nie musi być takie samo, jeśli nie ma sensu, ale musi być spójne.

3.3 Pomoc w wejściu

Chodzi o to, aby pomóc użytkownikom uniknąć błędów lub naprawić je:

Błąd wprowadzania — jeśli wpisujesz coś niepoprawnie, możesz wizualnie zobaczyć, że jest to niepoprawne, ale musi również znajdować się tekst identyfikujący problem.

Etykiety — gdy użytkownicy muszą wprowadzić tekst, istnieje powiązana etykieta opisująca pole.

Błąd wprowadzania — jeśli użytkownik popełni błąd, pojawi się sugestia, jak go naprawić.

Zapobieganie błędom — powinieneś być w stanie albo cofnąć, uzyskać informację zwrotną na temat błędu lub mieć możliwość potwierdzenia przed przesłaniem.

4. Solidny

Oprócz dostępności, Twoje treści muszą obsługiwać różne przeglądarki, technologie itp.

Wytyczna 4.1 Kompatybilność

Obejmuje to testowanie za pomocą różnych agentów użytkownika i technologii pomocniczych. Dobrym wstępnym testem jest użycie narzędzia W3C do sprawdzania poprawności znaczników, aby sprawdzić, czy są jakieś błędy (tj. sprawdza, czy struktura/składnia html, xhml itp. jest poprawna).

Oto przykład wyniku:

Musisz także przetestować wiele przeglądarek, aby upewnić się, że zawartość jest ładowana poprawnie.

Warto też załadować stronę w przeglądarce tekstowej (np. Lynx).

Czy wszystkie dane mogą zostać poprawnie przeanalizowane?

Czy w sekcjach treści znajdują się odpowiednie tagi początku i końca, aby łatwo było określić, gdzie zaczyna się i kończy sekcja?

Czy elementy są prawidłowo zagnieżdżone?

Czy istnieją zduplikowane atrybuty lub identyfikatory, które utrudniają rozróżnienie elementów?

Czy wszystkie elementy sterujące interfejsu użytkownika mogą być zrozumiane przez technologie wspomagające?

Oto kilka przykładów kontrolek i tego, czego potrzebujesz, aby móc to rozgryźć:

• Checkbox – zaznaczony czy nie?
• Skupienie – jaki element ma fokus i czy można to zrozumieć programowo (nie tylko wizualnie)?

Czy użytkownicy są informowani o komunikatach o stanie, które nie są skoncentrowane w sposób, który niekoniecznie przerywa pracę?

Wyobraź sobie, że przeglądasz stronę i gdy na niej pojawia się baner na górze strony, ogłaszający wyprzedaż.

Czy formularze są zaprojektowane we właściwy sposób?

Aby formularze były dostępne, upewnij się, że następujące elementy są włączone:

• Możliwość korzystania z zakładki do poruszania się po formularzu
• Możliwość korzystania z zakładki do poruszania się po formularzu

<formularz>

<label for=”fname”>Imię:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>Nazwisko:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

• Wyraźnie zaznaczone pola obowiązkowe. Jeśli pole jest obowiązkowe, to musi być również poprawnie oznaczone w html.
• Są instrukcje dla użytkownika (zwykle u góry formularza)
• Użytkownicy uzyskują pomoc, gdy popełnią błąd podczas wypełniania pola formularza (np. nieprawidłowy format daty, to trzeba wpisać).

Streszczenie

Jak widać, przeprowadzanie kompleksowego audytu dostępności jest bardzo trudne. Jednak to wszystko się opłaca, a korzyści, jakie przynosi Twojej firmie, jest wiele – od budowania pozytywnego wizerunku marki po dotarcie do szerszego grona odbiorców i poprawę SEO.