ARIA landmark roles dla lepszej nawigacji
Zwiększanie dostępności, jedna strona na raz
Cześć! Jestem Magda, specjalistka ds. dostępności w firmie projektującej strony internetowe Strony Internetowe UK. Mam dla was dziś ciekawy temat – poznamy lepiej ARIA landmark roles, które mogą znacznie poprawić nawigację po naszych stronach internetowych.
Wiecie, że ponad 15% populacji ma jakąś formę niepełnosprawności? To całkiem sporo ludzi, którzy mogą mieć trudności w korzystaniu z naszych stron. Dlatego tak ważne jest, aby projektować je z myślą o dostępności. Jednym z kluczowych elementów jest właśnie odpowiednie oznaczenie struktury strony za pomocą ARIA landmark roles.
Mapy drogowe dla użytkowników
Wyobraźcie sobie, że tworzycie stronę internetową dla miejscowej cukierni. Klienci odwiedzający waszą stronę chcą szybko znaleźć najważniejsze informacje – godziny otwarcia, menu, dane kontaktowe. Gdyby strona nie była dobrze zorganizowana, klienci mogliby się pogubić i zniechęcić do dalszego przeglądania.
A teraz wyobraźcie sobie, że waszymi klientami są osoby niewidome lub słabowidzące. Dla nich brak jasnej struktury strony to jeszcze większy problem. Bez odpowiednich oznaczeń, czytniki ekranu nie będą w stanie skutecznie nawigować po treściach i użytkownik może zupełnie się pogubić.
Właśnie dlatego ARIA landmark roles są takie ważne – działają jak mapy drogowe, pomagając użytkownikom szybko zorientować się w strukturze strony i sprawnie ją przeglądać. Dzięki nim osoby korzystające z technologii asystujących mogą łatwo przeskakiwać między kluczowymi obszarami, takimi jak nagłówek, menu, stopka czy treść główna.
Poznajmy landmark roles
Najpopularniejsze landmark roles to:
– banner – zwykle obejmuje logo, nagłówek strony i główne menu nawigacyjne
– navigation – oznacza blok zawierający linki nawigacyjne, np. główne menu
– main – wskazuje główną treść strony
– complementary – oznacza treść uzupełniającą, np. boczne panele, reklamy
– contentinfo – najczęściej stopka strony, zawierająca informacje o prawach autorskich, polityce prywatności itp.
– search – wskazuje blok zawierający funkcję wyszukiwania
Możesz też zdefiniować własne role, np. region do oznaczenia dowolnego obszaru na stronie.
Jak to wygląda w praktyce? Weźmy na przykład tę stronę. Możemy wyróżnić w niej następujące obszary:
Wizualny obrys punktów orientacyjnych lub nagłówków uzyskasz za pomocą przycisków poniżej
Nagłówek strony (banner), menu nawigacji (navigation), treść główna (main), panel boczny (complementary), stopka (contentinfo) i pole wyszukiwania (search). Każdy z tych elementów pełni inną funkcję i dzięki odpowiednim oznaczeniom użytkownicy mogą łatwo je zidentyfikować.
Semantyczna struktura to podstawa
Stosowanie ARIA landmark roles to jedno, ale nie mniej ważne jest zadbanie o semantyczną strukturę całej strony. Powinniśmy korzystać z odpowiednich znaczników HTML5, takich jak <header>, <nav>, <main>, <aside>, <footer> itp.
Dlaczego to takie istotne? Wyobraźcie sobie, że cała zawartość strony jest umieszczona w jednym wielkim <div>. Bez odpowiedniego oznaczenia poszczególnych obszarów, czytniki ekranu nie będą w stanie poprawnie zidentyfikować ich funkcji. Użytkownik będzie musiał mozolnie przeszukiwać stronę, żeby znaleźć to, czego szuka.
Dlatego zawsze, kiedy tylko możemy, powinniśmy wykorzystywać semantyczne znaczniki HTML5. Dopiero wtedy możemy uzupełnić je o ARIA landmark roles, aby jeszcze bardziej wzmocnić treść.
Ten test służy ocenie struktury strony internetowej
Praktyczne zastosowanie
Wróćmy do przykładu naszej cukierni. Jak możemy zastosować tu ARIA landmark roles?
W nagłówku (<header role="banner">) umieścimy logo, nazwę firmy i główne menu nawigacyjne (<nav role="navigation">).
Główna treść strony, czyli informacje o menu, godzinach otwarcia itp., znajdzie się w elemencie <main role="main">.
Na boku, w elemencie <aside role="complementary">, mogą pojawić się dodatkowe informacje, np. o specjalnych ofertach.
Na samym dole, w stopce (<footer role="contentinfo">), umieścimy dane kontaktowe, prawa autorskie i linki do polityki prywatności.
A jeśli strona będzie miała wyszukiwarkę, oznaczymy ją jako <div role="search">.
Dzięki temu użytkownicy korzystający z czytników ekranu będą mogli bez problemu poruszać się po stronie, przeskakując bezpośrednio do interesujących ich obszarów. A ci, którzy przeglądają stronę wzrokowo, zyskają czytelną, dobrze zorganizowaną strukturę.
Wykorzystanie narzędzia ujawniającego punkty orientacyjne – inspekcja kodu
Jeszcze więcej możliwości
ARIA landmark roles to nie wszystko! Możemy też używać atrybutów aria-label i aria-labelledby, aby jeszcze dokładniej opisać dany obszar.
Na przykład, jeśli mamy menu nawigacyjne w stopce, możemy oznaczyć je jako <nav aria-label="Menu stopki">. Dzięki temu użytkownicy czytników ekranu będą wiedzieli, że to menu, a nie zwykły blok treści.
A jeśli na stronie pojawi się reklama, możemy ją oznaczyć jako <aside role="complementary" aria-label="Reklama">. W ten sposób upewnimy się, że użytkownicy wiedzą, czego dokładnie dotyczy ta część strony.
Możliwości jest naprawdę wiele. Wystarczy trochę kreatywności i podejścia user-friendly, aby stworzyć stronę internetową, która będzie działała dobrze zarówno dla widzących, jak i niewidzących użytkowników.
Przejrzysta i zrozumiała struktura strony znacząco wpływa na dostępność treści
Podsumowanie
ARIA landmark roles to świetne narzędzie, które może znacznie poprawić dostępność naszych stron internetowych. Dzięki niemu użytkownicy korzystający z technologii asystujących będą mogli sprawnie poruszać się po witrynie i szybko docierać do interesujących ich treści.
Pamiętajmy jednak, że to nie jedyne działanie, jakie możemy podjąć na rzecz dostępności. Równie ważne jest zadbanie o semantyczną strukturę strony, stosowanie odpowiednich nagłówków, etykiet i innych elementów ułatwiających nawigację.
Moim zdaniem dostępność to nie problem, a wyzwanie – ekscytujące i twórcze. Daje nam szansę, aby tworzyć jeszcze lepsze, bardziej użyteczne strony internetowe. A to przecież leży w interesie każdego z nas!
Jeśli chcecie dowiedzieć się więcej na temat dostępności, zapraszam do zapoznania się z ofertą firmy Strony Internetowe UK. Nasi specjaliści z chęcią pomogą wam uczynić wasze witryny bardziej dostępnymi.
