Zasady ogólne

Role obszarów, nazywane też punktami orientacyjnymi (ang. landmark roles) zapewniają efektywny sposób identyfikowania organizacji i struktury strony internetowej. Informacje strukturalne komunikowane użytkownikom wizualnie powinny być reprezentowane programowo za pomocą punktów orientacyjnych. Użycie ról obszarów umożliwia nawigację użytkowników czytników ekranu po stronie internetowej za pomocą klawiatury. Może być również wykorzystane przez autorów stron jako cel dla łączy pomijających „Przejdź do” oraz rozszerzeń przeglądarek w celu udoskonalenia nawigacji za pomocą klawiatury.

Intencją tej sekcji jest pomóc projektantom, programistom i kontrolerom jakości w określeniu i zrozumieniu wagi logicznego, użytecznego i dostępnego układu dla technologii wspomagających za pomocą elementów sekcyjnych HTML5 oraz ról obszarów ARIA.

Ze względu na złożoność dzisiejszych treści internetowych, w przypadku korzystania z punktów orientacyjnych, cała zawartość powinna znajdować się w obszarach semantycznie oznaczonych punktami orientacyjnymi, aby zagwarantować, że żaden element zawartości nie zostanie pominięty przez użytkownika.

Krok 1: Zidentyfikuj obszary struktury logicznej

• Podziel stronę na postrzegalne regiony zwane „obszarami”.
• Projektanci zazwyczaj wyznaczają obszary wizualnie za pomocą wyrównania i odstępów między elementami treści.
• Regiony można dodatkowo podzielić według potrzeb na logiczne podobszary.
• Przykładem podobszaru jest portlet w aplikacji portalu.

Krok 2: Przypisz rolę punktu orientacyjnego do każdego obszaru

• Przypisz rolę punktu orientacyjnego w oparciu o rodzaj zawartości w danym obszarze.
• Obszary: banner, main, complementary oraz contentinfo powinny być punktami orientacyjnymi najwyższego poziomu.
• Punkty orientacyjne można zagnieżdżać, aby zidentyfikować relacje rodzic/potomek prezentowanych informacji.

Krok 3: Oznacz każdy obszar etykietą

• Jeśli określoną rolę punktu orientacyjnego stosuje się więcej niż jeden raz na stronie, należy zadbać o unikalną etykietę.
• Jeśli obszar rozpoczyna się od elementu nagłówka (np. H1-H6), może on być użyty jako etykieta obszaru za pomocą atrybutu aria-labelledby.
• Jeśli obszar nie posiada elementu nagłówka, etykietę zapewniamy za pomocą atrybutu aria-label.
• Unikaj używania określenia punktu orientacyjnego jako części etykiety. Na przykład, jeśli oznaczysz obszar nawigacji etykietą „Nawigacja witryny”, to czytnik ekranu zakomunikuje użytkownikowi obszar „Nawigacja witryny nawigacja”. Etykietą powinno być po prostu słowo „Witryna”.