Ułatwienia dostępu i nagłówki: projektowanie dla użytkowników niedowidzących

Opublikowany: 2021-07-19

Drobny szczegół, taki jak sposób używania nagłówków w witrynie lub aplikacji, może kosztować potencjalnych lub sprzedaż. Czytaj dalej, aby dowiedzieć się, dlaczego Twoja witryna powinna być dostępna, co może się stać, jeśli nie jest, i poznać najlepsze praktyki dotyczące korzystania z nagłówków, aby poprawnie poprowadzić użytkowników przez stronę.

Sprawa dostępności

Nagłówki można łatwo przeoczyć podczas projektowania nowej witryny lub aktualizacji starej. Marketerzy mają tendencję do skupiania się bardziej na estetycznej stronie projektu, a mniej na praktycznej stronie. To prawda, że elementy wizualne odgrywają ważną rolę w doświadczeniu użytkownika (UX) strony internetowej, jednak zwiększenie jej dostępności dla użytkowników z niepełnosprawnością wzroku może zwiększyć liczbę odwiedzających, którzy dokonali konwersji.

Statystyki potwierdzają naszą argumentację za dostępnością:

około 253 miliony ludzi na całym świecie cierpi na wadę wzroku
każdego dnia w Wielkiej Brytanii 250 osób zaczyna tracić wzrok
ponad 2 miliony osób w Wielkiej Brytanii żyje z utratą wzroku, która ma znaczący wpływ na ich codzienne życie, np. niemożność prowadzenia samochodu
Zwyrodnienie związane z wiekiem jest główną przyczyną ślepoty u dorosłych.

niewidomy mężczyzna używający telefonu

Przy 4,1 miliona osób, które do 2050 roku w Wielkiej Brytanii ucierpią z powodu utraty wzroku , firmy nie mogą sobie pozwolić na niedostosowanie swoich stron internetowych do wszystkich odbiorców. Jest to szczególnie ważne, jeśli ich rynkiem docelowym jest starsza grupa demograficzna, która jest bardziej podatna na problemy ze wzrokiem.

Prosty aspekt, taki jak prawidłowe używanie nagłówków, może mieć ogromne znaczenie i nie jest trudny do zastosowania. Może to również zaoszczędzić koszty związane z procesem sądowym.

Sprawa Domino

Domino's Pizza to dobry przykład na to, jak zaniedbywanie dostępności dla użytkowników niedowidzących może być kosztowne.

Niewidomy klient z USA złożył skargę w 2016 roku po tym, jak zmagał się z wyborem dodatków, skorzystaniem z kodu rabatowego, a nawet zrealizowaniem zamówienia w aplikacji restauracji na iPhone'a. Problem polegał na tym, że aplikacja nie integrowała się z oprogramowaniem do czytania ekranu telefonu, które wypowiada treści na podstawie prawidłowego użycia tekstu i tagowania obrazów tekstem. W aplikacji i na stronie internetowej firmy brakowało odpowiedniego kodu, aby iPhone mógł odczytać opcje.

wyszukiwanie głosowe ułatwień dostępu

Podczas gdy sędziowie początkowo opowiedzieli się po stronie Domino's, sąd apelacyjny orzekł na korzyść klienta w zeszłym tygodniu na tej podstawie, że „ Rzekoma niedostępność strony internetowej i aplikacji Domino utrudnia dostęp do towarów i usług jej fizycznych pizzerii – które są miejscami publicznymi zakwaterowanie ”.

W Wielkiej Brytanii Królewski Narodowy Instytut Osób Niewidomych również z zadowoleniem przyjął komentarz do orzeczenia BCC : „Na mocy Ustawy o równości 2010 wszystkie organizacje mają obowiązek zapewnienia, że ich strony internetowe i aplikacje mogą być używane przez osoby niewidome i niedowidzące, w tym osoby niewidome i niedowidzące. którzy używają czytników ekranu”.

Istnieją różne sposoby, dzięki którym firmy mogą uczynić swoje witryny bardziej dostępnymi, a prawidłowe używanie tagów nagłówków znacznie ułatwia użytkownikowi poruszanie się po stronie.

Najlepsze praktyki dotyczące nagłówków dotyczące dostępności

Istnieje sporo zamieszania i niewłaściwego używania nagłówków, częściowo ze względu na to, że programiści zbyt uważnie śledzą projekt lub projektanci nie są świadomi prawidłowego sposobu używania nagłówków.

Jeśli nie masz pewności, co to jest nagłówek, W3C ma dobrą definicję, a Yoast wyjaśnia, jak wykorzystać SEO.

W3C definiuje prawidłowe użycie jako:

„Sześć elementów nagłówka, od H1 do H6, oznacza nagłówki sekcji. Chociaż kolejność i występowanie nagłówków nie jest ograniczone przez HTML DTD, dokumenty nie powinny pomijać poziomów (na przykład z H1 do H3), ponieważ konwersja takich dokumentów do innych reprezentacji jest często problematyczna.”

Prawidłowe użycie nagłówków ma nie tylko wpływ na to, jak ludzie i Google czytają Twoją stronę, ale ma również ogromny wpływ na to, jak czytniki ekranu prezentują Twoje treści użytkownikowi. Osoby korzystające z narzędzi ułatwień dostępu mogą poruszać się po stronie za pomocą nagłówków, więc jeśli masz coś ważnego do powiedzenia, powinno to być strukturalnie i wizualnie ułożone zgodnie z zamierzeniami.

Nie ma dodatkowej pracy potrzebnej do udostępnienia nagłówków podczas tworzenia strony. Jeśli zastosujesz się do prawidłowego użycia, kryteria dostępności zostaną spełnione. Porady dotyczące dostępności W3c dla nagłówków wyjaśniają to całkiem dobrze i jak widać, ma to sens nie tylko dla dostępności, ale ma sens strukturalnie i wizualnie.

Jak sprawdzić nagłówki?

Jeśli twoi programiści lub motyw przestrzegają prawidłowego użycia nagłówków, powinieneś być w stanie po prostu dodać swoją treść i dodać nagłówek we właściwy sposób za pomocą edytora/CMS.

Na marginesie, nie musisz wszędzie dodawać nagłówków, wystarczy prosty H1 (który zwykle jest tytułem strony), a następnie H2 – ale powiedzmy, że chcesz poprawnie ustrukturyzować szczególnie długą stronę lub sprawdzasz czyjś praca? Spróbuj użyć jednej z tych wtyczek do swojej ulubionej przeglądarki:

Mapa nagłówków dla Chrome
Mapa nagłówków dla Firefoksa

Po zainstalowaniu są bardzo łatwe w użyciu, a wszelkie nieprawidłowe nagłówki są podświetlane na czerwono na pasku bocznym po kliknięciu przycisku wtyczki. Ta funkcja będzie również domyślną opcją w edytorze Gutenberg w wersji WordPress 5.0 i jest wyjaśniona na tej stronie.

Prawidłowy sposób używania nagłówków:

<h1>Zazwyczaj tytuł strony</h1>

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

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