10 sposobów na zaprojektowanie witryny pod kątem dostępności

Jestem sfrustrowany nowoczesnym projektowaniem stron internetowych. I z pewnością jestem sfrustrowany większością projektantów motywów i szablonów, którzy sprzedają swoje prace bez sprawdzania globalnej dostępności.

Wielu projektantów faktycznie bierze dobre, dostępne CMS-y, a następnie tworzy projekty z dużymi problemami z dostępnością.

Jestem prawnikiem, projektantem stron internetowych i konsultantem ds. dostępności/różnorodności w Australii. Po doradzaniu sektorom korporacyjnym, rządowym i edukacyjnym stwierdzam, że wiele witryn jest niedostępnych i oferuje wielu użytkownikom złe doświadczenia.

Dlaczego dostępność jest ważna?

W 2010 roku 10% ludzi w krajach rozwiniętych miało problemy z drukowaniem. Odsetek ten wyniósł 15% w krajach nierozwiniętych.

W Australii dostępność jest uważana za na tyle ważną, że mogę skierować Cię do sądu, jeśli Twoja witryna jest niedostępna. Wstrząśnięty?

Nie, nigdy nie poleciłbym klientowi skupienia się na „stronach dla niewidomych”, ale stronach dostępnych dla wszystkich. Obejmuje to osoby z niepełnosprawnością drukowania, niepełnosprawnością fizyczną, niepełnosprawnością słuchu - nawet starsze pokolenia. Krótko mówiąc, duża część całej Twojej grupy odbiorców po prostu nie może uzyskać dostępu do Twojej witryny w taki sposób, jak Ty.

Kosztowny? Nie, w rzeczywistości wraca do standardów projektowych, bo to jest naprawdę podstawowa rzecz.

Oto dziesięć kroków, które możesz wykonać, aby zapewnić dostępność witryny.

#1. Spraw, aby Twoja witryna była łatwa w użyciu

Nie muszę wam mówić, jak projektować. Ale te trzy kluczowe zasady pomogą użytkownikom niepełnosprawnym:

1. Spraw, aby strony były łatwe do odczytania i zrozumienia
2. Spraw, aby strony były łatwe w nawigacji
3. Spraw, aby strony były łatwe w użyciu na urządzeniach mobilnych

To zbliży Cię do dostępności, a także pomoże wyszukiwarkom pokochać Twoją witrynę!

Czytniki ekranu, z którymi testuję moje witryny, są takie same jak roboty Google (z wyjątkiem ślepej technologii, która pojawiła się jako pierwsza).

#2. Przetestuj za pomocą oprogramowania ułatwień dostępu

Czy wiesz, że komputery PC mają oprogramowanie ułatwiające nawigację i czytanie zawartości ekranu? Prawdopodobnie tak, ale czy wiesz, że urządzenia mobilne mają wbudowane oprogramowanie ułatwień dostępu? To oprogramowanie może czytać osobom, w tym osobom z wadami wzroku:

• Apple (iOS) używa VoiceOver;
• Android używa Talkback;
• Windows używa Narratora.

Niemal wszyscy projektanci stron internetowych umieszczają menu w szablonie, ale 95% nie można odczytać za pomocą żadnej z powyższych technologii! Większość z tych usług ułatwień dostępu nie może rozpoznać istniejącego menu, ponieważ jest ono niepoprawnie zakodowane. Najczęściej problemem jest to, że menu jest źle zakodowane lub nieoznaczone.

Warto załadować niektóre witryny do telefonu i włączyć funkcje ułatwień dostępu. Sprawdź, czy menu Twojej witryny działa.

#3. Nie pisz wszystkiego wielkimi literami

Jest to prawdopodobnie najbardziej podstawowa zmiana, jaką każdy może wprowadzić na swojej stronie: nie pisz wielkimi literami.

Jest to naukowo przetestowane i udowodnione, PONIEWAŻ WSZYSTKIE CZAPKI SĄ TRUDNE DO CZYTANIA!

Najbardziej nadużywana wielkość liter znajduje się w elementach menu i przyciskach. Pomagasz przekazać swoją wiadomość, jeśli piszesz normalnie, używając wielkich liter, chyba że masz konkretny cel projektowy – na przykład marka lub logo.

#4. Wyjaśnij jasno swoje linki

Przyciski „Czytaj więcej” lub „Kliknij tutaj” nie informują Google (ani osób korzystających z czytników ekranu), co znajduje się za linkiem. Po prostu wyjmij link z kontekstu, aby sprawdzić, czy ma to sens. Czy „Czytaj więcej” na środku strony ma dla Ciebie sens? Co więcej?

#5. Używaj dobrych kontrastujących stylów

Nie oznacza to zabijania treści — oznacza to ułatwienie osobom niedowidzącym. Oto wskazówka… przełącz ekran telefonu komórkowego na połowę mocy i spróbuj przeczytać stronę. Jak to wygląda w świetle i ciemności?

#6. Użyj linków „przeskocz do treści”

Wyobraź sobie, że kiwasz głową 30 razy, zanim przeczytasz główną treść! Osoby z trudnościami w drukowaniu muszą to zrobić, jeśli nie pozwolisz im pominąć menu. Właściwie to samo dotyczy tagów nagłówków, H1 do H4 pomagają wyszukiwarkom i osobom z trudnościami w drukowaniu poruszać się po Twojej witrynie.

Aha, i nie ukrywaj linku poza ekranem! Osoby niedowidzące często używają lup i szukają tych linków ręcznie (nie za pomocą klawiatury).

7. Przestań używać wyskakujących okienek

Przynajmniej przestań używać tych, których nie możemy wcisnąć „esc”, aby się ich pozbyć. Czy wiesz, że nasze oprogramowanie w zasadzie nie może dostać się do tych wyskakujących okienek? I zwykle czytamy, co kryje się za pudełkiem – dla ciebie jest wyszarzone, ale nie dla nas.

Jeśli zamierzasz korzystać z wyskakujących okienek:

• Ustaw je tak, aby można je było odrzucić za pomocą przycisku „esc”.
• Uczyń je tak, aby nasze oprogramowanie mogło odczytać ramkę, a nie tekst za nią.
• Podaj szczegóły alternatywnego sposobu wyszukiwania treści lub wypełnij formularz - „lub przejdź do naszej strony xxxx, aby uzyskać więcej informacji”.

#8. W niektórych sytuacjach przydatne mogą być narzędzia do zmiany rozmiaru tekstu

Osobiście zmiany rozmiaru tekstu są znacznie mniej ważne niż przejście do linków do treści. Dzieje się tak, ponieważ osoba z trudnościami w drukowaniu (w tym starsze pokolenie) będzie używać albo lupy Windows, albo jakiegoś specjalistycznego produktu - takiego jak powiększenie tekstu, magiczne oczy lub inne darmowe oprogramowanie. Z mojego doświadczenia wynika, że ​​resizery generalnie niszczą treści mobilne – i są jeszcze mniej responsywne niż szczypanie lub używanie podstawowych funkcji ułatwień dostępu mobilnego.

Ponadto, dzięki adaptacyjnej technologii zmiany rozmiaru tekstu, użytkownik może ją wyłączyć i włączyć, aby móc znaleźć się na ekranie (niektóre przybliżenie, aby mogli widzieć tylko 1/8 ekranu na raz). To powiedziawszy, zmiany rozmiaru tekstu mogą nadal być istotne i warte wprowadzenia w witrynach rządowych – po prostu nie jest to dla mnie priorytet 10.

#9. Używaj ikon czcionek zamiast ikon graficznych

Ci, którzy używają powiększenia, mogą zobaczyć tylko około 1/8 strony na raz, a ci, którzy używają telefonów komórkowych, zwykle ładują wersje bez obrazów - naciskając przycisk „czytnik”. Mógłbym napisać post o tym, że większość „ikon obrazów” pikseluje do maksimum przy maksymalnym powiększeniu, ale ikony czcionek nie (cóż, i tak nie tak bardzo).

#10. Dodaj transkrypcje wideo

Nie ma sensu umieszczać filmu na YouTube na stronie internetowej, jeśli jest on całkowicie cichy, ani nie ma sensu umieszczać takiego, który nie ma transkrypcji ani sposobu, w jaki mogą go śledzić osoby niedosłyszące. To byłoby jak posiadanie globalnej publiczności lub bazy klientów, ale dostarczanie informacji tylko w języku japońskim.

Tylko dla zabawy, obejrzyj techniczny film z YouTube bez mowy, a następnie zamknij oczy. Uwaga - zamykanie oczu nie odtwarza ślepoty, ponieważ możesz je po prostu ponownie otworzyć, ale jest to zabawne ćwiczenie.

Zasoby dotyczące ułatwień dostępu

Te witryny zawierają wskazówki i narzędzia do sprawdzania witryny:

• Narzędzie do sprawdzania ułatwień dostępu do celu
• Wytyczne dotyczące dostępności treści internetowych rządu australijskiego
• Walidator W3C. Zauważ, że walidator W3C zwraca wiele niepotrzebnych błędów. Musisz ocenić, czy każdy błąd jest wart zachodu, czy nie.

Te witryny zapewniają czytniki ekranu, za pomocą których możesz przetestować swoją witrynę na komputery:

• Dostęp do zadań za pomocą mowy (JAWS)
• Ai squared oferuje bezpłatne wersje próbne
• Window Eyes - czytnik ekranu
• NV Access oferuje całkowicie darmowy czytnik ekranu Non Visual Desktop Aid (NVDA)

Uwaga: Nie polecam Sitecues: nie nazwałbym tego łatwym w instalacji lub skutecznym dla osób z trudnościami w drukowaniu.

Wniosek

Jak wszystko, istnieje równowaga między funkcjonalnością a ścisłym przestrzeganiem zasad. Żadna z witryn moich klientów nie jest w 100% dostępna / zgodna z W3C. Są dostępne - i przyjazne dla wyszukiwarek. Są logiczne i dobrze skontrastowane, ale mają też styl i cechy, które mają wpływ.

Ile milionów ludzi na świecie ma problemy z drukowaniem? Ilu potencjalnych klientów?

Niezależnie od tego, czy tworzysz strony w Joomla, Drupal, WordPress, czystym HTML czy na jakiejkolwiek innej platformie, mam nadzieję, że przekonałem Cię, że ten problem warto traktować poważnie, dla Twojej firmy i Twoich klientów.