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:
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.