Une plongée profonde sur le saut de contenu-tutoriel CSS-php.cn

Une plongée profonde sur le saut de contenu

De nombreux utilisateurs d'ordinateurs utilisent leur souris pour parcourir les pages Web, mais de nombreuses personnes comptent sur les opérations de clavier. En théorie, l'utilisation du clavier pour parcourir les pages Web n'est pas un problème - appuyez sur la touche pour vous déplacer entre les éléments ciblés, puis appuyez sur la touche Entrée pour l'activer, c'est simple et facile à faire! Cependant, de nombreux sites (sinon la plupart) ont un menu de lien en haut, et parfois plusieurs pressions de touches sont nécessaires pour atteindre le contenu cible. Par exemple, l'un des plus grands sites de nouvelles de Suisse, la page d'accueil de 20min, peut nécessiter près de 40 pressions de touches pour lire les gros titres - ce n'est pas la meilleure expérience utilisateur.

Ainsi, pour que les utilisateurs de clavier puissent vraiment utiliser votre site Web au lieu de s'ennuyer et de partir, vous devez faire un peu de travail dans les coulisses pour le rendre plus rapide et plus facile à sauter directement au contenu principal. Vous pouvez trouver une variété d'astuces dispersées sur le Web (y compris dans CSS-Tricks), mais la plupart ignorent certaines astuces, et beaucoup recommandent d'utiliser du code obsolète ou obsolète. Donc, dans cet article, je vais plonger dans le contenu de sauter et couvrir tout d'une manière amicale en 2021.

Deux types d'utilisateurs de clavier

Bien que les gens utilisent différents types de claviers ou de hauts de commutation équivalents pour la navigation, du point de vue du codage, nous n'avons qu'à considérer deux ensembles d'utilisateurs:

Les utilisateurs qui utilisent un clavier pour lire le contenu d'écran conjointement avec un lecteur d'écran tel que NVDA ou JAWS sur PC, ou VoiceOver sur Mac. Ces appareils sont généralement utilisés par des personnes souffrant de troubles visuels graves.
Tous les autres utilisateurs de clavier.

Notre technologie de contenu Skip doit répondre aux besoins des deux groupes d'utilisateurs en même temps sans entraver les utilisateurs de la souris. Nous utiliserons deux techniques complémentaires pour obtenir les meilleurs résultats: les points de repère et les liens de saut .

Découvrez un exemple de base

J'ai créé un exemple de site Web appelé Style Magic pour illustrer la technologie que nous allons couvrir. Nous allons commencer par une bonne condition de travail pour l'utilisateur de la souris, mais c'est un peu des tracas pour l'utilisateur qui utilise le clavier. Vous pouvez trouver les sites Web de base sur Codepen ainsi que les versions de chaque technologie, et comme le test de la navigation par clavier sur Codepen est un peu délicat, vous pouvez également trouver la version autonome ici.

Essayez de naviguer dans cet exemple à l'aide de la touche Tab . (Plus facile sur les pages autonomes; la clé de onglet se déplace entre les liens, la clé de l'onglet Shift recule.) Vous constaterez que ce n'est pas mal, mais c'est juste parce qu'il n'y a pas beaucoup d'éléments de menu.

Si vous avez du temps et utilisez un système Windows, je vous recommande également de télécharger une copie gratuite de NVDA Screen Reader et d'essayer tous les exemples avec et de vous référer à l'aperçu de WebAaim pour comment l'utiliser. La plupart des utilisateurs de Mac ont déjà accès à VoiceOver Screen Reader, et Webaim a une excellente introduction à la façon de l'utiliser.

Ajouter un point de repère

Une chose que le logiciel de lecture d'écran peut faire est d'afficher une liste de points de repère qu'ils trouvent sur une page Web. Les repères représentent des zones importantes sur la page, et les utilisateurs peuvent appeler la liste et sauter directement à l'un des points de repère.

Si vous utilisez NVDA avec un clavier complet, appuyez sur INS F7 pour afficher la "liste des éléments" et appuyez sur Alt D pour afficher le point de repère. (Vous pouvez trouver une liste similaire sur la voix off à l'aide du rotor du projet Web.) Cependant, si vous faites cela sur l'exemple de site, vous ne verrez qu'une liste vide inutile.

Résolvons d'abord ce problème.

L'ajout de points de repère est très facile , si vous utilisez HTML5, vous les avez peut-être utilisés sur votre site Web sans le réaliser parce qu'ils sont directement liés aux éléments sémantiques HTML5 (<h1></h1> arriver<h6></h6> ,<main></main> ,etc).

Ce qui suit est un exemple de la modification avant et après HTML utilisé pour générer la section Titre du site:

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Magie de style</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Maison</a>

      </div>
  </div>
</div>

Copier après la connexion

Devenir

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Magie de style</a><nav aria-label="Main menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Maison</a>

    </nav></header>

Copier après la connexion

La classe utilisée reste la même, nous n'avons donc pas besoin de modifier le CSS.

Voici une liste complète des modifications que nous devons apporter dans l'exemple de site:

Le titre est indiqué en haut de la page<div> Maintenant c'est un<code><header></header> élément.
Inclusif<div> Maintenant c'est un<code><header></header> élément.
Deux menus<div> A été<code><nav></nav> Remplacement des éléments.
Deux nouveaux<nav></nav> Les éléments ont obtenu un attribut aria-label qui les décrit: le menu en haut de la page est "Menu principal" et le menu en bas de la page est "Menu des utilitaires".
Contient le contenu principal de la page Maintenant c'est un<main></main> élément.
Représente le pied de page en bas de la page<div> Maintenant c'est un<code><footer></footer> élément. Vous pouvez afficher le HTML complet mis à jour sur Codepen. Essayons à nouveau l'astuce de la liste historique dans NVDA ( IS F7 puis Alt D - c'est un lien vers la page autonome que vous pouvez tester vous-même): merveilleux! Nous avons maintenant le point de repère de la bannière (carte pour<header></header> Élément), menu principal; navigation (carte en haut<nav></nav> élément et afficher notre aria-label ), contenu principal (carte à<main></main> ) et les informations de contenu (carte à<footer></footer> ). Dans cette boîte de dialogue, je peux utiliser la touche Tab et la touche de curseur pour sélectionner le point de repère principal et sauter directement sur le contenu de la page, ou mieux encore, je peux appuyer sur la touche D tout en parcourant la page pour passer directement d'un caractère monument à l'autre. Il est plus facile pour les utilisateurs de lecteurs d'écran JAWS - ils appuyent simplement sur la touche Q lors de la navigation pour sauter directement vers le point de repère principal. En tant qu'avantage supplémentaire, l'utilisation d'éléments sémantiques peut également aider les moteurs de recherche à mieux comprendre et indexer votre contenu. C'est un bon plus pour rendre le site Web plus accessible. Ajouter un lien de saut J'espère que vous êtes assis là en ce moment en pensant que «le travail est fait». Eh bien, j'ai peur qu'il y ait toujours un "mais" à considérer. En 2011, Google a mené une étude sur la recherche sur les pages Web à l'aide de CTRL F et a constaté qu'un étonnant 90% des personnes ne savaient pas qu'il existait ou ne l'avait jamais utilisé. En ce qui concerne les points de repère, les utilisateurs qui utilisent des lecteurs d'écran se comportent à peu près les mêmes - un grand pourcentage d'entre eux n'utilisent pas du tout cette fonctionnalité, même si elle est très utile. Par conséquent, nous ajouterons un lien de saut à notre site Web pour aider les deux groupes d'utilisateurs et tous les utilisateurs de clavier qui n'utilisent pas de lecteurs d'écran. Les exigences de base pour un bon saut de lien sont: Il doit être visible pour tous les utilisateurs de clavier, y compris les utilisateurs du lecteur d'écran, en cas de besoin. Il devrait fournir à l'utilisateur du clavier suffisamment d'informations pour expliquer son rôle. Il doit fonctionner sur le navigateur actuel le plus large possible. Il ne doit pas interférer avec la navigation de l'utilisateur de la souris. Étape 1: Améliorez l'apparence de mise au point du clavier Tout d'abord, nous améliorerons la visibilité de la mise au point du clavier sur tout le site Web. Vous pouvez considérer la mise au point du clavier comme un équivalent de la position du curseur lors de l'édition de texte dans un traitement de texte. Lorsque vous utilisez la touche Tab pour naviguer, la mise au point du clavier se déplace entre les liens (ou les contrôles de formulaire). Les derniers navigateurs Web font un assez bon travail pour montrer où se trouve le clavier, mais peut toujours bénéficier de l'aide. Il existe de nombreuses façons créatives de coiffer l'anneau de mise au point, bien que notre objectif soit de le faire ressortir plus que tout. Nous pouvons utiliser :focus Pseudo-Class pour le paramètre de style (et il est préférable d'appliquer le même style à :hover également, ce que nous avons fait sur l'exemple de site - codepen, site en direct). C'est ce que nous pouvons au moins faire, même si cela va généralement plus loin et inverser la couleur du lien sur :focus sur toute la page. Voici quelques CSS pour notre :focus State (une copie du code que nous avons prévu :hover ): a: focus {/ * règles générales pour toute la page * / Border-Bottom-Color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } .Menu-droite A: Focus, . Branding A: Focus { / * Inverser la couleur du lien dans le titre et le pied de page * / / Color d'arrière-plan: blanc; Couleur: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } Copier après la connexion Étape 2: Ajouter HTML et CSS Le changement final consiste à ajouter le lien sauté lui-même à HTML et CSS. Il se compose de deux parties: un déclencheur (lien) et une cible (point de repère). C'est le HTML que je recommande pour les déclencheurs, c'est au début de la page<header></header> À l'intérieur de l'élément: <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">Passez au contenu principal.</a> Copier après la connexion Ceci est le HTML de la cible, qui est placé directement dans<main></main> Avant le début du contenu: <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">Début du contenu principal.</a> <main></main> Copier après la connexion Voici comment fonctionne HTML: Le contacteur Skip Link utilise un fragment de page standard (href = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target") à la cible de liaison skip, qui fait référence à la cible (<a></a> ) attribut id. Le suivi du lien déplacera la mise au point du clavier du déclencheur vers la cible. Nous sommes liés à une ancre (<a></a> ) élément, pas directement à<main></main> Il y a deux raisons pour lesquelles un élément ajoute un attribut ID. Premièrement, il évite tout problème que la mise au point du clavier ne peut pas se déplacer correctement (ce qui peut être un problème dans certains navigateurs); Le texte des deux liens est descriptif afin d'expliquer clairement ce qui se passe à l'utilisateur. Nous avons maintenant un lien de saut fonctionnel, mais il y a un problème: tout le monde peut le voir. Nous utiliserons CSS pour le masquer par défaut, ce qui peut le faire ne pas entraver l'utilisateur de la souris, puis il n'apparaîtra que lorsqu'il recevra la mise au point du clavier. Il existe de nombreuses façons de le faire, la plupart d'entre elles le font, mais il y a de mauvaises façons d'éviter: Devrait: Utilisez clip-path pour rendre le lien invisible, ou utiliser transform: translate ou position: absolute pour le positionner hors écran. Ne devrait pas: utiliser display: none , visibility: hidden , hidden , ou définir la largeur ou la hauteur du lien sauté à zéro. Tout cela rendra votre lien de saut indisponible à un ou aux deux types d'utilisateurs de clavier. Ne devrait pas: utiliser clip car il est obsolète. Voici le code que je recommande de masquer ces deux liens. -webkit- de l'utilisation clip-path et de son préfixe peut couvrir 96,84% des utilisateurs au moment de la rédaction, ce qui (à mon avis) est OK pour la plupart des sites Web et des cas d'utilisation. De nombreuses autres technologies sont disponibles si votre cas d'utilisation l'exige, qui est détaillé sur WebAaim. .Text-Assistive { -Webkit-Clip-path: Polygon (0 0, 0 0, 0 0, 0 0); Clip Path: polygone (0 0, 0 0, 0 0, 0 0); Dimensionnement en boîte: Border-Box; Position: absolue; marge: 0; rembourrage: 0; } Copier après la connexion Pour afficher les liens lorsqu'ils se concentrent, je recommande d'utiliser la version, la couleur et la taille de ce CSS pour correspondre à votre marque: .Text-Assistive.display-at-top-on-focus { en haut: 0; à gauche: 0; Largeur: 100%; } .Text-Assistive.display-at-top-on-focus: focus { -Webkit-Clip-path: Aucun; Clip Path: Aucun; Z-Index: 999; hauteur: 80px; hauteur de ligne: 80px; Contexte: blanc; taille de police: 1.2rem; Décoration du texte: aucune; Couleur: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; Texte-aligne: Centre; } https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-lik-target:focus { Contexte: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B084367; Couleur: blanc; } Copier après la connexion Cela fournit un affichage très visible des déclencheurs et des cibles en haut de la page, où l'utilisateur s'attend à voir le clavier se concentrer directement après le chargement de la page. Lorsque vous suivez le lien, la couleur est également modifiée pour fournir des commentaires clairs que quelque chose s'est produit. Vous pouvez modifier le code vous-même sur Codepen (comme indiqué ci-dessous) et le tester avec NVDA sur des pages autonomes. Améliorations supplémentaires Les liens de saut ne sont pas seulement pour Noël votre menu principal, ils sont utiles chaque fois que votre page contient une longue liste de liens. En fait, ce codePen démontre un bon moyen d'utiliser des liens de saut dans le contenu de la page (voici une page autonome), en utilisant transform: translateY() dans CSS pour masquer et afficher les déclencheurs et les cibles. Si vous êtes dans une position "chanceuse" qui doit prendre en charge les navigateurs plus âgés, voici un conseil pour cela (page indépendante ici). Vérifions-le! Enfin, voici quelques courtes démonstrations vidéo sur le fonctionnement des liens de saut pour nos deux catégories d'utilisateurs de clavier. Voici comment les liens de saut sont effectués lors de l'utilisation du lecteur d'écran NVDA: (les vidéos doivent être intégrées ici) Voici ce qui se passe lorsque vous utilisez le clavier pour parcourir à nouveau sans avoir besoin d'un lecteur d'écran: (les vidéos doivent être intégrées ici) Nous avons juste examiné l'approche moderne que je pense pour accéder au lien Skip en 2021. Nous avons emprunté quelques idées à des exemples précédents tout en les mettant à la mise à jour pour convenir à de meilleures pratiques CSS, à l'amélioration de l'interface utilisateur des utilisateurs de clavier et à l'amélioration de l'expérience des utilisateurs à l'aide des lecteurs d'écran (grâce à l'approche HTML mise à jour).