Quatre points clés doivent être suivis lors de la construction d'un menu de navigation convivial: Tout d'abord, utilisez des balises HTML sémantiques, telles que l'emballage de la zone de navigation avec

Ok, l'accessibilité du menu de navigation du site Web est en effet un problème clé. Beaucoup de gens ont tendance à ignorer ce point, mais en fait, cela affecte directement l'expérience utilisateur de certains utilisateurs, en particulier les utilisateurs contre visuellement ou ceux qui comptent sur les opérations du clavier. Un menu vraiment facile à utiliser est non seulement magnifique et a une interaction fluide, mais plus important encore, il peut permettre à chacun de comprendre et de l'utiliser en douceur.

Commen?ons par plusieurs perspectives communes et parlons de la fa?on de construire un menu de navigation plus convivial.

1. Utilisez des balises HTML sémantiques

C'est le plus fondamental et le plus facile à ignorer. Beaucoup de gens utilisent un tas de divs ou de portées pour construire des structures de menu, ce qui est très hostile aux lecteurs.

La bonne fa?on de le faire est:

<li> Enveloppez la zone de navigation entière avec <nav></nav> et dites une technologie d'assistance "Ceci est un morceau de navigation" <li> Les éléments de menu sont organisés avec des listes non ordonnées <ul></ul> et <li> <li> Chaque lien doit utiliser <a></a> ou élément avec role="link" pour s'assurer que la mise au point du clavier peut atteindre

Par exemple:

 <Nav>
  <ul>
    <li> <a href = "/"> home </a> </li>
    <li> <a href = "/ about"> à propos de nous </a> </li>
    <li> <a href = "/ contact"> Contactez-nous </a> </li>
  </ul>
</ nav>

Après cela, le lecteur d'écran peut reconna?tre correctement qu'il s'agit d'un menu de navigation et lire le contenu de chaque option.

2. Assurez-vous que le clavier est accessible

Certains sites Web ne considèrent que l'expérience des utilisateurs de la souris et ignorent ceux qui comptent entièrement sur les opérations de clavier. Par exemple, le menu déroulant ne s'affiche que lorsque la souris est en plane, mais l'utilisateur du clavier ne peut pas le déclencher du tout.

Les solutions comprennent:

<li> Le menu déroulant doit être en mesure de se concentrer sur l'élément de menu parent via la touche Tab, appuyez sur Entrée ou Ferrow Keys pour se développer<li> Le sous-menu élargi doit également être en mesure de naviguer dans l'onglet ou les touches fléchées.<li> Lorsque le menu est fermé ou caché, assurez-vous que l'accent est de retour au bon endroit pour éviter la "perte de mise au point"

Une fa?on courante de l'implémenter est d'ajouter tabindex à un élément de menu et d'écouter les événements du clavier. Par exemple, après avoir cliqué sur un élément avec un sous-menu, l'accent sera automatiquement déplacé vers le premier enfant.

3. Utilisez des attributs Aria pour améliorer l'accessibilité

Bien que les étiquettes sémantiques puissent déjà gérer la plupart des situations, dans certaines interactions complexes (téléchargement des menus, panneaux pliés), Aria doit être utilisée pour compléter les informations.

Les propriétés ARIA couramment utilisées sont:

<li> aria-haspopup="true" : signifie que l'élément actuel a un sous-menu<li> aria-expanded : Utilisé pour les boutons ou les éléments de menu, indiquant s'il est actuellement étendu<li> aria-label / aria-labelledby : fournit des informations de description pour les éléments sans texte visible<li> role="menu" / role="menuitem" : applicable pour simuler le comportement du menu natif lors de la personnalisation de la structure du menu (notez que cela nécessite une prise en charge du clavier supplémentaire)

Par exemple, s'il y a un bouton de menu de hamburger, il est préférable d'ajouter:

 <Button aria-exided = "false" aria-label = "ouvrir le menu de navigation">
  ?
</ bouton>

De cette fa?on, le lecteur d'écran conna?t la fonction de ce bouton et peut inviter l'utilisateur si le menu a été élargi en fonction de l'état.

4. Petits détails sur la conception visuelle et interactive

En plus du niveau de code, la conception visuelle et d'interaction peut également affecter l'accessibilité:

<li> Contraste des couleurs : la couleur du lien devrait avoir un contraste suffisant avec l'arrière-plan, afin que les utilisateurs aux yeux faibles puissent voir clairement <li> Style de mise au point : la bo?te de mise au point du navigateur par défaut est parfois supprimée par le concepteur, mais cela fera perdre les utilisateurs de clavier. Il est recommandé de conserver ou de personnaliser des instructions de mise au point claires <li> Contr?le d'animation : le temps d'animation de l'expansion et de la fermeture du menu ne doit pas être trop long, sinon cela interférera avec le rythme du lecteur d'écran; Il est également préférable de fournir l'option "Réduire l'animation". <li> Adaptation réactive : les menus mobiles peuvent nécessiter une réorganisation, comme transformer les menus à plusieurs niveaux en pages en couches au lieu de plier et de développer

Ce sont des problèmes avec la conception de l'interface utilisateur, mais ils font en fait partie de l'accessibilité.

Fondamentalement, c'est tout. Pour rendre un menu de navigation accessible, il n'y a en fait pas besoin d'outils trop complexes. La clé est de comprendre les besoins réels de l'utilisateur, puis de considérer les utilisateurs avec des capacités différentes en termes de structure, d'interaction et de performances. De nombreux problèmes ne sont pas des problèmes techniques, mais des problèmes de sensibilisation.

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!