7 typowych błędów dostępności (i jak ich uniknąć)

Prawdopodobnie słyszałeś już wcześniej o dostępności cyfrowej i wiesz, że ważne jest, aby zoptymalizować swój produkt online pod kątem osób niepełnosprawnych. To zrozumiałe, jeśli czujesz się przytłoczony wszystkimi informacjami i zadaniami, które powinieneś wykonać, aby ulepszyć swój produkt. Być może doszedłeś do wniosku, że jest to tak skomplikowane, że musisz zatrudnić eksperta do wykonania tej pracy. Tymczasem zależy ci na tym! Po prostu nie wiesz, jak zacząć.

Nie martw się; naprawienie lub uniknięcie tych problemów często nie jest aż tak czasochłonne! To znaczy, jeśli wiesz, gdzie szukać i co zrobić zamiast tego. Przez lata pracy jako twórca stron internetowych i inżynier oprogramowania front-end napotkałem wiele problemów z dostępnością. Często sprowadzają się one do tego samego zestawu punktów. W większości przypadków podejście zorientowane na dostępność nie zajmuje dużo czasu. Nie jest trudniejsze ani droższe. To wykonywanie codziennej pracy z innym nastawieniem, które znacznie poprawia dostępność.

Ale teraz przejdźmy do konkretów: pozwól mi wyjaśnić, jakie są najczęstsze problemy z dostępnością i, co ważniejsze: jak ich uniknąć.

Błąd 1: Słabe znaczniki semantyczne

Unikanie problemów z dostępnością nie wymaga dodatkowej pracy. Wymaga po prostu innej pracy

Jednym z najczęściej popełnianych błędów o niestety poważnych konsekwencjach jest słaba semantyka znaczników. Jeśli znasz trochę HTML, możesz wiedzieć, że strona składa się z elementów zdefiniowanych przez znaczniki HTML, na przykład <h1> i <p>. Większość elementów jest semantyczna: jasno opisują one swoje znaczenie w sposób czytelny dla człowieka i maszyny.

Jeśli przejrzysz źródło dowolnej strony internetowej, zauważysz również wiele elementów <div> i <span>; są to elementy niesemantyczne. Elementy te są ogólnymi kontenerami, które nie mają żadnego znaczenia dla ich zawartości.

Czytniki ekranu w dużej mierze polegają na semantycznym HTML. Tworzą one drzewo dostępności w oparciu o semantykę strony. Użytkownik z czytnikiem ekranu może przeskakiwać od elementu do elementu za pomocą skrótów. Informuje go, które elementy są przyciskami, które nagłówkami, gdzie znajduje się nawigacja, w jaki sposób informacje na stronie odnoszą się do innych elementów na stronie itd.

Nadużywanie elementów niesemantycznych

Jeśli używasz elementów <div> i <span> tam, gdzie powinien znajdować się element semantyczny, istotne informacje są natychmiast tracone. Użytkownicy z wadami wzroku nie widzą struktury witryny na podstawie tego, co widzą. Nie widzą przycisków ani menu nawigacyjnego. Strona internetowa staje się jednym wielkim stosem nieuporządkowanej treści. Co gorsza, często elementy interaktywne - takie jak przyciski - stają się całkowicie bezużyteczne. Podczas surfowania po sieci często napotykam elementy <span> kontrolowane przez JavaScript, stylizowane na przycisk. JavaScript jest napisany tak, aby można go było aktywować kliknięciem myszy. Działa to dobrze dla każdego, kto może używać myszy, ale nie można go kontrolować za pomocą klawiatury, a użytkownik czytnika ekranu często nie może go w ogóle znaleźć.

Wskazówka: używaj semantycznego HTML

Jeśli wygląda jak przycisk i zachowuje się jak przycisk, powinien być przyciskiem

Moja rada, aby uniknąć tego niepożądanego zachowania, prawdopodobnie nie jest zaskoczeniem: używaj odpowiednich semantycznych elementów HTML tak często, jak to możliwe. Jedyne przypadki, w których powinieneś używać elementów <div> i <span> są wtedy, gdy nie ma innego dostępnego elementu do przekazania znaczenia. Zwykle sprowadza się to wyłącznie do celów dekoracyjnych.

Korzystanie z elementów semantycznych znacznie zwiększy dostępność strony internetowej. Dzieje się tak, ponieważ zawierają one informacje dla przeglądarki o tym, jak powinny być używane. Co więcej, jako programista lub inżynier zaoszczędzi to nawet czas. Nie musisz myśleć o naśladowaniu zachowania na przykład przycisku, ponieważ działa on już w ten sposób po wyjęciu z pudełka.

Używanie niewłaściwych elementów semantycznych

Innym częstym błędem w tej kategorii jest wybór niewłaściwego elementu semantycznego. Często jest to wynikiem wyboru elementu ze względu na jego wygląd, a nie zachowanie lub cel. Może nie użyłeś natywnego <button>, ponieważ myślałeś, że wygląda brzydko. A może pominąłeś kilka poziomów nagłówków i wybrałeś <h4> zamiast <h2>, ponieważ podobało ci się, że ma mniejszy rozmiar czcionki. Jest to niewłaściwy sposób; mamy CSS do tego celu.

Wskazówka: wybierz element ze względu na jego znaczenie

Użyj elementów HTML, aby ustrukturyzować zawartość w oparciu o znaczenie każdego elementu, a nie jego wygląd. Następnie zastosuj style według własnych upodobań za pomocą CSS.

Wskazówka: używaj zautomatyzowanych narzędzi

Dobrym sposobem na pomoc w semantyce jest użycie Narzędzia walidatora HTML. Niektóre narzędzia uwzględniają to w automatycznych testach dostępności, takich jak axe Tools. Pamiętaj, że zautomatyzowane narzędzia nie mogą przetestować wszystkiego i często zawierają fałszywe wyniki pozytywne i negatywne. Mogą one jednak pomóc szybko wykryć błędy, które mogłeś przeoczyć. Najlepszą opcją jest połączenie automatycznego i ręcznego testowania dostępności.

Błąd 2: Źle skonstruowane etykiety formularzy

Jeśli wygląda jak przycisk i zachowuje się jak przycisk, powinien być przyciskiem.

Ten błąd ma również wiele wspólnego z semantycznym HTML. Nie popełnij błędu: zaprojektowanie i wdrożenie użytecznego, dostępnego i ładnie wyglądającego formularza to nie lada wyzwanie!

Formularz logowania do Easy LMS. Etykiety przesuwają się w górę po wypełnieniu pola formularza, dzięki czemu pozostają widoczne.

Wejście i etykieta nie są połączone

Każdy formularz ma pole wejściowe i etykietę opisującą to pole. Na przykład, mam trzy pola wejściowe: "Imię", "Adres e-mail" i "Firma". Mógłbym dodać nazwy nad polami wejściowymi w postaci zwykłego tekstu (np. wewnątrz elementu <span>). Niestety, użytkownik czytnika ekranu znajdzie trzy puste pola tekstowe bez wskazania, co należy wypełnić.

Wskazówka: sparuj etykietę i wejście

Używanie semantycznych elementów HTML dla etykiet to już długa droga, ale jeśli naprawdę chcesz pomóc swoim użytkownikom, powinieneś także sparować etykietę i dane wejściowe. Teraz przeglądarka wie, że te dwa elementy należą do siebie. W Easy LMS powiedzielibyśmy: zysk!

Używanie atrybutów zastępczych jako etykiet

Kolejnym błędem dostępności jest pomijanie etykiet i zamiast tego używanie atrybutów zastępczych na wejściach. Jest to zła praktyka z kilku powodów. Po pierwsze, często nie jest dostępna dla wielu technologii wspomagających. Po drugie, gdy tylko użytkownik wpisze dane wejściowe (lub automatycznie wypełni formularz), etykiety znikają. W ten sposób trudno jest sprawdzić formularz pod kątem błędów. Wreszcie, symbol zastępczy ma służyć jako dodatkowa wskazówka - nie jako etykieta.

Wskazówka: Nie zastępuj etykiety symbolem zastępczym

Nigdy nie pomijaj etykiet w formularzu. Jeśli musisz, używaj symboli zastępczych tylko w celu zapewnienia dodatkowych wskazówek (niedowidzącym) użytkownikom formularzy. Ale jeszcze lepiej: w ogóle nie używaj atrybutów zastępczych i upewnij się, że ważne informacje o formularzu są dostępne dla wszystkich.

Błąd 3: Używanie nieopisowych linków

Jak często natknąłeś się na linki, które mówią "kliknij tutaj", "czytaj więcej" lub "przejdź do tej strony"? Zgaduję, że więcej niż można zliczyć! Jednym z powodów, dla których jest to zła praktyka, jest to, że nie pozwala ona na zrozumienie celu linku poza kontekstem. Dzięki technologiom wspomagającym użytkownicy mogą szybko poruszać się po linkach na stronie. Wyobraź sobie, że czytnik ekranu komunikuje ci, co następuje: "Tutaj, link. Czytaj więcej, link. Ta strona, link". Tak naprawdę nic ci to nie mówi, prawda?

Wskazówka: umieść temat strony w linku.

Jak więc tego uniknąć? W większości przypadków można to łatwo rozwiązać, umieszczając w linku temat lub tytuł strony, do której się odwołujemy. Podam przykład: możesz dowiedzieć się więcej o różnych rodzajach niepełnosprawności w tym artykule W3C. Teraz czytnik ekranu zakomunikuje: "różne rodzaje niepełnosprawności, link". Zysk!

Wskazówka: optymalizacja powtarzających się linków

Mogę sobie wyobrazić, że nie chciałbyś umieszczać tytułu w każdym linku "Czytaj więcej" pod listą artykułów. Dodaje to dużo bałaganu na stronie. Istnieje wiele różnych podejść do tego, jak udostępnić linki "czytaj więcej" i w zależności od przypadku użycia, które z nich będzie najlepsze. W przegląd tego bloga, zdecydowaliśmy się zoptymalizować linki dla czytników ekranu, dodając etykietę aria, która zawiera tytuł artykułu.

Błąd 4: Poleganie na obrazach jako jedynym sposobie przekazywania informacji

Jako osoba myśląca wizualnie wiem, o ile łatwiej jest zrozumieć coś na podstawie obrazu niż czytając tekst. Nie twierdzę, że używanie obrazów do wyjaśniania lub odwoływania się do nich w wyjaśnieniach jest złe. W rzeczywistości zachęcam wszystkich do korzystania z obrazów w ten sposób, ponieważ w przypadku niektórych upośledzeń (takich jak dysleksja) faktycznie poprawia to dostępność. Jednak używanie obrazów jako jedynego sposobu przekazywania informacji jest złą praktyką.

Na całym świecie około 43 milionów osób jest niewidomych, a około 295 milionów osób ma umiarkowane lub poważne zaburzenia widzenia. Liczba ta obejmuje nie tylko całkowitą ślepotę, ale także na przykład utratę widzenia centralnego lub peryferyjnego oraz niewyraźne widzenie. Jeśli polegasz na obrazach, aby wyjaśnić swój punkt widzenia, ryzykujesz, że część odbiorców przegapi dużą część informacji.

Zrzuty ekranu

Prawdziwym przykładem tej kwestii jest wyjaśnianie, jak korzystać z interfejsu za pomocą zrzutów ekranu. Tekst brzmi po prostu: "kliknij przycisk zaznaczony na zrzucie ekranu" lub "ustaw konfigurację zgodnie z poniższym zrzutem ekranu". Bez tych obrazów wiedza o tym, co należy zrobić z tymi instrukcjami, jest niemożliwa. Biorąc pod uwagę, że tego rodzaju artykuły często można znaleźć w bankach wiedzy, dokumentacji lub samouczkach, jest to jeszcze bardziej problematyczne.

Przykład zrzutu ekranu z naszego Centrum pomocy. Towarzyszący tekst artykułu pomocy brzmi następująco: "Możesz dostosować ustawienia kategorii przepustek, wybierając opcję Edytuj".

Wskazówka: tekst powinien być zrozumiały bez obrazów.

Odbiorcy powinni być w stanie zrozumieć informacje bez obrazów. Dzięki instrukcjom zawartym zarówno w tekście, jak i obrazach, czytelnik może wybrać preferowany sposób odbioru informacji lub ma możliwość skorzystania z opcji awaryjnej w przypadku upośledzenia. Sztuczka, której osobiście używam, polega na pisaniu tekstu jako całości i dodawaniu obrazów później, tak jak to zrobiłem w przypadku tego artykułu na blogu. W ten sposób nie wpadnę w pułapkę pominięcia informacji, ponieważ były one widoczne na obrazie podczas pisania.

Brak tekstu alternatywnego

Często obrazy informacyjne, które można znaleźć na stronach internetowych, mają słaby tekst alternatywny lub nie mają go wcale. Celem tekstu alternatywnego jest opisanie obrazu dla użytkowników czytników ekranu. Jeśli pozostanie on pusty, użytkownicy czytników ekranu nie będą wiedzieć, co znajduje się na obrazie lub czy przegapili jakieś ważne informacje.

Wskazówka: dodaj alternatywne teksty do funkcjonalnych i informacyjnych obrazów

Tekst alternatywny zostanie przekazany użytkownikowi, który nie widzi obrazu (prawidłowo). Zachęcam wszystkich, aby nie ignorowali tego, ale dodawali wyraźny opisowy tekst alternatywny dla obrazu. Można to zrobić w kodzie źródłowym. W CMS często istnieje dedykowane pole wejściowe.

Wskazówka: inaczej obsługuj obrazy dekoracyjne dla czytników ekranu

Czasami obrazy są dodawane tylko jako dekoracja, aby uczynić stronę bardziej atrakcyjną wizualnie. Czasami najlepiej jest, jeśli obrazy są całkowicie pomijane przez czytnik ekranu. Istnieją różne podejścia do obsługi tekstów alternatywnych w zależności od celu obrazu.

Tekst w obrazach

Tekst w obrazach nie jest również zrozumiały dla osób z wadami wzroku. Zdziwiłbyś się, jak wiele tekstu znajduje się wewnątrz obrazów (wystarczy spojrzeć na dowolną platformę mediów społecznościowych). Ponownie, nie jest to złe samo w sobie, ale upewnij się, że dodajesz tekst w opisie lub jako tekst alternatywny.

Błąd 5: Słaby kontrast kolorów

Wybierz element HTML ze względu na jego znaczenie, a nie wygląd

Tekst o niskim kontraście był najczęściej wykrywanym problemem dostępności w zautomatyzowanych testach przeprowadzonych przez WebAIM. Jest to problem nie tylko dla osób niedowidzących, ale także dla osób z zaburzeniami widzenia kolorów (różne rodzaje ślepoty barw). Około 1 na 12 mężczyzn i 1 na 200 kobiet ma pewien stopień niedowidzenia barw. Niektórzy ludzie nie są nawet świadomi, że cierpią z tego powodu. Jeśli spojrzysz na poniższy obrazek, jaką liczbę widzisz?

Which number do you see? Image source

Jeśli widzisz 74, możesz mieć normalne widzenie kolorów. Jeśli widzisz 21 lub nie widzisz żadnej liczby, możesz mieć niedobór widzenia kolorów czerwono-zielonych. W takim przypadku mogłeś natknąć się na strony internetowe z trudnymi do odczytania częściami.

W WCAG a kryterium sukcesu jest zdefiniowane dla sytuacji, gdy kontrast między tekstem a jego tłem jest wystarczająco wysoki, aby osoby o umiarkowanie słabym wzroku mogły go odczytać. Wytyczne WCAG są podzielone na trzy poziomy zgodności. W Easy LMS dążymy do poziomu AA. Współczynniki kontrastu wynoszą 4,5:1 dla małego tekstu i 3:1 dla dużego tekstu.

Wskazówka: użyj narzędzia do sprawdzenia kontrastu kolorów

Jak więc sprawdzić, czy kontrast tekstu jest wystarczająco wysoki? Istnieje wiele narzędzi do sprawdzania kontrastu kolorów, których można użyć do przeprowadzenia testów na swojej stronie internetowej. Możesz również przetestować kontrast kolorów ręcznie, wprowadzając kody kolorów pierwszego planu i tła w online contrast checker.

Wskazówka: używaj ciemniejszych lub jaśniejszych odcieni danego koloru.

Jednym z wyzwań, które często pojawiają się w tej kwestii, jest to, że kolory używane w interfejsie użytkownika pasują do kolorów logo marki. Może to utrudniać rozwiązanie, ponieważ kolory wydają się być częścią tożsamości marki. Dobrą praktyką jest użycie ciemniejszego lub jaśniejszego odcienia pożądanego koloru, aby poprawić kontrast. Dostosowaliśmy kolory Easy LMS z tego powodu kilka lat temu!

Używanie koloru jako jedynego sposobu przekazywania informacji

Wcześniej wspomniałem o problemach wynikających z używania obrazów jako jedynego sposobu przekazywania informacji. To samo dotyczy kolorów. Kolory czerwony i zielony są często używane jako jedyny sposób informowania o stanach sukcesu i błędu. Niestety, czerwono-zielona ślepota barw jest najczęstszym rodzajem ślepoty barw. Dla tych użytkowników kolor czerwony i zielony będą wyglądać tak samo.

Wskazówka: zapewnij wiele sposobów komunikowania stanów

W porządku jest nadal używać kolorów czerwonego i zielonego do tych celów, ale upewnij się, że zawsze zapewniasz inny sposób komunikowania stanów, takich jak tekst, różne kształty lub (oznaczone) ikony.

Błąd 6: Brak wizualnego wskazania bieżącego fokusu

Większość użytkowników porusza się po komputerze za pomocą urządzenia wskazującego, takiego jak mysz lub gładzik w laptopie. Na urządzeniach mobilnych używamy palców na ekranie dotykowym. Dla niektórych użytkowników jest to trudne lub niemożliwe ze względu na ich niepełnosprawność. Przykładem może być paraliż, brak części ciała, zapalenie stawów lub powtarzające się urazy stresowe. W takich przypadkach użytkownicy często przełączają się na klawiaturę lub alternatywne urządzenie wejściowe, które może naśladować zachowanie klawiatury. Użytkownicy z upośledzeniem wzroku najczęściej używają klawiatury wraz z czytnikiem ekranu lub gestami na urządzeniach mobilnych.

Po naciśnięciu klawisza Tab na klawiaturze można przeskakiwać między interaktywnymi elementami na stronie internetowej, takimi jak przyciski i łącza. Możesz to wypróbować na tej stronie: po każdej zakładce zobaczysz wizualne wskazanie swojej lokalizacji na ekranie.

Style ostrości CSS

W CSS można dodać styl dla kilku różnych stanów przycisków, takich jak hover, focus i active. Często niektóre lub wszystkie z tych stanów są pomijane, a przycisk nie zmienia wyglądu wraz z interakcją. Użytkownik klawiatury jest w tym przypadku ślepy.

Wskazówka: zastosuj style fokusu wraz ze stylami najechania kursorem

Podczas dodawania stylów dla stanu najechania przycisków, dobrą praktyką jest dodanie ich również dla stanów fokusu. Najlepiej byłoby, gdyby styl fokusu był bardziej widoczny niż styl najechania kursorem, więc możesz również dodać je osobno w innym odcieniu.

Zarys fokusu przeglądarki

Podstawowy wskaźnik fokusu jest dostarczany automatycznie przez przeglądarkę internetową i jest zwykle wyświetlany jako obramowanie. Jeśli właśnie przewinąłeś tę stronę, być może ją widziałeś. Niestety, ten kontur jest często wyłączany za pomocą CSS ze względów estetycznych. Jednak przy wyłączonym obrysie i braku stylów fokusu niemożliwe jest poruszanie się po stronie internetowej wyłącznie za pomocą klawiatury.

Wskazówka: nie wyłączaj konturu

Użytkownicy korzystający z myszy nie zobaczą obrysu przeglądarki, który jest widoczny po przejściu do zakładki na stronie internetowej za pomocą klawiatury. Nie wyłączaj tego konturu za pomocą CSS, ponieważ jest to istotna pomoc dla użytkowników niepełnosprawnych. Działa również dobrze jako kopia zapasowa na wypadek, gdyby style fokusu były zbyt niejasne lub zostały przypadkowo pominięte.

Należy pamiętać, że wskaźniki fokusu klawiatury w przeglądarkach mogą się różnić i przybierać różne formy. Z tego powodu nie można na nich całkowicie polegać. Z drugiej strony, potrzeba wielu testów, aby wiedzieć na pewno, czy style fokusu są wystarczająco jasne dla użytkowników z niepełnosprawnościami. Dlatego radziłbym zawsze mieć oba.

Błąd 7: Używanie nieoznaczonych ikon w przyciskach i linkach

Ikony używane w oprogramowaniu stają się rozpoznawalne przy wielokrotnym użyciu

Ikony to świetny sposób na uniknięcie bałaganu w produkcie online. Mają również moc poprawy dostępności dla różnych niepełnosprawności, to znaczy, jeśli są jednoznaczne. Większość z nas wie, że jeśli widzimy ikonę ołówka, oznacza to "edytuj", a kosz na śmieci oznacza "usuń". Kiedy używamy ikon w interfejsie użytkownika, najlepiej jest trzymać się tych, które znamy, aby uniknąć zgadywania. Ale nawet wtedy, pod względem dostępności, wiele może pójść nie tak.

Ikony mogą być używane obok odpowiadającej im etykiety tekstowej lub samodzielnie. Najczęściej nie ma etykiety, gdy są używane samodzielnie. Na przykład, dodaję przycisk ikony dla akcji edycji, z samą ikoną ołówka w środku. Jeśli nie dodam etykiety tekstowej dla tej ikony, przycisk stanie się pustym przyciskiem. Zgadza się: czytnik ekranu zakomunikuje mi: "Przycisk". Nie jest to zbyt użyteczne.
A tym bardziej: Zakładam, że użytkownik będzie wiedział, że ikona ołówka oznacza "edytuj". Ale nie wiem tego na pewno.

Wskazówka: dodaj etykietę dla ikon

Jeśli ikona jest ważną częścią interfejsu użytkownika, najlepiej dodać do niej etykietę. Można to zrobić dodając aria-label na ikonie. Drugim sposobem jest dodanie tekstu ukrywanego dla ekranów, ale widocznego dla użytkowników czytników ekranu. Najlepiej dodać również atrybut tytułu. W ten sposób, jeśli użytkownik najedzie na niego myszką, etykieta zostanie wyświetlona.

Przyciski ikon na pulpicie nawigacyjnym Easy LMS, które wyświetlają tytuł po najechaniu na nie kursorem.

Wskazówka: ukryj ikony dekoracyjne

Jeśli dodałeś ikonę wyłącznie jako cukier na wierzchu, a informacje są zrozumiałe bez niej, najlepiej jest ukryć element dla użytkowników czytników ekranu.

Wniosek: nie pracuj ciężej, pracuj mądrzej

Myśl, że musisz zmienić te rzeczy, może być nadal nieco przytłaczająca. Kiedy po raz pierwszy dowiedziałem się o dostępności, miałem taką samą reakcję. Jest tak wiele do nauczenia się i tak wiele różnych rodzajów niepełnosprawności. Trudno jest stworzyć interfejs użytkownika idealny dla każdego.

Ale chcę ci powiedzieć: nie chodzi o zmianę produktu lub strony internetowej. Odkryłem, że najlepszym sposobem, w jaki to działa, jest zintegrowanie tego z przepływem pracy. Następnym razem, gdy tworzę lub iteruję część produktu, od razu stosuję to, czego nauczyłem się o dostępności. W ten sposób możemy poprawiać dostępność krok po kroku. Jak radzi jeden z moich bohaterów dostępności Léonie Watson: "Nie musi być idealnie; po prostu musi być trochę lepiej niż wczoraj". Głoszę!