Czy zastanawiałeś/się kiedyś, jak technologia wspomagająca, taka jak czytnik ekranu, wie, co ma ogłosić użytkownikom? Odpowiedź jest taka, że te technologie polegają na tym, że deweloperzy oznaczają strony za pomocą semantycznego HTML-a. Czym jest semantyka i jak czytniki ekranu z niej korzystają?
Możliwości i semantyka
Zanim zaczniesz analizować semantykę, warto poznać inny termin: możliwości. Możliwość to każdy obiekt, który umożliwia użytkownikowi wykonanie określonego działania. Klasycznym przykładem jest czajnik:
Ten czajnik nie wymaga instrukcji obsługi. Zamiast tego jego fizyczna konstrukcja informuje użytkownika, jak go używać. 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 m.in. języka CSS, aby dodać do interfejsu funkcje wizualne. Możesz na przykład dodać do przycisku cień i ramkę, aby przypominał rzeczywisty przycisk.
Jeśli jednak użytkownik nie widzi ekranu, te wizualne możliwości nie będą dla niego dostępne. Dlatego musisz zadbać o to, aby interfejs był skonstruowany w sposób umożliwiający korzystanie z tych samych funkcji przez technologię wspomagającą. Ta niewizualna ekspozycja możliwości elementu interfejsu użytkownika nazywana jest semantyką.
Używanie semantycznego kodu HTML
Najprostszym sposobem przekazywania właściwej semantyki jest używanie elementów HTML bogatych semantycznie.
Za pomocą CSS możesz nadać styl elementom <div> i <button>, aby wyglądały tak samo, ale w przypadku czytnika ekranu różnią się one znacznie.
<div> to tylko ogólny element grupowania,
więc czytnik ekranu odczytuje tylko tekst zawarty w elemencie <div>.
<button> jest ogłaszany jako „przycisk”, co jest znacznie wyraźniejszym sygnałem dla użytkownika, że może z nim wchodzić w interakcję.
Najprostszym
i często najlepszym rozwiązaniem tego problemu
jest całkowite unikanie niestandardowych interaktywnych elementów sterujących.
Zastąp na przykład 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 kilka z tych właściwości semantycznych:
- rola lub typ
- nazwa,
- wartość (opcjonalna)
- state (opcjonalnie)
Rola elementu określa jego typ, np. „przycisk”, „pole tekstowe” lub nawet „grupa” w przypadku elementów takich jak div i span.
Nazwa elementu to jego obliczona etykieta. Czytniki ekranu zwykle ogłaszają nazwę elementu, a następnie jego rolę, np. „Zarejestruj się, przycisk”. Algorytm, który określa nazwę elementu, uwzględnia takie czynniki jak obecność treści tekstowych w elemencie, atrybuty takie jak title lub placeholder, czy element jest powiązany z rzeczywistym elementem <label> oraz czy element ma atrybuty ARIA takie jak aria-label i aria-labelledby.
Niektóre elementy mogą mieć wartość. Na przykład zmienna <input type="text"> może mieć wartość odpowiadającą temu, co użytkownik wpisze 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 węzeł jest 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, przechodząc przez ten diagram.
Za pomocą narzędzi deweloperskich w Chrome możesz sprawdzać semantyczne właściwości elementu i poznawać jego pozycję w drzewie ułatwień dostępu.
Dalsze kroki
Gdy już wiesz coś o semantyce i o tym, jak pomaga ona w nawigacji za pomocą czytnika ekranu, nie będziesz już patrzeć na tworzone przez siebie strony w taki sam sposób. W następnej sekcji cofniemy się i zastanowimy się, jak przekazać cały zarys strony za pomocą skutecznych tytułów i punktów orientacyjnych.