Semantyka i czytniki ekranu

Czy zastanawiasz się, w jaki sposób technologia wspomagająca osoby z niepełnosprawnością, np. czytnik ekranu, wie, co przekazać użytkownikom? Odpowiedź brzmi: te technologie polegają na tym, że programiści oznaczają strony za pomocą semantycznego kodu HTML. Czym jest jednak semantyka i jak z niej korzystają czytniki ekranu?

Korzyści i semantyka

Zanim zagłębimy się w semantykę, warto zapoznać się z innym terminem: afordancje. Afordancja to dowolny obiekt, który oferuje lub daje użytkownikowi możliwość wykonania działania. Klasycznym przykładem jest imbryk:

Uchwyt dzbanka do herbaty to naturalna afordancja.

Nie wymaga instrukcji obsługi – jego fizyczna konstrukcja informuje użytkownika, jak należy go obsługiwać. Ma nick, a ponieważ pojawiły się na świecie inne obiekty z podobnymi uchwytami, możesz wnioskować, jak go podnieść i uruchomić.

Podczas tworzenia graficznych interfejsów użytkownika używamy takich elementów jak CSS, aby dodawać do interfejsu grafiki. Możesz na przykład dodać do przycisku cień i obramowanie, aby przypominał prawdziwy przycisk w świecie rzeczywistym.

Jeśli jednak użytkownik nie widzi ekranu, algorytm wizualny nie zostanie mu przedstawiony. Musisz więc zadbać o to, by interfejs użytkownika był zbudowany w sposób, który przekazuje te same możliwości technologii wspomagającej osoby z niepełnosprawnością. Taka niewizualna ekspozycja afordansów elementu interfejsu jest nazywana jej semantyką.

Używaj semantycznego kodu HTML

Najprostszym sposobem na wyrażenie właściwej semantyki jest użycie elementów HTML o bogatej semantyce.

Za pomocą CSS można stylizować elementy <div> i <button>, tak aby przekazywały te same elementy wizualne, ale korzystanie z czytnika ekranu znacznie różni się od obu tych elementów. Element <div> to po prostu ogólny element grupujący, więc czytnik ekranu odczytuje tylko zawartość tekstową elementu <div>. <button> nazywa się „przyciskiem”, co jest o wiele silniejszym sygnałem dla użytkownika, że może wchodzić w interakcję z tym elementem.

Najprostszym i często najlepszym rozwiązaniem tego problemu jest całkowite unikanie niestandardowych elementów interaktywnych. Zastąp np. element <div>, który działa jak przycisk, rzeczywistym obiektem <button>.

Właściwości semantyczne i drzewo ułatwień dostępu

Ogólnie każdy element HTML ma niektóre z tych właściwości semantycznych:

  • rolę lub typ
  • nazwę;
  • value (wartość opcjonalna),
  • state (opcjonalnie).

Rola elementu opisuje jego typ, np. „przycisk”, „input” lub nawet „grupa” w przypadku elementów div i span.

Nazwa elementu to jego obliczona etykieta. Czytniki ekranu zazwyczaj wypowiadają nazwę elementu oraz jego rolę, np. „Zarejestruj się, przycisk”. Algorytm, który określa nazwę elementu, uwzględnia m.in. to, czy w elemencie znajduje się tekst, czy ma on atrybuty takie jak title lub placeholder, czy jest on powiązany z rzeczywistym elementem <label> oraz czy ma w nim jakieś atrybuty ARIA takie jak aria-label i aria-labelledby.

Niektóre elementy mogą mieć wartość. Na przykład <input type="text"> może mieć wartość, która odzwierciedla to, co użytkownik wpisał w polu tekstowym.

Niektóre elementy mogą też mieć atrybut state, który wskazuje ich bieżący stan. Na przykład element <select> może być rozwinięty lub zwinięty w zależności od tego, czy jest otwarty czy zamknięty.

Drzewo ułatwień dostępu

W przypadku każdego węzła w DOM przeglądarka określa, czy węzeł jest „ciekawy semantycznie”, i dodaje go do drzewa ułatwień dostępu. Gdy technologia wspomagająca osoby z niepełnosprawnością, taka jak czytnik ekranu, to alternatywny interfejs użytkownika, często robi to, przechadzając się po drzewie ułatwień dostępu.

Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić właściwości semantyczne elementu i poznać jego pozycję w drzewie ułatwień dostępu.

Dalsze kroki

Gdy już poznasz semantykę i zorientujesz się, jak pomagają one w nawigacji w czytniku ekranu, przyglądasz się stronom, które tworzysz w inny sposób. W następnej sekcji przyjrzymy się temu, jak przekazać cały zarys strony za pomocą skutecznych nagłówków i punktów orientacyjnych.