Pourquoi les liens de navigation sont importants
Les liens de navigation par saut offrent plusieurs avantages :
- Convivialité améliorée : Réduit l’effort requis pour naviguer dans les menus pour les utilisateurs qui s’appuient sur des technologies d’assistance.
- Accessibilité améliorée: Assure la conformité aux directives d'accessibilité telles que WCAG et ADA.
- Meilleure expérience utilisateur : Rend votre site plus facile à naviguer pour tous les utilisateurs.
Guide étape par étape pour ajouter des liens de navigation ignorés
Étape 1 : Ajouter du code HTML pour les liens de saut
Ajoutez le code HTML pour un lien de saut en haut du fichier d'en-tête de votre site :
Accéder au contenu principal
Assurez Un href l'attribut pointe vers l'ID de votre conteneur de contenu principal.
Étape 2 : ajouter un identifiant au contenu principal
Dans votre thème WordPress, localisez le conteneur de contenu principal et ajoutez un ID :
</div>
Étape 3 : Styliser le lien de saut
Personnalisez le lien de saut pour qu'il soit visible lorsque vous avez sélectionné le curseur. Ajoutez le code CSS suivant à votre thème :
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 10px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; }
Étape 4 : tester le lien de saut
Utilisez un clavier pour naviguer sur votre site et vérifiez que le lien de saut apparaît et fonctionne correctement. Appuyez sur Tab se concentrer sur le lien de saut et Enter pour l'activer.
Meilleures pratiques pour ignorer les liens de navigation
- Placez les liens de saut en premier : Assurez-vous que le lien de saut est le premier élément focalisable sur la page.
- Utiliser des étiquettes claires : Le texte du lien doit clairement indiquer son objectif, par exemple « Passer au contenu principal ».
- Test sur tous les appareils : Vérifiez la fonctionnalité sur les ordinateurs de bureau, les tablettes et les appareils mobiles.
Études de cas : Skip Links en action
Étude de cas 1 : Site Web éducatif
Une plateforme éducative a mis en place des liens de saut, ce qui a permis une meilleure navigation pour les étudiants utilisant des lecteurs d'écran et une amélioration de 15 % des scores d'accessibilité.
Étude de cas 2 : Boutique de commerce électronique
Un détaillant en ligne a ajouté des liens de saut à son menu de navigation, réduisant ainsi les taux de rebond et améliorant la convivialité pour les utilisateurs de clavier.
FAQ : Ajout de liens de navigation ignorés
Que sont les liens de navigation ignorés ?
Les liens de navigation permettent aux utilisateurs de contourner les menus de navigation répétitifs et d'accéder directement au contenu principal de la page.
Les liens de saut sont-ils requis pour la conformité en matière d’accessibilité ?
Bien que cela ne soit pas explicitement requis, les liens de saut aident à respecter les directives WCAG en améliorant la navigation pour les utilisateurs de technologies d'assistance.
Puis-je ajouter des liens de saut sans modifier le code ?
Oui, certains plugins d'accessibilité comme Plugin d'accessibilité WP One Tap peut ajouter des liens de saut automatiquement.
Les liens de saut fonctionnent-ils sur les appareils mobiles ?
Oui, lorsqu'ils sont correctement mis en œuvre, les liens de saut fonctionnent sur tous les appareils, y compris les mobiles.
Comment tester les liens de navigation ignorés ?
Utilisez un clavier pour naviguer sur votre site et assurez-vous que le lien de saut est focalisable et fonctionnel.
