Dostępne punkty orientacyjne

Kryterium sukcesu WCAG 2.4.1 Obejście bloków stanowi, że technologie wspomagające, takie jak czytniki ekranu, muszą umożliwiać użytkownikom nawigację po punktach orientacyjnych, aby ominąć bloki treści powtarzające się na wielu stronach internetowych.

Niezbędne jest poprawne i dokładne zdefiniowanie struktury HTML pod względem semantycznym. Punkty orientacyjne odgrywają abstrakcyjną i istotną rolę, pomagając użytkownikom w poruszaniu się po zawartości strony za pomocą technologii wspomagających. Programowo identyfikuje sekcje strony i pozwala użytkownikom postrzegać treść w bardziej znaczący sposób.

Kluczem jest zidentyfikowanie logicznej struktury strony i użycie odpowiednich ról charakterystycznych lub elementów zdefiniowanych w HTML5 do zbudowania semantycznie poprawnej strony.

Prawie wszystkie strony mają standardową strukturę : header , main , navigation , region , footer i side .

<header> identyfikuje baner na stronie, który zwykle znajduje się na górze. Zawiera głównie wyszukiwanie, logo marki i główną nawigację. W idealnej sytuacji każda strona powinna zawierać tylko jeden punkt orientacyjny banera.

Using the HTML5 element

<header>
  <div>
    company logo..brand name
  </div>
  <nav>
    main navigation of the website
  </nav>
</header>

Using the Aria Technique

<div role=“header”>
    company logo.. brand name or navigation 
</div>

Using the HTML5 element

<main>
  <h1> main heading for the page </h1>
  <div> main content goes here </div>
</main>

Using the Aria Technique

<div role=“main”>
  <h1> main heading of the page </h1>

   ........main content goes here.......

</div>

Using the HTML5 element 

<nav id="primary-nav" aria-label="primary navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
    <li><a href="page-link-4">page link 4</a></li>
  </ul>
</nav>

More than one <nav> tag in the same page

<nav aria-labelledby="pagination-nav">
  <h2 id="pagination-nav">heading content</h2>
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</nav>

Using the Aria Technique

<div role="navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</div>

HTML structure

<header>
  <a href="#main" id="skip-links" class="offscreen">
    skip to main
  </a>
</header>
<main id="main"></main>
CSS

.offscreen{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;

  &:focus {
    position: static;
    margin: auto;
    width: auto;
    height: auto;
    }
}

Using the HTML5 element

<section aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
  .....region content goes here.....
</section>

Using the Aria Technique 

<div role="region" aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
   .........region content goes here.........
</div>

Using the HTML5 element

<footer>
  <p>......footer content goes here....</p>
  <ul>
    <li><a href="page_link_1.html">page link 1</a></li>
    <li><a href="page_link_2.html">page link 2</a></li>
  </ul>
</footer>

Using the Aria Technique 

<div role="contentinfo">
  <p>......footer content goes here......</p>
</div>

Using the HTML5 element 

<aside aria-labelledby="heading_id">
  <h2 id="heading_id">.......heading content goes here....</h2>
  ........region content goes here.......
</aside>


Using the Aria Technique 

<div role="complementary" aria-labelledby="heading_id">
  <h2 id="heading_id">heading content goes here</h2>
  ......region content goes here......
</div>

JAWS
Naciśnij Insert + Control + R => Lista punktów orientacyjnych
Q => Przejdź do głównego punktu orientacyjnego
R => Przejdź do następnego punktu orientacyjnego
shift+ R => Przejdź do poprzedniego punktu orientacyjnego

NVDA
Naciśnij Wstaw + F7 => Lista punktów orientacyjnych
D => Przejdź do głównegoorientacyjnego
+ D => Przejdź do poprzedniego punktu orientacyjnego

VoiceOver
Naciśnij Control + Option + U => Lista punktów orientacyjnych
W => Przejdź do następnego punktu orientacyjnego
Shift + W => Przejdź do poprzedniego punktu orientacyjnego