Czy zastanawiałeś(-aś) się kiedyś, jak technologia wspomagająca, np. czytnik ekranu, wie, co ma ogłosić użytkownikom? Odpowiedź jest taka, że te technologie opierają się na oznaczaniu stron przez deweloperów za pomocą semantycznego kodu HTML. Czym jednak jest semantyka i jak korzystają z niej czytniki ekranu?
Affordancje i semantyka
Zanim przejdziemy do semantyki, warto zrozumieć, czym są możliwości. Affordancja to każdy obiekt, który umożliwia użytkownikowi wykonanie działania. Klasycznym przykładem jest czajnik:
Ten czajnik nie wymaga instrukcji obsługi. Zamiast tego fizyczna konstrukcja informuje użytkownika, jak należy go obsługiwać. Ma uchwyt, a ponieważ widzisz inne obiekty na świecie z podobnymi uchwytami, możesz wywnioskować, jak go podnieść i obsługiwać.
Podczas tworzenia graficznych interfejsów użytkownika używamy CSS-u, aby dodać do nich wskazówki wizualne. Możesz na przykład dodać do przycisku cień i obramowanie, aby przypominał prawdziwy przycisk.
Jednak w przypadku użytkowników, którzy nie widzą ekranu, te wizualne wskazówki nie są przekazywane. Dlatego musisz zadbać o to, aby interfejs był skonstruowany w taki sposób, aby przekazywać te same możliwości technologii wspomagającej. Niewizualne udostępnianie możliwości elementu interfejsu nazywa się jego semantyką.
Pisz semantyczny kod HTML
Najprostszym sposobem przekazania prawidłowej semantyki jest użycie elementów HTML o bogatej semantyce.
Za pomocą CSS można nadać elementom <div> i <button> taki sam wygląd, ale w przypadku korzystania z czytnika ekranu te 2 elementy działają zupełnie inaczej. Element <div> to tylko ogólny element grupujący, więc czytnik ekranu odczytuje tylko tekst w elemencie <div>.
<button> jest ogłaszany jako „przycisk”, co jest znacznie wyraźniejszym sygnałem dla użytkownika, że jest to element, z którym może wejść w interakcję.
Często najlepszym rozwiązaniem tego problemu jest całkowite unikanie niestandardowych elementów interaktywnych. Na przykład zastąp element <div>, który działa jak przycisk, rzeczywistym elementem <button>.
Właściwości semantyczne i drzewo ułatwień dostępu
Ogólnie rzecz biorąc, każdy element HTML ma niektóre z tych właściwości semantycznych:
- rola lub typ,
- Nazwa
- wartość (opcjonalnie);
- Stan (opcjonalnie)
Rola elementu opisuje jego typ, np. „przycisk”, „pole wejściowe” lub nawet „grupa” w przypadku elementów div i span.
Nazwa elementu to jego obliczona etykieta. Czytniki ekranu zwykle odczytują nazwę elementu, a następnie jego rolę, np. „Zarejestruj się, przycisk”. Algorytm określający nazwę elementu uwzględnia takie czynniki jak to, czy element zawiera tekst, czy ma atrybuty takie jak title lub placeholder, czy jest powiązany z rzeczywistym elementem <label> oraz czy ma 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ść odzwierciedlającą to, co użytkownik wpisał w polu tekstowym.
Niektóre elementy mogą mieć też stan, który informuje o ich bieżącym stanie.
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 jest on semantycznie „interesujący”, i dodaje go do drzewa dostępności. Gdy technologia wspomagająca, np. czytnik ekranu, udostępnia użytkownikowi alternatywny interfejs, często robi to, przeglądając to drzewo dostępności.
Za pomocą narzędzi deweloperskich w Chrome możesz sprawdzić właściwości semantyczne elementu i jego położenie w drzewie ułatwień dostępu.
Dalsze kroki
Gdy dowiesz się nieco więcej o semantyce i o tym, jak ułatwia ona nawigację za pomocą czytnika ekranu, zaczniesz inaczej patrzeć na tworzone strony. W następnej sekcji cofniemy się o krok i zastanowimy się, jak cały zarys strony można przekazać za pomocą skutecznych nagłówków i punktów orientacyjnych.