ARIA landmark roles dla lepszej nawigacji

ARIA landmark roles dla lepszej nawigacji

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.

Nasze inne poradniki

Chcemy być Twoim partnerem w tworzeniu strony internetowej, a Ty chcesz mieć profesjonalnie zaprojektowaną witrynę?

Zrobimy to dla Ciebie!