La navigation

Le besoin

12.1 Pouvoir insérer au moins 2 éléments parmi ces 3 :

  • plan du site
  • menu de navigation
  • moteur de recherche

12.2 Dans les collections de pages, insérer des liens de navigation (pagination) dans la collection

12.3 Dans le thème par défaut, identifier les zones de page avec les éléments suivants :

  • attributs id, ou ancres nommées, sur les groupes de liens importants
  • attributs id, ou ancres nommées, sur la zone de contenu principal
  • rôles ARIA banner, main, contentinfo, search (uniques dans la page), et navigation

12.4 Dans le thème par défaut, présence et paramétrage de liens d’évitement

12.5 Quelque soit la configuration de la page, l’ordre de tabulation est cohérent

12.6 Pas de piège au clavier avec les widgets de la configuration par défaut

Résultat

  • Un plan de site peut être intégré en installant le plugin « WP Sitemap Page”.
  • Le moteur de recherche peut être insérer via le widget « Chercher » ou via le thème en appelant la fonction « get_search_form() ».
  • Les menus sont créés dans l’administration de WordPress et insérés dans le thème.
  • Dans le thème par défaut twentyfifteen, le lien d’évitement « Aller au contenu principal » est caché de manière accessible et apparaît au focus clavier.
  • Dans le thème par défaut, les rôles ARIA banner, main, contentinfo, search (uniques dans la page), et navigation identifient les zones de pages.
  • Dans le thème par défaut, les liens de navigation sont présents dans les collections de pages.

Liens de navigation dans les collections de pages

<nav class="navigation pagination" role="navigation">
<h2 class="screen-reader-text">Navigation des articles</h2>
<div class="nav-links">
<a class="prev page-numbers" href="http://gta21.accesbilis.fr/?s=besoin">Page précédente</a>
<a class="page-numbers" href="http://gta21.accesbilis.fr/?s=besoin">
<span class="meta-nav screen-reader-text">Page </span>
1
</a>
<span class="page-numbers current">
<span class="meta-nav screen-reader-text">Page </span>
2
</span>
<a class="page-numbers" href="http://gta21.accesbilis.fr/page/3/?s=besoin">
<span class="meta-nav screen-reader-text">Page </span>
3
</a>
<a class="next page-numbers" href="http://gta21.accesbilis.fr/page/3/?s=besoin">Page suivante</a>
</div>
</nav>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *