Regiony strony

Zaznacz różne regiony stron internetowych i aplikacji, aby mogły być identyfikowane przez przeglądarki internetowe i technologie wspomagające.

Nagłówek

Większość witryn internetowych zawiera region u góry każdej strony zawierającej informacje o witrynie, takie jak logo witryny, funkcja wyszukiwania i opcje nawigacyjne. HTML5 udostępnia element <header>, który może być używany do zdefiniowania takiego regionu.
Uwaga: jeśli element <header> jest używany wewnątrz elementów <article> i <section>, nie jest skojarzony z całą stroną, ale tylko z tym konkretnym <article> lub <section>.

FRAGMENT KODU:

<header> … <img src= "/images/logo.png" alt= "SpaceBear Inc." > … </header>

Stopka strony

Podobnie jak w nagłówek strony, większość witryn internetowych zawiera również region na dole każdej strony, zawierający informacje na temat całej witryny, na przykład informacje o prawach autorskich, informacje o ochronie prywatności lub zastrzeżeniach. Element HTML5 <footer> może być używany do zdefiniowania takiego regionu.

Uwaga: jeśli element <footer> jest używany wewnątrz elementów <article> i <section>, nie jest identyfikowany jako stopka dla całej strony, ale dotyczy tylko tego konkretnego <article> lub <section>.

FRAGMENT KODU:

<footer> … <p> &copy; 2014 SpaceBears Inc. </p> … </footer>

Nawigacja

Element HTML5 <nav> może służyć do identyfikacji menu nawigacyjnego. Strona internetowa może mieć dowolną liczbę menu nawigacyjnych. Użyj etykiet do identyfikacji każdego menu nawigacyjnego.

FRAGMENT KODU:

<nav aria-label= "Main Navigation" > … </nav> …
<nav aria-labelledby= "quicknav-heading" >
 <h5 id= "quicknav-heading" > Quick Navigation </h5> …
</nav>

Główna zawartość

Użyj elementu HTML5 <main>, aby zidentyfikować główny obszar zawartości strony internetowej lub aplikacji.

FRAGMENT KODU:
<main>

 <h1> Stellar launch weekend for the SpaceBear 7! </h1> … 

</main>

Treść uzupełniająca

Użyj elementu HTML5 <aside>, aby zidentyfikować regiony obsługujące główną treść, a jednocześnie oddzielne i znaczące sekcje; Na przykład notatka boczna wyjaśniająca lub opisująca główną treść.

FRAGMENT KODU:

<aside> <h3> Related Articles </h3> … </aside>

Regiony strony w HTML5 definiowane przy użyciu protokołu WAI-ARIA

Większość obecnych przeglądarek internetowych obsługuje powyższe elementy HTML5 i przekazuje informacje do pomocy technicznej za pośrednictwem interfejsów API ułatwień dostępu. Jednak aby zmaksymalizować zgodność z przeglądarkami internetowymi i technologiami wspomagającymi, które obsługują architekturę WAI-ARIA, ale nie obsługują obecnie HTML5, zaleca się obecnie używać zarówno elementów HTML5, jak i odpowiadających im ról WAI-ARIA.

FRAGMENT KODU: PRZYKŁADY W HTML5

<header role= "banner" > … </header> 

<main role= "main" > … </main> 

<nav role= "navigation" > … </main> 

<footer role= "contentinfo" > … </footer>

Regiony strony w HTML4 definiowane przy użyciu protokołu WAI-ARIA

Jeśli nie można użyć HTML5 lub jeśli strona HTML4 jest zmodyfikowana w celu zwiększenia dostępności, dodaj kod WAI-ARIA, aby podzielić elementy, które działają jako ich odpowiedniki HTML5, na przykład:

 FRAGMENT KODU: PRZYKŁADY W HTML4

<div class= "header" role= "banner" > … </div> <div id= "main" role= "main" > … </div> <div id= "nav" role= "navigation" > … </div> <div id= "footer" role= "contentinfo" > … </div>

Powiązane zasoby WCAG 2.0

Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:

Kryteria powodzenia:

• 1.3.1 Informacje i relacje: Informacje, struktura i relacje przekazywane przez prezentację mogą być programowo określone lub dostępne w tekście. (Poziom A) 
• 2.4.1 Bloki obejściowe : mechanizm umożliwia pominięcie bloków treści, które są powtarzane na wielu stronach sieci Web. (Poziom A) 
• 2.4.6 Nagłówki i etykiety: nagłówki i etykiety opisują temat lub cel. (Poziom AA)  

Techniki: ARIA11:

• używanie punktów orientacyjnych ARIA do identyfikacji obszarów strony

 Poprzedni : Koncepcja struktury stron

 Dalej: Identyfikowanie regionów

Na podstawie:

https://www.w3.org/WAI/tutorials/page-structure/regions/