Ułatwienia dostępu cyfrowego

  • 9 min

Istnieje kilka pojęć, składni i elementów, o których należy pamiętać, aby strony internetowe były dostępne dla osób o wszystkich możliwościach. Ta lekcja zawiera omówienie podstawowych tematów. Aby w pełni zapoznać się ze szczegółowymi informacjami na temat udostępniania witryn internetowych, zobacz zalecane zasoby.

HTML5 i ARIA

HTML5 to najnowsza wersja języka Hypertext Markup Language (HTML). World Wide Web Consortium (W3C), społeczność międzynarodowa, która opracowuje standardy internetowe, zaleca. Dla wszystkich intencji i celów kod HTML5 jest bieżącym standardem dla sieci Web i powinien służyć do tworzenia podstawowej struktury witryny internetowej. Jeśli planujesz utworzyć dostępne witryny internetowe, zapoznaj się ze składnią i tagami dla języka HTML5.

Accessible Rich Internet Applications (ARIA) to specyfikacja techniczna, która może współpracować z językiem HTML5, aby ułatwić udostępnianie stron internetowych i aplikacji. ARIA nie jest częścią kodu HTML5, ale jego atrybuty mogą być używane z elementami HTML5 w niektórych wystąpieniach.

Aby uzyskać więcej informacji, dowiedz się więcej na temat ARIA w języku HTML.

Nagłówki i punkty orientacyjne

Osoby, którzy nie widzą wizualnych wskazówek strony internetowej, polegają na elementach tytułu i nagłówka, aby zrozumieć, jak strona jest ustrukturyzowana. Kod HTML5 zawiera szereg elementów sekcji, które mogą wyraźnie komunikować strukturę strony: <nagłówek>, <nawigacja>, <główny> i <stopka>. Jeśli są one prawidłowo używane, te elementy HTML5 pomagają osobom korzystającym z czytników zawartości ekranu nawigować po stronie internetowej.

Jednak aby zmaksymalizować dostępność, najlepiej użyć elementów HTML5 z rolami ARIA. Role ARIA obejmują: role="banner", role="navigation", role="main", and role="contentinfo". Te role ARIA tworzą strukturę punktów orientacyjnych, która umożliwia osobom korzystającym z czytników zawartości ekranu szybkie i łatwe przechodzenie do żądanej części strony internetowej. Na przykład zamiast czekać, aż czytnik zawartości ekranu będzie opowiadał poszczególne elementy jeden po drugim, osoba może od razu przejść do określonego charakterystycznego elementu w dół strony internetowej.

Aby uzyskać więcej informacji, zapoznaj się z przykładem punktów orientacyjnych W3C ARIA.

Struktura strony

Witryny internetowe powinny również zawierać tytuł programowy lub odpowiednie formatowanie nagłówków. Strony sieci Web, które nie mają tytułu lub nieprawidłowo używają elementów nagłówka, utrudniają użytkownikom, którzy używają czytników zawartości ekranu, aby wiedzieć, gdzie znajdują się na danej stronie.

Aby uniknąć tych problemów:

  • Upewnij się, że strony internetowe udostępniają tytuł strony odpowiedniego do informacji i kontekstu przy użyciu <elementu title> .
  • Upewnij się, że nagłówki programowe są używane zawsze, gdy jest to odpowiednie, i są prawidłowo zagnieżdżone — na przykład <element h3> nie powinien podążać za <elementem h1> , chyba że między nimi istnieje <element h2> .  
  • Unikaj używania elementów nagłówków tylko ze względów stylistycznych.

Color

Podobnie jak w przypadku każdej zawartości cyfrowej, użycie koloru jest istotną kwestią podczas tworzenia strony internetowej. Upewnij się, że kolor nie jest jedyną wizualną metodą przekazywania informacji, wskazującą akcję, monitując o odpowiedź lub wyróżniający element wizualizacji. Gdy jest używany sam kolor, osoby, które są ślepe lub kolorowe, mogą nie być w stanie określić, które pola są wymagane, które elementy są zaznaczone itd. Upewnij się, że tekst i obrazy tekstu zapewniają współczynnik kontrastu kolorów wynoszący co najmniej 4,5 do 1. Kilka analizatorów kontrastu kolorów jest dostępnych online bezpłatnie. Na przykład możesz użyć analizatora kontrastu kolorów w Szczegółowe informacje ułatwień dostępu w systemie Windows, aby zapewnić dostępne współczynniki kontrastu.

 Oto kilka wyjątków od tych wytycznych:

  • Duży tekst: tekst na dużą skalę (zwykły lub 14-punktowy) i obrazy tekstu na dużą skalę mogą mieć współczynnik kontrastu równy 3:1.
  • Nawiasy uboczne: nie ma wymogu kontekstowego dla tekstu lub obrazów tekstu, które są częścią nieaktywnego składnika interfejsu użytkownika. Lub w przypadku tekstu lub obrazów tekstu, które są czystą dekoracją, niewidoczne dla nikogo lub jest to część obrazu, która zawiera inną znaczącą zawartość wizualną.
  • Logoes: Tekst, który jest częścią logo lub nazwy marki, nie ma minimalnego wymagania kontrastu.

People viewing large text on a computer screen.

Duży tekst na ekranie na potrzeby ułatwień dostępu

Tabele danych

Tabele danych mogą być trudne dla niektórych aplikacji technologii pomocniczych (AT), takich jak czytniki zawartości ekranu. Aby zapewnić jak największą dostępność tabel danych, podczas korzystania z tabel w witrynie internetowej należy wykonać następujące czynności:

  • Użyj natywnych elementów tabeli HTML (table, thead, , trtbody, thi td).
  • Poprawnie zidentyfikuj th nagłówki tabeli (użyj elementu ).
  • W przypadku tabel złożonych (więcej niż jeden wiersz nagłówków) upewnij się, że nagłówki są skojarzone z odpowiednimi danymi.
  • Użyj atrybutu zakresu, aby określić, czy komórka jest nagłówkiem wiersza, kolumny lub grupy wierszy lub kolumn (przy użyciu wiersza wartości, kolumny, grupy wierszy lub kolumn).
  • id Dodaj atrybut do dowolnej komórki używanej jako nagłówek dla innych komórek, a następnie odwołaj się do odpowiedniej id wartości przy użyciu atrybutu headers w każdej komórce danych.

Data table and its corresponding native HTML table elements.

Jeśli te kroki nie są wykonywane, osoby korzystające z technologii pomocniczej mogą mieć trudności ze zrozumieniem tabel danych w witrynie.

Limit czasu formularza i opinie

Jeśli komunikaty o błędach nie są wyraźnie identyfikowane, osoby korzystające z technologii pomocniczej mogą nie być w stanie prawidłowo wykonać formularza na stronie internetowej. Czas odpowiedzi mogą uniemożliwić osobom korzystającym z technologii pomocniczej możliwość ukończenia formularza lub korzystania z aplikacji internetowej.

Po weryfikacji można wyraźnie wskazać komunikaty o błędach, wykonując następujące czynności:

  • Używanie spójnej metody do wskazywania komunikatów o błędach.
  • Identyfikowanie pól w błędzie.
  • Identyfikowanie pól błędów na początku formularza.
  • Identyfikowanie pól błędów w etykiecie dla każdego pola.

W miarę możliwości należy podać sugestie dotyczące alternatywnych danych wejściowych. Jednak takie podejście nie jest konieczne w przypadku pokonania celu formularza. Na przykład gdy formularz jest częścią testu, sugestia alternatywnych danych wejściowych może potencjalnie dostarczyć wskazówkę lub odpowiedź na pytanie, co może nie być odpowiednie.

Należy zapewnić zapobieganie błędom w przypadku transakcji prawnych lub finansowych. Jedną z opcji jest umożliwienie użytkownikom przeglądania swoich danych wejściowych przed dokonaniem ostatecznego przesłania.

Osoby, którzy korzystają z czytników zawartości ekranu, mogą nawigować po stronie internetowej, wyświetlając listę linków strony internetowej.

Jeśli kilka linków na stronie internetowej ma taką samą nazwę, ale wskazuje różne adresy URL, ludzie mogą stać się zdezorientowani. Upewnij się, że nazwy linków są znaczące, unikatowe i opisowe, zarówno w kontekście, jak i poza jego kontekstem.

Unikaj ogólnych, nieskrypcyjnych nazw linków, które pojawiają się poza kontekstem, na przykład na liście "Dodatkowe zasoby". Osoba korzystająca z czytnika zawartości ekranu nie ma żadnego kontekstu ani zrozumienia, co to jest link lub dlaczego jest tam. W tych przykładach przedstawiono listę z ogólnymi, niedostępnymi nazwami linków oraz listą z dostępnymi, opisowymi nazwami linków.

Przykład linków z ułatwieniami dostępu:

Web page with a series of three descriptive link names.

Seria opisowych nazw linków

Przykład niedostępnych łączy:

Web page with a series of three generic, non-descriptive link names

Seria ogólnych, nieskrypcyjnych nazw łączy

Obrazy

Osoby, którzy nie widzą obrazów, i polegają na deweloperach witryn internetowych i autorach zawartości, aby je opisać.

Osoby, którzy mają niską widoczność, mogą mieć trudności z odczytaniem obrazu tekstu, ponieważ jest on pikselowy po powiększeniu. Inne trudności występują, gdy kontrast nie jest wystarczająco silny lub obraz jest zbyt mały.

Podaj krótki, konkretny i informacyjny tekst alternatywny dla obrazów, takich jak zdjęcia i przyciski.  

Przykład niedostępnego obrazu:

<img src="MSFTlogo.jpg" alt="logo" />

Przykład dostępnego obrazu:

<img src="MSFTlogo.jpg" alt="Microsoft logo" />

Chociaż niedostępny przykład opisuje obraz jako logo, nie określa typu logo, więc nie jest przydatne dla kogoś, kto korzysta z tekstu alternatywnego. Po dodaniu kwalifikatora w dostępnym przykładzie użytkownik wie dokładnie, co to jest logo.

Innym elementem nietekstu, który należy wziąć pod uwagę, jest obrazy dekoracyjne. Jeśli na przykład strona internetowa zawiera stylizowane obramowanie, nie ma potrzeby opisywania jej szczegółowo w tekście alternatywnym. Możesz wskazać, że jest on dekoracyjny w kodzie, dodając pusty atrybut alt.

Example of nontext elements requiring and not requiring descriptive alternative text attributes.

Przykład obramowania obrazu i dekoracyjnego

Przykład niedostępny:

<img src="border.gif" />

Przykład z ułatwieniami dostępu:

<img src="border.gif" alt="" />

Dostępny przykład nie zawiera żadnego tekstu. Jednak fakt, że alt atrybut jest dołączony, ale nie pokazuje żadnego tekstu, wskazuje komuś, kto korzysta z czytnika zawartości ekranu, że obraz jest dekoracyjny i nie zawiera informacji krytycznych.

Aby uzyskać więcej informacji na temat poprawy ułatwień dostępu, zapoznaj się z niedostępną stroną główną W3C Przed i po pokazie.