Logo LepszyWeb.pl

Przykłady punktów orientacyjnych ARIA

Wizualny obrys punktów orientacyjnych lub nagłówków uzyskasz za pomocą przycisków poniżej.

Punkt orientacyjny banner

Punkt orientacyjny banner identyfikuje zawartość strony internetowej na początku każdej strony w witrynie, czasem nazywanych nagłówkiem strony albo paskiem tytułowym witryny czy winietą. Zazwyczaj zawiera takie fragmenty, jak logo lub nazwa wydawcy witryny oraz formularz wyszukiwarki działający w serwisie. Baner zazwyczaj jest wyświetlany na początku strony i zwykle zajmuje całą jej szerokość.

Specyfikacja ARIA 1.1: punkt orientacyjny banner.

Wzorzec projektowy

  • Każda strona może mieć jeden punkt orientacyjny typu banner.
  • Punkt orientacyjny banner powinien być obszarem najwyższego poziomu.
  • Gdy strona zawiera zagnieżdżony document lub obszar application (np. zwykle przez zastosowanie elementów iframe oraz frame), każdy element document lub application może mieć tylko jeden punkt orientacyjny typu banner.
  • Jeśli na stronie znajduje się więcej niż jeden punkt orientacyjny banner, każdy musi mieć unikalną etykietę.

Atrybut role="banner" został użyty do zdefiniowania roli punktu orientacyjnego banner.

Przykład ARIA

<div role="banner">
  <h1>Tytuł strony identyfikujący witrynę<h1>
  .... treść elementu banner....
</div>
  • Element HTML5 header definiuje punkt orientacyjny banner, gdy jego kontekstem jest element body.
  • Element HTML5 header nie jest uznawany za punkt orientacyjny banner, gdy jest potomkiem jednego z następujących elementów:
    • article
    • aside
    • main
    • nav
    • section

Przykład HTML5

<header>
  <h1>Informacje o witrynie<h1>
  .... treść elementu banner....
</header>