Jak przeprowadzić podstawowy audyt dostępności

Opublikowany: 2017-08-09

Dlatego ostatnio dużo się nauczyłeś na temat ułatwień dostępu, ale teraz chcesz samodzielnie sprawdzić swoją witrynę i zobaczyć, co należy ulepszyć. Jak się do tego zabrać? Czas na audyt dostępności! W tym samouczku pokażę Ci zasady podstawowego audytu dostępności, który zaprowadzi Cię na drogę do posiadania bardziej dostępnej witryny.

Jak pamiętasz z mojej serii przeglądów, dostępna strona internetowa jest dostrzegalna, funkcjonalna, zrozumiała i solidna. Testowanie, aby upewnić się, że Twoja witryna spełnia wszystkie cztery filary dostępności, nie wymaga kodowania, więc nie martw się. Możemy zainstalować rozszerzenie do Chrome lub dwa, ale podziękujesz mi później. Zacznijmy!

UWAGA: w tym samouczku założono, że wiesz, jak korzystać z Inspektora Chrome lub podstawowych narzędzi programistycznych dowolnej przeglądarki.

Dostrzegalny

układ według kontroli dostępności koła zamachowego kobieta w okularach przeciwsłonecznych z tabletem

Zacznij od postrzegalności, ponieważ jeśli Twoja witryna nie może być postrzegana przez użytkownika, nie wie, że istnieje. Tutaj skupimy się na trzech rzeczach: alternatywach tekstu, podpisach i kolorze.

Dla każdego obrazu w Twojej witrynie, który jest czymś więcej niż tylko dekoracyjnym (co oznacza, że ​​jest to ważna część informacji, a nie tylko ulepszenie), obraz powinien mieć atrybut alt . Możesz to sprawdzić, sprawdzając kod źródłowy obrazu i szukając atrybutu. Jeśli tam jest, to świetnie! Teraz musimy się upewnić, że wartość atrybutu jest użyteczna. Atrybut alt powinien opisywać obraz w sposób informujący użytkowników niedowidzących. To NIE jest okazja do umieszczenia słów kluczowych SEO w Twojej witrynie. Niech opis będzie krótki, rzeczowy i pomocny. Dłuższe opisy należy zapisać dla samej treści witryny.

Wraz z obrazami towarzyszą treści wideo i audio. W obu przypadkach musisz podać napisy lub transkrypcję treści. Twoje filmy powinny mieć włączone napisy kodowane lub zawierać napisy wstępne. Testowanie tego jest tak proste, jak rozpoczęcie filmu w witrynie i sprawdzenie napisów.

Na koniec musimy przetestować nasze kolory. W tym celu zainstalujemy rozszerzenie do Chrome, które włącza tryb skali szarości. Po zainstalowaniu ponownie załaduj swoją witrynę i włącz rozszerzenie. Zwróć uwagę na obszary, które są trudne do odczytania. To tutaj są twoje problemy z kontrastowej perspektywy. Stamtąd wyłącz skalę szarości i użyj sprawdzania kontrastu kolorów Snook, aby sprawdzić swoje wyniki. Będziesz musiał użyć inspektora, aby pobrać swoje wartości szesnastkowe, jeśli nie masz ich pod ręką. Pamiętaj, że wszystko poniżej 4,5 (lub 3,0 w przypadku dużego tekstu) jest problemem.

Wykonalny

Następnym krokiem jest upewnienie się, że witryna działa. Oznacza to, że będziemy testować funkcjonalność klawiatury. Aby to zrobić, otwórz swoją witrynę. Po załadowaniu strony naciśnij klawisz tabulatora. Co się dzieje? Mamy nadzieję, że pojawi się link do pominięcia. Jeśli nie, powinieneś przynajmniej opisać pierwszy link na stronie. Idealnie byłoby mieć niestandardowe stany :focus , ale absolutnym minimum powinno być to, co zapewnia przeglądarka. Stamtąd naciskaj klawisz tabulatora, aby upewnić się, że przechodzisz od linku do linku w kolejności, w jakiej pojawiają się na stronie. Jeśli Twoja koncentracja ciągle skacze, masz problem z indeksem zakładek, który należy rozwiązać. Wtyczki formularzy są tu często winowajcą.

układ przez człowieka audytu dostępności koła zamachowego we flaneli na telefonie komórkowym w etui

Zrozumiale

Następnie sprawdzimy Twoją witrynę, aby upewnić się, że jest czytelna. W końcu, jeśli użytkownik nie może przeczytać Twoich treści, jaki jest sens ich posiadania? Wymagania tutaj są dość proste: czy język Twojej witryny można określić za pomocą kodu? Aby to sprawdzić, otwórz inspektora i spójrz na główny tag <html> . Czy ma atrybut lang ? Jeśli tak, to jasne. Upewnij się również, że wszystkie segmenty w innym języku mają zastosowany atrybut lang.

Istnieją inne kontrole czytelności na poziomie AAA, ale wykraczają one poza zakres podstawowego audytu. Ogólnie rzecz biorąc, będziesz chciał, aby Twoje treści były na poziomie czytania dla szóstej klasy, chyba że Twoi docelowi odbiorcy mają wyższy poziom wykształcenia.

Inne ważne aspekty niestabilności Twojej witryny dotyczą komunikatów o błędach i zmiany kontekstu. Dokładniej, ich brak. Kiedy użytkownik skupia się lub aktywuje dane wejściowe, nie powinna nastąpić istotna zmiana. Strona nie powinna przeskakiwać, chyba że użytkownik zostanie w jakiś sposób ostrzeżony (ikona strzałki, tekst pomocniczy itp.). Są to rzeczy, które można by zauważyć podczas testowania z klawiaturą.

Podczas testowania formularzy to samo można powiedzieć o komunikatach o błędach. Błędy powinny być wyraźnie widoczne dla użytkownika i pozostawać na ekranie, aby mógł poprawić błędy. To jest coś, co nawet duże strony internetowe cały czas się mylą. Zapominają skupić uwagę na części strony, w której występuje błąd, a przynajmniej w jakiś sposób to zaznaczyć. Przetestuj swoje formularze pod kątem błędów i upewnij się, że komunikaty są jasne. Korzystanie z wtyczki Solid Forms bardzo w tym pomoże, ale nie polegaj na wtyczce, aby wykonała całą swoją pracę. Upewnij się również, że nie używasz tylko koloru (zwykle czerwonego) do oznaczenia błędu. Rzeczywisty tekst „Błąd” jest bardzo ważny, szczególnie dla osób ze ślepotą na kolory czerwony/zielony.

Poza błędami Twoje formularze i dane wejściowe powinny zawierać jasne instrukcje. Przejrzyj każdy wpis w swojej witrynie i upewnij się, że jest całkowicie jasne, co powinien zrobić użytkownik. Na przykład formularze wyszukiwania powinny mieć coś poza lupą. Wystarczy prosta etykieta „szukaj”. Upewnij się, że Twoi użytkownicy wiedzą, co zrobić z elementami interaktywnymi. Nigdy nie zakładaj.

Solidny

układ za pomocą destop audytu dostępności koła zamachowego z wykresami i notatnikiem przed klawiaturą

Wreszcie, Twoja witryna musi być solidna. Oznacza to, że z witryny można korzystać z technologiami pomocniczymi, takimi jak czytniki ekranu. Jeśli Twoja witryna jest dobrze sformatowana za pomocą HTML, wszystko powinno być w porządku. Pamiętaj tylko, że niektóre nowoczesne przeglądarki, w tym Chrome, naprawiają podstawowe błędy HTML lub przynajmniej próbują je naprawić. Najszybszym sposobem przetestowania niezawodności witryny jest załadowanie jej w przeglądarce Safari i włączenie wbudowanego czytnika ekranu VoiceOver. Jeśli Twoja witryna nie działa, musisz rozwiązać te problemy.

Zawijanie

Ten samouczek dotyczący audytu był szybki, ale o to właśnie chodzi. Upewnienie się, że witryna jest dostępna, nie trwa długo, a wymagane narzędzia są minimalne. Ważną rzeczą do zapamiętania jest to, że chcesz postawić się w sytuacji kogoś, kto nie ma umiejętności, które uważasz za oczywiste jako przeciętny użytkownik. Zachowaj ten sposób myślenia, a Twoje audyty zapewnią, że Twoje witryny będą bardziej dostępne.

Jeśli go przegapiłeś, zapoznaj się z tą serią o ułatwieniach dostępu:

  • Wprowadzenie do dostępności: część 1
  • Wprowadzenie do dostępności: część 2
  • Wprowadzenie do dostępności: część 3