Czy kiedykolwiek zastanawiasz się, jak technologie wspomagające osoby z niepełnosprawnością, takie jak ekran, czytelnik wie, co przekazać użytkownikom? Odpowiedzią jest to, że technologie te polegać na oznaczeniu stron przez programistów przy użyciu semantycznego kodu HTML. Ale jakie semantykę i sposób korzystania z nich przez czytniki ekranu?
Funkcje i semantyka
Zanim zagłębimy się w semantykę, warto zapoznać się z innym terminem: afordancje. Afordancja to dowolny przedmiot, który oferuje użytkownikowi możliwość wykonania działania. Klasycznym przykładem jest czajnik:
Czajnik nie wymaga instrukcji obsługi. jego fizyczna konstrukcja informuje użytkownika, jak należy ją obsługiwać. Ma nick, a ponieważ i znajdujesz inne przedmioty z podobnymi uchwytami, możesz dowiedzieć się, podnieś ją i obsługuj.
Opracowujemy graficzne interfejsy użytkownika, korzystając np. z CSS, aby dodawać wizualne afordancje do interfejsu. Możesz na przykład dodać do przycisku cień, aby wyglądała jak prawdziwy przycisk.
Jeśli użytkownik nie patrzy na ekran, nie zostaną im przekazane. Dlatego należy zadbać o to, aby interfejs skonstruowane w sposób, który może przekazać te same afordy technologii. Ta niewizualna ekspozycja afordancji elementu interfejsu jest nazywana jego semantyki.
Używaj semantycznego kodu HTML
Najprostszym sposobem na przekazanie odpowiedniej semantyki jest użycie bogatego semantycznie języka HTML. .
Dzięki CSS możliwe jest
aby nadać styl elementom <div> i <button> tak, aby pasował do tych samych elementów wizualnych,
ale w przypadku korzystania z czytnika ekranu
są one zupełnie inne.
<div> to po prostu ogólny element grupujący,
aby czytnik ekranu odczytał tylko tekst z pola <div>.
<button> wypowiada nazwę „przycisk”.
jest znacznie silniejszym sygnałem dla użytkownika, że mogą wchodzić w interakcję z produktem.
Najprostsze
a często najlepszym rozwiązaniem tego problemu.
jest całkowite unikanie niestandardowych, interaktywnych elementów sterujących.
Możesz na przykład zastąpić element <div>, który działa jak przycisk
z rzeczywistą wartością <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 następujących elementów semantycznych: właściwości:
- rolę lub typ,
- nazwa;
- wartość (opcjonalny),
- stan (opcjonalny),
Rola elementu określa jego typ, np. „przycisk”. „input”, lub nawet
„grupa” dla elementów takich jak div i span.
Nazwa elementu to jego obliczona etykieta. Czytniki ekranu zwykle informują
nazwę elementu, a następnie jego rolę, np. „Zarejestruj się, przycisk”. Algorytm
który określa nazwę elementu,
na przykład czy zawiera on jakiś tekst
bez względu na to, czy ma on atrybuty takie jak title czy nie.
lub placeholder, niezależnie od tego, czy element jest powiązany z rzeczywistym parametrem
<label>, a element ma takie atrybuty ARIA,
aria-label i aria-labelledby.
Niektóre elementy mogą mieć wartość. Na przykład <input type="text"> może
mają wartość, która odzwierciedla to, co użytkownik wpisał w polu tekstowym.
Niektóre elementy mogą też mieć wartość state, która wskazuje ich bieżący stan.
Na przykład element <select> może znajdować się w rozmiarze rozwiniętym lub
zwinięty w zależności od tego, czy jest otwarta, czy zamknięta.
Drzewo ułatwień dostępu
W każdym węźle DOM przeglądarka ustala, czy węzeł jest semantycznie „interesujący” wzbogaciliśmy je o ułatwienia dostępu drzewo. Gdy technologia wspomagające osoby z niepełnosprawnością, np. czytnik ekranu, zapewnia alternatywny interfejs użytkownika, często dzieje się to, przechodząc to drzewo ułatwień dostępu.
Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić semantykę elementu usługi i sprawdzić jej pozycję w drzewie ułatwień dostępu.
Dalsze kroki
Gdy już znasz semantykę i wiesz, jak ułatwia ona nawigację przy użyciu czytnika ekranu, możesz inaczej spojrzeć na strony, które tworzysz. W następnej sekcji Robimy krok w tył i zastanowimy się, jak można dostosować cały kontur strony przekazywane za pomocą skutecznych nagłówków i punktów orientacyjnych.