• Rough draft

    • Navigation

    Owned by VERONIQUE LECLERC
    May 08, 2023
    4 min read

    1.1 Navigation globale

    1.1.2 Prévoir au moins deux moyens de navigation

    Parmi les trois moyens de navigation suivants, au moins deux doivent être présents sur le site :

    • Un menu principal.

    • Un plan du site qui doit permettre de comprendre la structure et a minima d’accéder à l’ensemble des rubriques et des fonctionnalités du site.

    • Un moteur de recherche global qui doit permettre la recherche dans l’ensemble des contenus (textes, documents, vidéos, etc.).

    Ces éléments doivent être disponibles depuis le même endroit, sur toutes les pages, partout sur le site.

    Sur le site de Radio-Canada:

    💬 Remarques

    Si nécessaire, il est possible de prévoir des filtres sur le moteur de recherche pour ne pas proposer seulement une recherche globale.

    💡 Astuces

    Présenter une page de résultats de recherche regroupés, soit par pertinence, par thème, par date, etc.

    1.1.3 Différencier visuellement la position courante dans les menus

    Dans chaque menu, l’élément courant doit avoir un aspect différent pour se distinguer.

    💡 Astuces

    Il est fortement recommandé de prévoir également un aspect différent au survol des éléments. Un ratio de contraste de 3:1 doit être respecté (voir Contrastes au point 3.1).

    Un exemple de menu où l’élément courant se distingue des autres éléments.

    1.1.4 Assurer la cohérence visuelle de la navigation

    Pour assurer une cohérence sur l’ensemble du site, l’apparence et le positionnement des éléments suivants doivent rester au même endroit (sans qu’ils soient nécessairement identiques) :

    • Les menus de navigation.

    • Le moteur de recherche.

    • Et, de manière générale, l’ensemble des éléments qui apparaissent sur toutes les pages (logo, icônes, barres de défilement, tiroirs, réseaux sociaux, partages, liens utiles, etc.).

    💬 Remarques

    L’apparence de la page d’accueil peut être différente de celle du reste du site.

    1.1.5 Prévoir une sous-navigation accessible dans une application

    La barre de tabulation qui se trouve en bas ou en haut de l’écran doit répondre aux critères d’accessibilité suivants:

    • Le contrôle servant à identifier chacun des onglets de la barre de tabulation doit avoir un libellé qui décrit le contenu de la sous-section correspondante.

    • Un indicateur visuel doit être présent pour distinguer les onglets non actifs de celui qui est présentement sélectionné.

    • Le focus doit être fait sur le premier onglet lorsque la page qui contient la barre de tabulation est chargée ou lorsque le contenu de la page est rechargé.

    • Lors de la sélection d’un onglet de la barre de tabulation, le focus doit être fait sur le premier élément de la sous-section correspondante.

     

    🍎 iOS

    Sur iOS, l’utilisateur doit être ramené au premier onglet lorsque l’utilisateur navigue au-delà du dernier onglet.

    🤖 Android

    • Sur Android, la navigation peut s’arrêter sur le dernier onglet.

    Ressources

    Voir aussi : @TODO

    1.2 Aide à la navigation

    1.2.1 Prévoir une page d'aide

    Une page d’aide doit être prévue sur le site :

    Sur Radio-Canada:

    Upload

    Upload

    Add shortcut

    💬 Remarques

    Présenter les deux liens « Aide » et « Accessibilité » de façon distincte, dans le pied de page par exemple, même si le lien «Accessibilité» fait aussi partie de la page «Aide à la navigation».

     

    1.2.2 Prévoir des liens d'évitement

    Un lien d’évitement « Aller au contenu principal » doit être affiché au même endroit sur toutes les pages, au sommet de chaque page.

    💬 Remarques

    Des liens « Aller au menu principal », « Aller au formulaire de recherche » et « Aller au pied de page » peuvent aussi être ajoutés aux côtés du lien « Aller au contenu principal » lorsque ces éléments sont éloignés du sommet de la page.

    💡 Astuces

    Les liens d’évitement sont affichés seulement lors de la navigation par tabulation. 

    Les liens d’évitement «Aller au menu», «Aller au contenu principal» et «Aller au pied de page» sont offerts sur l’ensemble du site.

     

    Voir la documentation sur le Focus dans les composantes

    1.2.3 Prévoir l'aspect visuel et l'ordonnancement de la navigation par tabulation (focus)

    À l’activation de la navigation par tabulation, il est nécessaire de distinguer de façon claire et apparente l’élément sélectionné à l’aide d’un focus, un élément graphique qui met l’emphase sur l’élément.

    Le focus par défaut du navigateur n’est pas obligatoire, et le CSS peut en être modifié.

    Une bonne manière de vérifier si l’aspect visuel de la présentation du focus est optimal est de valider son apparence (couleur, épaisseur, etc). sur fond pâle ou foncé.

    Dans une application, il est important de spécifier le premier élément à recevoir le focus chaque fois que le contenu d’une page de l’application change. Le focus doit être automatiquement mis sur l’élément décrit plus haut à la suite des actions suivantes faites par l’utilisateur :

    • Navigation vers une nouvelle page de l’application

    • Retour vers la page précédente de l’application

    • Rafraîchissement complet de la page

    • Rafraîchissement partiel de la page si la zone rafraîchie contient l’élément en question

    • Mise en avant-plan de l’application

    📝 Ressources

    Focus (Accessibilité mobilité) @TODO

     

    Navigation simplifiée / Alimentation - Évaluation heuristique https://drive.google.com/file/d/1cIHBM5_r3j9bxagdmgWwpLMz_E5uup5b/view?usp=sharing