Czy Twoja strona internetowa jest dostępna?

Coraz więcej firm przechodzi na internet, co jest świetne, ale nie, jeśli cała część populacji nie może korzystać z witryny. Problemy z dostępnością są powszechne w wielu witrynach, powodując wiele problemów, które można stosunkowo łatwo rozwiązać - nie oznacza to, że potrzebujesz zupełnie nowej witryny!

Na podstawie raportu WHO z 2011 r. na temat niepełnosprawności ponad 1 miliard ludzi na świecie cierpi na jakąś formę niepełnosprawności. Odpowiada to około 15% światowej populacji. Liczba ta będzie rosła wraz ze starzeniem się populacji, a osoby starsze mają wyższe ryzyko/odsetek niepełnosprawności. .

W 2018 r. rząd Wielkiej Brytanii nakazał rządowi centralnemu, organizacjom samorządowym, niektórym organizacjom charytatywnym i innym organizacjom pozarządowym spełnienie wytycznych WCAG2.1.

Następnie w 2019 roku powstała europejska ustawa o dostępności. Już w 1990 roku Amerykańska Ustawa o Niepełnosprawnościach obejmowała kwestie, które są obecnie poruszane na stronach internetowych. W niektórych sytuacjach firmy są obecnie pozywane do sądu i przegrywają, na przykład w sprawie Domino's Pizza.

Ludzie nie zawahaliby się, aby upewnić się, że miejsce jest fizycznie dostępne, więc dlaczego udostępnianie witryny jest czymś innym? Nigdy nie było to tak ważne, jak teraz, ponieważ coraz więcej firm korzysta głównie z Internetu.

Cel, powód

Naszym celem jest tworzenie integracyjnych stron internetowych, ponieważ dostępność jest prawem człowieka.

Witryna nie tylko będzie łatwiejsza w użyciu dla wszystkich, ale potencjalnie przyniesiemy klientowi więcej leadów. Click away funt stwierdził: „Nieudostępnienie dostępnych witryn konsumenckich kosztowało brytyjskich detalistów 11,75 miliarda funtów w 2016 roku”.

Problemy

Główny problem dotyczy tego, jak myślimy o integracji, a nawet o samych niepełnosprawnościach. Jestem wielkim fanem Adriana Roselli i jego sposobu podejścia do tego poprzez samolubną metodę dostępności. Oto wideo Adriana z niedawnej konferencji. Gorąco radzę obejrzeć go z innej perspektywy na niepełnosprawność i typowe problemy, z jakimi mogą się zmagać ludzie.

Zasadniczo łączy typowe problemy z dostępnością stron internetowych z codziennymi sytuacjami, których doświadczają wszyscy, nie tylko osoby niepełnosprawne. Na przykład problemy z kontrastem, po prostu wyjaśnia, że ​​jest to również problem, jeśli osoba korzysta z laptopa na słońcu lub w jasno oświetlonym miejscu. Widzimy więc, że w naszym najlepszym interesie jest upewnienie się, że nasza strona jest dostępna również dla szerszej populacji.

Jak widać z jego filmu i statystyk, osoby z problemami z ułatwieniami dostępu są znacznie częstsze, niż mogłoby się wydawać.

Typowe problemy z dostępnością

Zdecydowaliśmy więc, że uczynienie naszych stron integracyjnych jest korzyścią dla wszystkich (mam nadzieję!). Pierwszą rzeczą, która przychodzi ludziom na myśl, gdy zajmujemy się dostępnością, jest to, że musimy wbudować dodatkowe funkcje lub funkcje, których wdrożenie będzie kosztowne i terminowe, lub że ograniczy to projekty.

W rzeczywistości tak nie jest i wiele z nich można rozwiązać w bardzo prosty sposób przy odrobinie namysłu, planowania i korzystania z egoistycznej metody dostępności Adriana Roselli.

Kolory i kontrast

Około 8% (1 na 10) WSZYSTKICH mężczyzn na świecie jest daltonistami, więc wybierzmy paletę kolorów, która spełnia te wymagania.
Jeśli strona internetowa klienta używa kolorów, które są niedostępne, zapytaj go, czy jest zadowolony, że potencjalnie traci 8% swoich leadów. Jestem pewien, że jeśli im to powiesz, mogą przemyśleć kolory.

Wybierając te kolory, upewnij się również, że używasz dobrego współczynnika kontrastu między nimi, nie chcesz, aby Twoje linki były ukryte, jeśli są na tle o niskim kontraście (laptop na słońcu…). Jest to 5-minutowa praca przy użyciu narzędzia do sprawdzania kontrastu online lub jeśli chcesz być konkretny dla swoich linków, użyj narzędzia do sprawdzania linków.

Rozmiar i wybór czcionki

Czy Twoja witryna zawiera informacje, które chcesz, aby ludzie zrozumieli? Podejrzewam, że tak. Upewnijmy się więc, że jeden z najważniejszych elementów witryny jest przyswajalny dla oczu, zanim nacisną one przycisk Wstecz.

Prawie 1 na 10 osób, które będą przeglądać Twoją witrynę, będzie miała jakiś problem z oczami (nie licząc ślepoty barw). W wieku 40 lat tylko połowa światła dociera do siatkówki, tak jak w wieku 20 lat. W przypadku osób powyżej 60. roku życia spada do 20%.

Domyślny rozmiar czcionki w treści przeglądarki to zwykle 16px lub 1rem, jest to również zalecany „minimalny” rozmiar czcionki, ale spójrzmy prawdzie w oczy, że jest po prostu za mały! Najczęstszym argumentem jest tutaj to, że „Ludzie mogą po prostu powiększyć, jeśli chcą, aby tekst był większy”. Problem polega na tym, że większość osób dotkniętych tym problemem prawdopodobnie nie wie, jak powiększać, więc nie powinniśmy zakładać, że jest to dla nich opcja.

Nie ma „najlepszego” rozmiaru ani czcionki, ale polecam rozmiar czcionki ciała bliższy 18px lub 1,125rem, z przyzwoitymi odstępami wysokości linii, odpowiednią czcionką i minimalnym minimum bibliotek czcionek. Webaim ma dobry artykuł na temat czcionek i stwierdza: „Za każdym razem, gdy napotkasz nowy krój pisma, czcionkę lub odmianę czcionki, twój umysł musi zbudować mapę lub model znaków i wzorów, aby szybciej przeanalizować słowa i przetworzyć ich znaczenie. Wymaga to wysiłku poznawczego i czasu. Jeśli krój pisma jest już znajomy, ten narzut jest zmniejszony”.

Gill Andrews ma bardziej obszerny post na temat błędów typograficznych, który warto przeczytać, jeśli masz do czynienia z dużą ilością typografii.

Obrazy

Nie ma tu zbyt wiele do wymienienia, ale upewnij się, że masz tag alt na swoim obrazie. Większość CMS ma teraz opcję dodania tagu alt obrazu podczas przesyłania. Upewnij się, że rzeczywiście opisujesz obraz, jeśli jest to ważne. Ten artykuł o hubspotie zawiera dobry opis dobrego i złego użycia tagów alt.

Jeśli obraz nie jest ważny i jest czysto dekoracyjny, jak wzór tła, pozostaw znaczniki puste. Po prostu upewnij się, że jest rzeczywiście pusty w znaczniku, tak jak: alt=”” lub zostanie oznaczony jako brakujący tag alt.

Jedną ważną rzeczą do zapamiętania jest to, że nie należy używać obrazów w ważnych tekstach (takich jak nagłówki), ponieważ będą one nieczytelne dla czytników ekranu i Google. Zachowaj ostrożność, umieszczając tekst również na obrazach, ponieważ może on stać się nieczytelny z powodu tła.

Struktura

Jedną z rzeczy, która zwykle jest pomijana, nawet jeśli postępujesz zgodnie z powyższymi podstawami, jest rzeczywista struktura semantyczna strony. Wiele osób łapie rozmiar czcionki lub nagłówka i używa ich do stylizacji zamiast definiowania hierarchii informacji na stronach.

Nie tylko wpłynie to na sposób interpretacji treści przez Google, ale osoby korzystające z czytników ekranu będą używać znaczników strukturalnych jako nawigacji. Yoast ma świetny artykuł na temat nagłówków, który powinieneś poświęcić trochę czasu na przeczytanie. Prostą radą byłoby umieszczenie jednego elementu <h1> na swojej stronie, a następnie <h2> dla następnych ważnych sekcji. Jeśli masz dziecko z podsekcji, użyj <h3> i tak dalej:

<h1>Zazwyczaj tytuł strony</h1>

<p>Tutaj trochę tekstu akapitowego</p>

<h2>Następna ważna sekcja Twojej strony</h2>

<p>Tutaj trochę tekstu akapitowego</p>

<h3>Coś nie tak ważnego, ale związanego z powyższym h2</h3>

<p>Tutaj trochę tekstu akapitowego</p>

<h2>Następna ważna sekcja Twojej strony</h2>

Podsumowanie

Mam nadzieję, że widzisz, że postępując zgodnie z tymi prostymi zasadami, uczynisz swoją witrynę bardziej dostępną i przyjemniejszą dla wszystkich odwiedzających ją osób. Nie tylko to, ale także poprawiasz swoją pozycję w Google, więc jest to korzystne dla wszystkich.

Jeśli nie masz pewności, czy Twoja witryna spełnia te standardy, lub po prostu potrzebujesz pomocy w poprawie jej dostępności, skontaktuj się z nami.