Lista kontrolna dostępności sieci

Dostępność to praktyka zapewniania równego dostępu do stron internetowych osobom niepełnosprawnym, aby miały równy dostęp do towarów i usług świadczonych przez te witryny. To integralna część profesjonalnego projektowania i tworzenia stron internetowych.


Contents

Dlaczego warto się tym przejmować Dostępność?

Istnieje wiele powodów, dla których programiści, projektanci i ich pracodawcy / klienci powinni upewnić się, że dostępność jest wczesną i integralną częścią procesu tworzenia stron internetowych.

  • Na wielu terytoriach, takich jak USA, UE, Wielka Brytania, Izrael i Japonia, prawnym wymogiem jest niedyskryminowanie ludzi ze względu na ich niepełnosprawność. W zeszłym roku w USA, Złożono 2235 nowych pozwów internetowych ADA w sądzie federalnym. To jeden na godzinę.
  • Dostępne strony są zwykle lepiej kodowane, bardziej niezawodne i dobrze pozycjonowane w wyszukiwarkach.
  • Dostępne są zwykle witryny z dostępem bardziej użyteczny dla osób niepełnosprawnych, prowadząc do większej satysfakcji i nawrócenia.
  • Niedostępne witryny są szkodliwe dla biznesu. W 2019 r Ankieta w Wielkiej Brytanii odkryli, że ponad 4 miliony ludzi porzuciło stronę internetową ze względu na napotkane bariery dostępności. Stracony biznes, „Click-Away Funt”, wyniósł 17,1 miliarda funtów. To jest miliard. Tylko w Wielkiej Brytanii.
  • Dobrą praktyką jest dobrowolne odwracanie potencjalnych klientów.

Wspólne standardy i problemy

Na szczęście W3C (ciało, które tworzy wiele standardów, na których opiera się sieć) ma standard udostępniania stron internetowych. To jest nazwane Wytyczne dotyczące dostępności treści internetowych (WCAG). Istnieją trzy poziomy zgodności (A, AA, AAA), przy czym „A” oznacza najniższy poziom dostępności. Polecam celować na poziom AA.

Niestety, WCAG to długa, sucha i bardzo techniczna lektura, więc spójrzmy na to, co możesz zrobić stosunkowo łatwo i uzyskaj największy zwrot z każdej zainwestowanej złotówki. To nie jest lista kontrolna Wszystko, co musisz wiedzieć; jest to lista kontrolna najczęstszych błędów i błędów, które według osób niepełnosprawnych są ich głównymi blokerami, wraz z praktycznymi sugestiami dotyczącymi rozwiązania problemów. Wszystkie linki zewnętrzne otwierają się w nowej karcie.

W ankiecie dotyczącej funta za kliknięcie respondenci niepełnosprawni zostali zapytani o to, jakie były główne przeszkody w realizacji zakupów. Oto najważniejsze bariery (dozwolone było wiele odpowiedzi):

  1. Zatłoczone strony o zbyt dużej zawartości – 66%
  2. testy reCAPTCHA – 59%
  3. Słaba czytelność (kontrast, układ tekstu) 56%
  4. Rozproszenie ruchomych obrazów i grafiki – 53%
  5. Słaba informacja o linku – 59% (77% dla użytkowników czytników ekranu)
  6. Wypełnienie formularza 56%

Jak poprawić dostępność strony internetowej

Po pierwsze, pamiętaj, że żadna z pięciu najlepszych nie ma problemów technicznych – są to błędy projektowe lub autorskie.

1) Zbyt wiele treści

W skrócie: podziel tekst na sekcje z nagłówkami i wypunktowanymi listami. Używaj prostego języka.

Powszechnie wiadomo, że wraz ze wzrostem liczby wyborów rośnie również liczba wysiłek wymagany do zebrania informacji i podejmować dobre decyzje. To samo dotyczy zbyt dużej ilości treści – wkrótce staje się przytłaczające. Sprowadzanie treści do tego, co najważniejsze, jest czasochłonnym rzemiosłem; jak napisał Mark Twain (rzekomo): „Nie miałem czasu napisać krótkiego listu, więc zamiast tego napisałem długi”.

Najnowsza książka Pisanie to projektowanie wskazuje

Ludzie chcą mieć możliwość przeglądania długich bloków tekstu, bez względu na widok lub dźwięk, dlatego niezwykle ważne jest, aby nadać swojemu długiemu tekstowi strukturę z nagłówkami, krótkimi akapitami i innymi sprawdzonymi metodami projektowania.

Więc:

  • Mam tylko jeden

    na stronie.

  • Użyj podtytułów swobodnie; rozkłada „płytę” tekstu dla widzących użytkowników, podczas gdy użytkownicy technologii wspomagających, takich jak czytniki ekranu, mogą używać skrótu do przeskakiwania między nagłówkami lub uzyskiwania mapy myśli ze struktury nagłówka.
  • Nie pomijaj poziomu nagłówków. Na przykład, jeśli używasz

    , upewnij się, że jest poprzedzony przez

    .

  • Używaj list wypunktowanych (takich jak to!) Oznaczonych poprawnie w HTML jako
      ,
    • . Czytniki ekranu ogłoszą „Lista 10 elementów” (i pozwolą użytkownikowi przeskoczyć nad nimi).

    Używaj zwykłego angielskiego

    Monzo Bank’s Przewodnik „Nasz ton głosu” wyjaśnia znaczenie prostego języka:

    W 2010 r. Amerykański adwokat Sean Flammer przeprowadził eksperyment. Poprosił 800 sędziów sądów okręgowych, aby opowiedzieli się po stronie tradycyjnego argumentu „legalnego” lub jednego z tego, co nazwał „zwykłym angielskim”.

    Sędziowie zdecydowanie preferowali zwykłą wersję angielską (66% do 34%), a ta preferencja nie dotyczyła ich wieku ani pochodzenia.

    Notatki Flammera (PDF) zwykłej wersji angielskiej:

    Jest krótszy o prawie stronę, więc oczywiście eliminuje niepotrzebne zdania i słowa. Jego zdania wynoszą średnio 17,8 słów, w przeciwieństwie do 25,2 słów.

    Podsumowuje:

    Mamy teraz 25 lat badań empirycznych prowadzących do nieuniknionego wniosku: jeśli chcesz zadowolić i przekonać czytelnika, napisz po angielsku.

    2) ReCAPTCHA

    W skrócie: nie zmuszaj użytkowników do przeskakiwania przez potencjalnie niemożliwe obręcze, aby zaoszczędzić czas programisty.

    Respondenci często mówili o starym Wersja ReCAPTCHA:

    wersje reCAPTCHA z chwiejnym tekstem, który musisz wpisać ponownie

    Walczę z obrazami i muszę wpisywać cyfry lub litery. W przypadku, gdy muszę klikać, które obrazy mają sklep lub cokolwiek innego, zawsze tęsknię za niektórymi lub gubię się i zużywam energię, której nie mam …

    Styl chwiejnych liter reCAPTCHA jest teraz przestarzały. O wiele częściej spotyka się nowsze wcielenie o nazwie „Brak CAPTCHA reCAPTCHA” (znane również jako „Nie jestem robotem ”), który wymaga od użytkownika zaznaczenia pola potwierdzającego, że nie jest robotem, i który używa tajnego voodoo do oceny użytkownika. Jeśli przejdą, nie jest wymagana dalsza interakcja. Jeśli jednak się nie powiedzie, zostanie wyświetlone kolejne wyzwanie:

    Częściowy zrzut ekranu captcha wymagający od użytkownika kliknięcia wszystkich kwadratów pokazujących pomarańcze

    Pamiętaj, że typ CAPTCHA, który wymaga kliknięcia wszystkich kwadratów przez (powiedzmy) znak drogowy, niekoniecznie ma charakter międzynarodowy. Jak pisze Terence Eden, CAPTCHA nie dowodzą, że jesteś człowiekiem – dowodzą, że jesteś Amerykaninem.

    Najbardziej dostępną formą reCAPTCHA jest reCAPTCHA v3 co nie wymaga interakcji użytkownika, ale wymaga więcej pracy, aby poradzić sobie z wizytami, które nie przejdą testu:

    Jest to czysty interfejs API JavaScript zwracający wynik, dający możliwość podjęcia działań w kontekście witryny: na przykład wymagających dodatkowych czynników uwierzytelnienia, wysłania postu do moderacji lub dławienia botów, które mogą skrobać zawartość.

    3) Słaba czytelność

    W skrócie: upewnij się, że tekst ma odpowiedni kontrast, jest czytelny i nie jest uzasadniony.

    • Zapewnij odpowiedni kontrast. Jednym z najczęstszych blokerów dostępu w Internecie jest słaby kontrast między tekstem a tłem. Wytyczne W3C wymagają współczynnika kontrastu co najmniej 4,5: 1, z wyjątkiem tekstu na dużą skalę i obrazów tekstu na dużą skalę, które powinny mieć współczynnik kontrastu co najmniej 3: 1 (logo i tekst „przypadkowy” są wyłączone). Istnieje wiele narzędzi, które mogą mierzyć współczynniki kontrastu; moim osobistym faworytem jest doskonała Ada Rose Cannon widget kontrastu, który jest użytecznym bookmarkletem przeglądarki, który podkreśla obszary o niewystarczającym kontraście na twojej stronie.
    • Nie miej nagłówków z kapitałem. Istnieją dowody na to, że są trudniejsze do odczytania, ponieważ wielkie litery są tej samej wysokości, więc nie możemy rozpoznać kształtu zwykłych słów. Ponadto niektóre czytniki ekranu przeliterują grupy wielkich liter, jakby były skrótami (np. BBC, DOJ itp.). Jeśli musisz mieć wszystkie nagłówki, napisz je w normalnym przypadku w kodzie HTML i przekształć je za pomocą CSS transformacja tekstu: wielkie litery.
    • Tekst wyrównany do lewej. (W przypadku stron w językach pisanych od prawej do lewej, takich jak arabski lub hebrajski, wyrównaj tekst do prawej). Nie uzasadniaj, ponieważ utrudnia to osobom z dysleksją czytanie. The Przewodnik po stylu British Dyslexia Association sugeruje również

      Używaj czcionek bezszeryfowych, takich jak Arial i Comic Sans, ponieważ litery mogą wydawać się mniej zatłoczone. Alternatywy obejmują Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Rozpraszające obrazy i grafika

    W skrócie: pozwól użytkownikom zatrzymać każdy ruch; szanują ustawienia systemu operacyjnego; nie odtwarzaj automatycznie wideo.

    Jeden z respondentów ankiety Funt Click-Away napisał,

    Witryny, z których korzystałem z niewielkimi problemami, stają się teraz problemem, ponieważ przejmują teraz ruchome reklamy i stale ładują więcej reklam podczas zakupów.

    Najbardziej podstawowy poziom WCAG wymaga: „Dla każdej ruchomej, migającej lub przewijanej informacji, która (1) rozpoczyna się automatycznie, (2) trwa dłużej niż pięć sekund, a (3) jest prezentowana równolegle z innymi treściami, istnieje mechanizm użytkownik może wstrzymać, zatrzymać lub ukryć, chyba że ruch, miganie lub przewijanie jest częścią działania, w którym jest to niezbędne ”.

    Rozproszenie uwagi jest denerwujące – szczególnie dla osób z ADHD lub innymi zaburzeniami poznawczymi. Ale ruch i flashowanie mogą również powodować drgawki, więc wytyczne WCAG wymagają, aby zawartość nie migała więcej niż 3 razy w ciągu 1 sekundy.

    Szanuj wybór użytkownika dla animacji

    Wszystkie główne systemy operacyjne pozwalają użytkownikowi wyrazić preferencje dotyczące zmniejszonego ruchu na ekranie – być może dlatego, że mają zaburzenia spektrum przedsionkowego wywołane ruchem. Twoja witryna może wykryć, czy użytkownik zrobił to za pomocą CSS preferuje ograniczony ruch zapytanie o media.

    Tutaj przycisk animujemy tylko wtedy, gdy użytkownik nie wyraził preferencji:

    @media (preferuje-ograniczony ruch: brak preferencji) {
    przycisk {
    / * Klatki kluczowe `wibracje` są zdefiniowane gdzie indziej * /
    animacja: wibracja liniowa 0.3s nieskończona oba;
    }
    }

    Jeśli chcesz zmodernizować witrynę, która ma wiele reguł animacji, poniższe mogą zatrzymaj wszystkie wcześniej zadeklarowane animacje CSS:

    @media (preferuje-ograniczony ruch: zmniejsz) {
    *,
    *::przed,
    *::po {
    czas trwania animacji: 0,001 s! ważne;
    czas przejścia: 0,001 s! ważne;
    }
    }

    Jeśli chodzi o przestrzeganie preferencji systemu operacyjnego użytkownika, możesz rozważyć projektowanie witryny dla trybu ciemnego.

    5) Złe informacje o łączu

    W skrócie: uczyń linki identyfikowalne za pomocą unikalnego tekstu linku. Ostrzeż użytkowników, jeśli link otworzy nową kartę lub plik.

    Jedną z głównych przyczyn złych linków jest często zły copywriting. Większość czytników ekranu pozwala użytkownikowi szybko zobaczyć listę linków na stronie (w najczęściej używanym komercyjnym czytniku ekranu, JAWS, skrót klawiaturowy to Ins + F7; w darmowy czytnik ekranu NVDA, ten sam skrót klawiaturowy powoduje wyświetlenie listy elementów, która zawiera linki do stron, nagłówki i punkty orientacyjne).

    Jeśli jednak każdy link zawiera tekst „Kliknij tutaj” lub „Czytaj więcej”, a nic więcej ich nie odróżnia, jest to bezużyteczne. Najłatwiejszym sposobem na rozwiązanie tego jest po prostu napisanie unikalnego tekstu linku, ale jeśli nie jest to możliwe, możesz przesłonić tekst linku dla technologii asystującej, używając unikalnego atrybutu aria-label na każdym linku.

    Oto dobry przykład z Strona internetowa Joomla:

    Strona internetowa Joomla, przedstawiająca dwie różne historie, z których każda jest identyczna

    Widoczny tekst linku to po prostu „czytaj więcej”, ale Joomla używa aria-label atrybuty, które sprawiają, że każdy z nich jest unikalny dla technologii asystujących

    Czytaj więcej
    
    Czytaj więcej

    Z powodu aria-label tekst zostanie użyty zamiast tekstu linku przez technologie wspomagające, W3C zaleca rozpoczęcie tekstu użytego w aria-label od tekstu użytego w linku, ponieważ „pozwoli to na spójną komunikację między użytkownikami”.

    Uwaga: Złą radą, którą wciąż widzę na starych stronach, jest dodanie tekstu wyjaśniającego do linków za pomocą tytuł atrybut:

    Czytaj więcej>

    Nie rób tego. The tytuł nie jest dostępny dla większości czytników ekranu (programiści wypychali go słowami kluczowymi do celów „SEO”, więc dostawcy czytników ekranu domyślnie go wyłączali), a przeglądarki przedstawiają atrybuty tytułu jako „podpowiedzi”, które są dostępne tylko dla użytkowników myszy po najechaniu kursorem.

    Linki powinny wyglądać jak linki

    Domyślnie przeglądarki podkreślają linki. Najlepiej tego nie zmieniać, ale jeśli przegrasz kłótnię na parkingu z projektantem, tekst linku musi mieć współczynnik kontrastu 3: 1 z otaczającego tekstu niebędącego linkiem i powinien zawierać oznaczenie „inne niż kolor” ”, Że są linkiem po najechaniu kursorem lub zaznaczeniu, na przykład:

    a: hover, a: focus {text-decoration: underline;}

    Styl fokusu powoduje podkreślenie linku, gdy użytkownik inny niż mysz skupi się na nim z klawiatury, rysika lub głosu. Zasadniczo za każdym razem, gdy coś na stronie ma styl najechania kursorem, należy również nadać mu styl skupienia.

    „Oznacznik inny niż kolorowy” (w naszym przypadku podkreślenie) zapewnia, że ​​odwiedzający z niedowidzeniem lub ślepotą kolorów zobaczą zmianę po najechaniu myszą lub skupieniu. (Czytniki ekranu automatycznie podają tekst „Link” przed tekstem linku.)

    Powiadom ludzi, jeśli link otwiera nową kartę / stronę

    Może to być mylące dla odwiedzającego, jeśli aktywacja łącza otwiera nową kartę lub nowe okno, szczególnie jeśli robią to tylko niektóre linki na stronie (na przykład tylko zewnętrzne linki otwierają nową kartę). Jeśli musisz to zrobić, należy ostrzec użytkownika w tekście linku lub przy użyciu powyższej metody aria-label.

    Poinformuj ludzi, czy link jest do pliku

    Jeśli link prowadzi do pliku (na przykład pliku PDF lub wideo), poinformuj użytkownika w tekście łącza. Nie ukrywaj tego aria-label, ponieważ może to być przydatne dla wielu widzących użytkowników (niektóre telefony komórkowe nie mogą na przykład otworzyć pliku docx). Jeśli jest to duży plik, rozważ ostrzeżenie użytkownika o przybliżonym rozmiarze; mogą nie chcieć pobierać dużego pliku wideo przez 3G.

    Możesz także użyć Ściągnij atrybut, który powoduje, że przeglądarka otwiera natywne okno dialogowe pobierania plików systemu operacyjnego. Podsumowując, kod będzie wyglądał następująco:

    Raport roczny (PDF, 240 MB)

    6) Kolejny błąd projektowy: usunięcie pierścienia ostrości

    W skrócie: upewnij się, że użytkownik klawiatury zawsze widzi, gdzie jest aktualnie skupiony.

    Wspominaliśmy :skupiać style wcześniej. Są nieocenionym wizualnym wskaźnikiem dla osób, które nie mogą używać myszy z jakiegokolwiek powodu: być może mają RSI, chorobę Parkinsona lub stwardnienie rozsiane. Domyślnie przeglądarki wyświetlają pierścień ostrości na aktualnie skupionym elemencie. Oto link Strona główna na mojej osobistej stronie, skoncentrowany w przeglądarce Chromium:

    Zrzut ekranu domyślnego pierścienia ostrości Chromium wokół linku (który jest również obrazem)

    Jednak niektórzy uważają to za nieprzyjemne z estetycznego punktu widzenia, gdy używają myszy i wyłączają ją za pomocą CSS, dzięki czemu strona jest niedostępna dla użytkowników klawiatury.

    Wprowadź nowy standard, zapoczątkowany przez Firefox, o nazwie : widoczne fokus. Spowoduje to zastosowanie pierścienia ostrości do elementu, jeśli został osiągnięty przez klawiaturę lub urządzenie wskazujące inne niż mysz, ale nie pokaże nic użytkownikom myszy. Ponieważ jest obsługiwany tylko w przeglądarce Firefox (w momencie pisania), Patrick Lauke sugeruje następujący CSS, aby ładnie grać we wszystkich przeglądarkach:

    przycisk: focus {/ * kilka ekscytujących stylów przycisku * /}
    przycisk: focus: not (: focus-visible) {
    / * cofnij wszystkie wyżej wymienione style przycisków
    jeśli przycisk jest aktywny, ale przeglądarka normalnie nie
    pokaż domyślne style fokusa * /
    }
    button: focus-visible {/ * niektóre nawet * więcej * ekscytujące style fokusowania przycisków * /}

    7) Wypełnianie formularzy

    W skrócie: projektuj pola formularza, które wyglądają jak pola formularza, każde powiązane z etykietą. Nie wyłączaj automatycznego wypełniania.

    Biorąc pod uwagę zasadnicze znaczenie formularzy dla witryn eCommerce, zdumiewa mnie, jak wiele niedostępnych formularzy widzę. Często dzieje się tak, ponieważ stare przeglądarki nie pozwalały zbyt wiele na stylizowanie elementów formularzy, więc programiści sfałszowali je innymi elementami HTML. Nowoczesne przeglądarki pozwalają atrakcyjne pola wyboru, przyciski opcji, niestandardowe wybierz komponenty i kombinatory, dostępne kontrolki autouzupełniania i więcej.

    Autouzupełnianie to twój przyjaciel

    Zezwalanie przeglądarkom na automatyczne wypełnianie formularzy wymaga od użytkowników mniejszej liczby działań, aby zwiększyć prawdopodobieństwo wypełnienia formularza i rejestracji / zakupu produktu. Autouzupełnianie w przeglądarkach: głębokie nurkowanie to świetny artykuł eBay na ten temat (i powinni wiedzieć).

    Ponadto autouzupełnianie jest obecnie jedyną wystarczającą techniką do osiągnięcia zgodności z AA Kryterium sukcesu 1.3.5: Określ cel wejściowy.

    Spraw, aby pola formularza wyglądały jak pola formularza

    Domyślnie przeglądarki wyświetlają pola wprowadzania danych jako pola. Z całą pewnością nadaj im styl marginesów, wypełnienia i obramowań, ale zachowaj je jako pola. Wielu projektantów stosowało wzorzec Google Material Design przed 2017 r. Polegający na tym, że użytkownik wprowadzał tekst w jednym wierszu:

    Stare materiały projektowe, z linią poziomą zamiast prostokątnego pudełka

    Jednak Google stwierdził, że wiersz pod starymi polami tekstowymi dla niektórych użytkowników nie był jasny, często mylony z dzielnikiem, i zmienił wygląd. W test użyteczności z 600 uczestnikami odkryli to

    zamknięte pola tekstowe o kształcie prostokąta (pola), działające lepiej niż pola o afordancji linii… Dzisiaj te nowe pola tekstowe pojawiają się w produktach Google, od stron logowania do formularzy Google.

    Jeśli rozważasz przyjęcie pełnej biblioteki Google Material Design UI, przeczytaj Przestań używać pól tekstowych Projektowanie materiałów! przez Matsuko Friedland, aby zobaczyć, czy spełnia twoje potrzeby.

    Oznacz wszystkie pola formularza

    Wszystkie pola formularza (wprowadzanie tekstu, pola wyboru, przyciski opcji, suwaki itp.) Muszą być oznaczone. Najlepszym sposobem na to jest użycie HTML ; jak mówi WCAG, „standardowe formanty HTML już spełniają to kryterium sukcesu, gdy są używane zgodnie ze specyfikacją”.

    Oto demo, które zrobiłem z pole formularza bez etykiety a pole formularza oznaczone etykietą. Wyglądają identycznie, ale górna nie ma odpowiedniej etykiety, podczas gdy druga ma. Kliknij etykietę tekstową dolnej, a zobaczysz, że koncentruje się ona na powiązanych danych wejściowych.

    porównanie fałszywych vs rzeczywistych etykiet

    Ułatwia to skupienie danych wejściowych dla osoby z trudnościami w sterowaniu silnikiem – a może dla Ciebie, próbując zaznaczyć małe pole wyboru na małym ekranie w wyboistym pociągu. Jest to również bardzo ważne dla użytkowników czytników ekranu, którzy będą przechodzić między polami w formularzu (domyślnie tylko tabulatory i pola formularza można ustawić za pomocą tabulacji); po tabulowaniu w polu wejściowym czytnik ekranu ogłosi zawartość powiązanej etykiety.

    Kod do tego jest prosty. Pole wejściowe otrzymuje unikalny identyfikator, a etykieta jest z nim powiązana za pomocą dla atrybut:

    
    

    Ukrywanie etykiet

    Czasami może nie być widoczna etykieta. Lub projektant tego nie robi i nie chcesz kolejnej walki na parkingu. W każdym razie oto przykład, gdy etykieta „Szukaj” poprzedzająca dane wejściowe wydaje się przesadna.

    Pole wejściowe, a następnie przycisk oznaczony „szukaj”

    Możemy powiązać pole wejściowe z tekstem „Szukaj”, który jest treścią przycisku wysyłania za pomocą aria-labelledby:

    
    

    Mogliśmy użyć aria-label (które poznaliśmy wcześniej, gdy mówimy o linkach):


    Ale zawsze lepiej jest preferować widoczny tekst na stronie, ponieważ zostanie on przetłumaczony, jeśli strona zostanie uruchomiona za pomocą narzędzia do tłumaczenia, podczas gdy tekst „ukryty” w atrybutach HTML nie będzie. (Czapka dla Adriana Roselli dla tej wskazówki, z jego wspaniałego artykułu Mój priorytet metod oznaczania kontroli.)

    Najczęstsze błędy na głównych milionach stron głównych

    Przyjrzeliśmy się najważniejszym barierom w witrynach e-commerce zgłaszanym przez użytkowników z pewną formą upośledzenia. Teraz spójrzmy na znacznie szerszy zestaw witryn – strony główne najpopularniejszych 1 000 000 witryn internetowych, automatycznie analizowane przez WebAIM w sierpniu 2019 r. 98% analizowanych stron zawierało co najmniej jeden błąd. Najczęstsze błędy to

    1. Tekst o niskim kontraście (86,1%)
    2. Brakuje alternatywnego tekstu do zdjęć (67,9%)
    3. Puste linki (58,9%)
    4. Brak etykiet wejściowych formularza (53,2%)
    5. Brakujący język dokumentu (30,5%)

    Powyżej omówiliśmy niski kontrast, linki i formularze. Zobaczmy teraz, jak możemy uniknąć innych bardzo częstych błędów.

    8) Zapewnij tekstowe alternatywy dla wszystkich zdjęć, wideo i audio

    W skrócie: wszelkie informacje przekazywane za pośrednictwem obrazu lub wideo muszą mieć tekstowy odpowiednik.

    Każdy musi mieć tekst alternatywny („tekst alternatywny”), który może być przekazywany użytkownikom z upośledzeniem wzroku lub osobom z niską przepustowością / drogimi planami transmisji danych, które wyłączyły obrazy w swoich przeglądarkach. Obejmuje to obrazy tekstu.

    Oto podstawowe zasady:

    • Jeśli obraz ma charakter wyłącznie dekoracyjny, musi zawierać pusty tekst alternatywny: alt = "". (Ale i tak czysto dekoracyjne obrazy powinny prawdopodobnie znajdować się w CSS.)
    • Jeśli obraz jest opisany w tekście, powinien mieć pusty tekst alternatywny (alt = ""), aby uniknąć powtórzeń. Ale bądź ostrożny, jeśli to jest w
      – widzieć Jak leci? po więcej.
    • Jeśli obraz jest jedyną zawartością linku (na przykład logo organizacji można kliknąć, aby przejść do strony głównej), tekst alternatywny powinien opisywać miejsce docelowe linku. Na przykład, alt = „strona główna”.
    • Nie używaj czcionek ikon; mogą być naprawdę złe dla osób z dysleksją. Jeśli ich użyjesz, przekonwertować je na SVG.

    Tekst alternatywny wideo i audio

    Nie zapominaj, że treści audio potrzebują alternatywnego tekstu dla osób z wadami słuchu. Oznacza to transkrypcje podcastów i napisów do filmów. I znowu: nie odtwarzaj mediów automatycznie.

    9) Dodaj odpowiedni język dokumentu

    W skrócie: daj technologii asystującej znać język, w którym znajduje się Twój tekst.

    30% stron głównych nie deklaruje języka, w którym zostały napisane, co może wprowadzać w błąd dla użytkowników czytników ekranu. Jest to ważne, ponieważ słowo „sześć” wymawia się bardzo różnie, jeśli na przykład zdanie jest w języku angielskim lub francuskim.

    Łatwo to rozwiązać, dodając atrybut lang do elementu HTML:

    „En” informuje czytnik ekranu (lub oprogramowanie tłumaczące), że ta strona jest w języku angielskim. „Es” to hiszpański, „fr” to francuski i tak dalej. W większości języków znacznik języka jest dość łatwy do ustalenia. W3C ma przewodnik po Wybór tagu językowego.

    Jeśli strona zawiera treść w języku innym niż główny, zadeklarowany, dodaj atrybut języka do elementu otaczającego tę treść. Na przykład na stronie zadeklarowanej jako angielski:

    Jeśli chcesz porozmawiać matador, w jakimś fajnym cabana
    I spotkać senoritas według wyniku, Espana por favor

    10) Pomóż odwiedzającemu obejść Twoje treści

    W skrócie: użyj elementów orientacyjnych HTML, aby pomóc użytkownikom technologii asystujących w zrozumieniu treści i poruszaniu się po niej.

    Gdy widzący odwiedzający wejdzie na twoją stronę, może z łatwością zeskanować ją wizualnie, aby zrozumieć, gdzie znajduje się nawigacja i gdzie zaczyna się główna zawartość. Użytkownik czytnika ekranu nie może tego zrobić. Jednak HTML5 dodaje nam nowe tagi do oznaczania tych obszarów, a technologie wspomagające mają skróty, które mogą przechodzić do (lub pomijać) punkty orientacyjne, takie jak nagłówek, stopka, nawigacja i tym podobne.

    Oto sześciominutowy film, który nakręciłem z Léonie Watson, twórczynią stron internetowych i użytkownikiem czytników ekranu, na temat tego, jak używa swojego czytnika ekranu do badania semantyki do nawigacji po mojej osobistej stronie:

    • Zawiń swoją główną treść, czyli to, co nie jest nagłówkiem, główną nawigacją ani stopką, w
      element. W prawie wszystkich przypadkach powinien być tylko jeden
      na stronę. Wszystkie przeglądarki (IE9 +) umożliwiają stylizację, a technologie wspomagające wiedzą, co z tym zrobić.
    • Zawiń nagłówek (logo marki, pasek, nagłówek strony) w
      element.
    • Zawiń stopkę (informacje prawne, dane kontaktowe, informacje o prawach autorskich itp.) W
    • Oznacz swoją główną nawigację za pomocą
        zawinięte w element. Można to zagnieździć w
        jeśli pasuje to do wyglądu strony.
      • Reklamy i nieistotne treści powinny być zapakowane w
      • Jeśli na stronie znajduje się więcej niż jeden produkt / wideo / element wiadomości / post na blogu, zawiń każdy z nich w
        element.

      W jego ankieta wśród użytkowników czytników ekranu, WebAIM stwierdził, że 26% użytkowników czytników ekranu często lub zawsze używa tych punktów orientacyjnych podczas nawigacji na stronie.

      Dodatkowo owijanie dyskretnych elementów treści

      pomaga Apple WatchOS optymalnie wyświetlać treści. Zobacz mój artykuł Praktyczna wartość semantycznego HTML więcej na ten temat.

      11) Używaj HTML poprawnie

      W skrócie: zrozum semantykę i domyślne zachowania elementów HTML; użyj odpowiedniego elementu do swoich treści.

      Powszechnym tematem w tym artykule jest używanie poprawnych elementów HTML. Używać etykieta ma wbudowane zachowanie przeglądarki, które skupia powiązane pole wejściowe; za pomocą

      jest lepszy niż

      ponieważ pozwala użytkownikom czytników ekranu przejść bezpośrednio do ważnej treści, jednocześnie nie rzucając się w oczy dla tych, którzy nie korzystają z czytnika ekranu.

      Innym przykładem jest użycie

      Like this post? Please share to your friends:
Adblock
detector
map