Comment créer un lien de saut accessible dans une page HTML-tutoriel HTML-php.cn

Table des matières

1. Ajoutez le lien de sauts dans le HTML

2. Style le lien de saut avec CSS

3. Assurez-vous que la cible est focalisable

4. Testez le lien de saut

Maison

interface Web

tutoriel HTML

Comment créer un lien de saut accessible dans une page HTML

Thomas Edward Brown

Aug 02, 2025 pm 02:03 PM

accessibilité 跳过链接

Placez le lien de saut comme le premier élément interactif du corps avec HREF = "# Main-Conent". 2. Cachez-le visuellement à l'aide de CSS avec le haut: -40px et affichez la mise au point en définissant le haut: 6px. 3. Assurez-vous que l'élément cible (par exemple, <main>) a id = "Main-content" et tabindex = "- 1" pour recevoir une mise au point programmatique. 4. Testez en tabbant pour révéler le lien, en appuyant sur Entrée pour passer au contenu principal et en vérifiant l'annonce du lecteur d'écran et l'indication de mise au point visible, garantissant l'accessibilité complète du clavier et du lecteur d'écran.

Un lien de saut est un lien caché en haut d'une page Web qui devient visible lorsqu'il est focalisé, permettant aux utilisateurs de clavier de "sauter" la navigation répétitive passée et d'aller directement au contenu principal. Cela améliore l'accessibilité pour les utilisateurs du lecteur d'écran et du clavier uniquement. Voici comment en mettre en œuvre correctement.

1. Ajoutez le lien de sauts dans le HTML

Placez le lien de sauts comme le tout premier élément interactif à l'intérieur du . Cela garantit que c'est la première chose que les utilisateurs rencontrent lors de la navigation avec un clavier.

<a href = "# main-content" class = "skip-link"> passer au contenu principal </a> <! - En-tête de page et navigation -> <dique> <Nav> <! - Liens de navigation -> </ nav> </-header> <Main id = "Main-contenu"> <h1> Contenu principal </h1> <p> C'est le contenu principal de la page. </p> </-main>

Le href pointe vers un élément avec l' id correspondant (dans ce cas, main ). Assurez-vous que l'élément cible (comme <main> ) a un id unique et est focalisable.

2. Style le lien de saut avec CSS

Par défaut, masquez visuellement le lien de saut, mais conservez-le disponible pour les lecteurs d'écran et les utilisateurs de clavier. Ne le montrez que lorsqu'il est concentré.

.skip-link { Position: absolue; en haut: -40px; Gauche: 6px; Contexte: # 000; Couleur: #FFF; rembourrage: 8px; Décoration du texte: aucune; Border-Radius: 4px; taille de police: 1rem; Z-Index: 1000; } .skip-link: focus { En haut: 6px; }

Cela positionne le lien hors écran jusqu'à ce qu'il reçoive la mise au point, puis la déplace en vue. Utilisation top: -40px le garde caché jusqu'à ce qu'il soit nécessaire. Lorsqu'il est focalisé (par exemple, lors du tablage), top: 6px le met en vue près du coin supérieur gauche.

Alternativement, vous pouvez utiliser une méthode basée sur des clips pour se cacher, mais l'approche ci-dessus est largement prise en charge et fiable.

3. Assurez-vous que la cible est focalisable

Pour la navigation au clavier lisse, l'élément cible (par exemple, <main> ) doit être focalisable. Vous pouvez le faire en ajoutant tabindex="-1" à la cible:

Cela permet à JavaScript (ou au navigateur via une navigation de fragment) de concentrer l'élément même s'il n'est pas nativement focalisable. Il n'affecte pas l'ordre d'onglet normal mais permet au lien de sauter pour fonctionner efficacement.

Sans tabindex="-1" , la page peut faire défiler la section mais ne pas définir la mise au point du clavier, ce qui réduit l'accessibilité.

4. Testez le lien de saut

Fondamentalement, un lien de saut en fonctionnement nécessite une structure HTML correcte, un positionnement SMART CSS et une destination focalisable. C'est un petit ajout qui fait une grande différence dans l'accessibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!