Card Nav - Carte de navigation

Composant de navigation conçu pour rediriger vers d'autres pages ou contenus.

dsa-card-nav

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

Pas de rôle ou d’attribut ARIA par défaut.

 

Bonnes pratiques et pièges à éviter

 

dsa-card-nav-accordion

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut (sur l’élément déclencheur)

  • Rôle ARIA principal : role=”button”
  • Attributs ARIA utilisés :
    • aria-controls="content"

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

summary

⚠️ Obligatoire (sauf si slot=”summary” utilisé)

Donne un nom accessible à l’élément déclencheur.

open

Modifie la valeur de aria-expanded sur l’élément déclencheur.

 

Navigation et interaction clavier

Touches supportées :

  • Enter , Espace → Ouverture/Fermeture de l’accordéon

 

dsa-card-nav-item

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Balise <button>

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

accessible-name

Ajoute un attribut aria-label à la balise.

⚠️ Cet attribut n’est à renseigner que lorsque le bouton n’est pas explicite en lui-même.
Dans ces cas-là, il faut reprendre le nom du bouton, puis ajouter les informations complémentaires.
Exemple : accessible-name="Découvrir : le projet handicap du CNSA".

description

Crée un élément caché avec le contenu renseigné, et ajoute un attribut aria-describedby pointant vers celui-ci à la balise.

href

Si renseigné, l’élément interactif sera une balise <a>. Sinon, ce sera une balise <button>.