Comment créer un lien «sauter au contenu»

Les liens de sauts sont de petits liens de navigation interne qui aident les utilisateurs à se déplacer entre les pages. Vous ne le voyez peut-être jamais vraiment car ils sont souvent cachés, utilisés comme améliorations d'accessibilité qui permettent aux utilisateurs de clavier et aux lecteurs d'écran de passer de la page en haut de la page sans avoir à traverser d'autres éléments sur la page en premier.

En fait, si vous ouvrez Devtools, vous pouvez en trouver un sur CSS-Tricks.

À mon avis, la meilleure façon d'implémenter la saut de liaison est de la cacher et de le montrer quand elle est concentrée. Supposons donc que nous ayons un lien en HTML:

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  Passer au contenu</a>

… Nous pouvons lui donner une position absolue et l'éloigner de l'écran:

 .skip-à-content-link {
  Gauche: 50%;
  Position: absolue;
  Transform: Translatey (-100%);
}

Ensuite, quand il se concentre, nous pouvons le redémarrer et le style dans le processus:

 .skip-à-content-link {
  Contexte: # E77E23;
  hauteur: 30px;
  Gauche: 50%;
  rembourrage: 8px;
  Position: absolue;
  Transform: Translatey (-100%);
  transition: transformer 0,3 s;
}

.Skip-to-content-link: focus {
  Transform: Translatey (0%);
}

Cela masquera notre lien jusqu'à ce qu'il se concentre puis l'affichera lorsqu'il se concentre.

Maintenant, permettez-moi d'expliquer en détail, en commençant par cette célèbre citation de Miles Davis:

Le temps n'est pas le principal facteur, c'est le seul facteur .

Alors que j'écrivais ceci en Irlande sous la pluie, j'ai pensé aux défis auxquels de nombreux utilisateurs sont confrontés lors de l'utilisation du réseau auquel j'étais habitué. Nous mettons beaucoup d'efforts pour créer une excellente expérience utilisateur sans prendre en compte tous les utilisateurs et comment ils peuvent répondre à leurs besoins. Certes, je n'ai jamais entendu parler de liens avant de terminer le cours de mon Marcy Sutton à Frontend Masters. Depuis l'apprentissage de la puissance et de la simplicité de l'utilisation de liens de saut, j'ai décidé de me rendre mis en mission de sensibiliser - quelles autres plates-formes sont meilleures que CSS-Tricks!

La solution est la réponse à la question, alors quelle est la solution pour aider les utilisateurs de clavier et les lecteurs d'écran à trouver rapidement le contenu de la page? En bref, la solution est le temps . Permettez aux utilisateurs de naviguer vers la partie du site Web qui les intéresse le plus, ce qui leur permet d'économiser un temps précieux.

Prenez le site Web de Sky News à titre d'exemple. Il fournit un bouton "sauter au contenu" qui permet aux utilisateurs de sauter tous les éléments de navigation et de passer directement au contenu principal.

Vous pouvez utiliser le clavier pour naviguer vers le haut de la page pour afficher ce bouton. Ceci est similaire à l'implémentation indiquée ci-dessus. Le lien est toujours dans le document, mais n'est visible que lorsqu'il se concentre.

C'est le type de liens de saut que nous créerons ensemble dans cet article.

Notre exemple de site Web

J'ai construit un exemple de site Web que nous utiliserons pour démontrer les liens de saut.

Le site a de nombreux liens de navigation, mais pour gagner du temps, il n'y a que deux pages: "Accueil" et "Page de blog". Cela suffit pour nous donner une idée de la façon dont les choses fonctionnent.

Déterminer le problème

Voici la navigation que nous utilisons:

Il y a huit éléments de navigation au total, et les utilisateurs de clavier et les lecteurs d'écran doivent d'abord traverser ces éléments pour atteindre le contenu principal en dessous de la navigation.

C'est le problème. La navigation peut ne pas avoir d'importance pour l'utilisateur. Peut-être que les utilisateurs obtiennent des liens directs vers des articles et ils veulent simplement accéder au contenu.

Il s'agit d'un cas d'utilisation parfait pour utiliser les liens de saut.

Créer un lien

Il existe plusieurs façons de créer un lien "Skip to Content". Ce que j'aime faire est un exemple similaire à Sky News, c'est-à-dire cacher le lien jusqu'à ce qu'il se concentre. Cela signifie que nous pouvons mettre le lien en haut ou près du haut de la page, par exemple<header></header> À l'intérieur de l'élément.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Passer au contenu</a>

Ce lien a une classe .skip-link afin que nous puissions le coiffer. href pointe vers https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3 , que nous ajouterons au bas de la page.<main></main> L'ID de l'élément. C'est là que le lien sautera lors du clic.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Passer au contenu</a>

<main></main>

Si nous mettons simplement le lien dans le titre sans le style, c'est ce que nous avons.

Cela n'a pas fière allure, mais la fonctionnalité existe. Essayez de naviguer vers le lien à l'aide du clavier et appuyez sur Entrée lors de la mise au point.

Il est maintenant temps de le rendre magnifique. Nous devons d'abord réparer le positionnement et le montrer uniquement si notre lien de skip est mis au point.

 .skip-link {
  Contexte: # 319795;
  Couleur: #ffff;
  Police-poids: 700;
  Gauche: 50%;
  rembourrage: 4px;
  Position: absolue;
  Transform: Translatey (-100%);
}

.skip-link: focus {
  Transform: Translatey (0%);
}

La magie ici réside dans la propriété transform , qui le cache et l'affiche selon que notre lien de saut obtient une concentration ou non. Rendons-le un peu mieux en le convertissant rapidement sur la propriété transform .

 .skip-link {
  / * Identique qu'avant * /
  transition: transformer 0,3 s;
}

Il va maintenant se convertir à la vue, ce qui le rend un peu meilleur.

Vous devriez maintenant (j'espère) avoir ce que j'ai ci-dessous:

Comme vous pouvez le voir, sautez le lien contourne la navigation et sautez directement vers le<main></main> élément.

Il est normal d'utiliser plusieurs liens!

Actuellement, ce lien ne sert qu'un seul objectif, qui est de sauter le contenu sur notre site Web. Mais nous n'avons pas à nous arrêter là.

Nous pouvons aller plus loin et créer un lien de saut avec plus d'options, comme un moyen de passer au pied de page du site Web. Comme vous pouvez l'imaginer, cela est très similaire à ce que nous avons fait.

Rendons la page de blog de l'exemple de site Web à utiliser en utilisant plusieurs liens de saut. Les blogs utilisent généralement l'Ajax et d'autres articles sont chargés lorsqu'ils atteignent le bas de la page. Cela rend difficile d'atteindre le pied de page du site Web. C'est le problème que nous voulons résoudre.

Ajoutons donc un deuxième lien qui contourne toutes les activités de mise à jour et saute l'utilisateur directement aux https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf sur la page.

<div>
  Passez au <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">contenu</a> ou <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">au pied de page</a>
</div>

Nous devons également modifier un peu notre CSS et utiliser :focus-within .

 .skip-link {
  Transform: Translatey (-100%);
}

.skip-link: focus-within {
  Transform: Translatey (0%);
}

Cela signifie que si quelque chose dans notre élément .skip-link se concentre, alors nous l'afficherons. Malheureusement, ni Internet Explorer ni Opera Mini ne prend en charge focus-within , mais il a une très bonne couverture et peut utiliser Polyfill.

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

La dernière chose que nous devons faire est de nous assurer que nous avons un ID sur notre élément de pied de page afin que le lien ait quelque chose à sauter.

<footer id="footer"></footer>

C'est ce que cela nous apporte:

Si nous voulons aller plus loin (j'encourage cela), nous pouvons styliser chaque lien différemment afin que l'utilisateur puisse différencier les deux. Les deux liens de cet exemple sont du blanc pur, ce qui est très efficace pour un seul bouton qui effectue une seule opération, mais il est plus clair que nous avons affaire aux deux liens s'ils sont rendus différemment.

Passer à la conclusion

Utilisez-vous des liens Skip sur votre site Web? Ou, sinon, cela vous convainc d'en utiliser un? J'espère qu'il est clair que Sauter les liens est une excellente valeur ajoutée en ce qui concerne l'accessibilité du site Web. Bien qu'il ne s'agisse pas d'une panacée pour résoudre tous les problèmes d'accessibilité, il résout certains cas d'utilisation, créant ainsi une expérience utilisateur plus complète.

Voici quelques sites Web bien connus qui utilisent cette technologie ou des technologies similaires:

• Amazone
• Chase Bank
• Google (pas sauter les liens, mais les liens qui fournissent des commentaires d'accessibilité)
• Cible
• New York Times
• Zillow

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!