Repères accessibles

Le critère de réussite WCAG 2.4.1 Contourner les blocs stipule que les technologies d'assistance telles que les lecteurs d'écran doivent permettre aux utilisateurs de naviguer par points de repère pour contourner les blocs de contenu répétés sur plusieurs pages Web.

Il est essentiel de définir la structure HTML sémantiquement correctement et avec précision. Les points de repère jouent un rôle abstrait et vital en aidant les utilisateurs à naviguer dans le contenu de la page à l'aide de technologies d'assistance. Il identifie par programme les sections de la page et permet aux utilisateurs de percevoir le contenu de manière plus significative.

La clé consiste à identifier la structure logique de la page et à utiliser les rôles repères appropriés ou les éléments définis par HTML5 pour créer une page sémantiquement valide.

Presque toutes les pages ont une structure standard : header , main , navigation , region , footer et aparté .

<header> identifie une bannière sur la page, qui est généralement située en haut. Il contient principalement la recherche, le logo de la marque et la navigation principale. Idéalement, chaque page ne devrait avoir qu'un seul repère de bannière.

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
Appuyez sur Inser + Control + R => Liste des points de repère
Q => Aller au point de repère principal
R => Aller au point de repère suivant
shift+ R => Aller au point de repère précédent

NVDA
Appuyez sur Inser + F7 => Liste des points de repère
D => Aller au point de repère principal Landmark
shift + D => Aller au Landmark précédent

Voiceover
Appuyez sur Ctrl + Option + U => Liste des Landmarks
W => Aller au Landmark suivant
Shift + W => Aller au Landmark précédent