nav-index |
Index de navigation |
CSS3 |
|
Syntaxe
nav-index: auto|nombre|initial|inherit;
|
Paramètres
Paramètre |
Description |
nombre |
Ce paramètre permet d'indiquer l'ordre de navigation de l'élément. Le premier à la valeur 1. |
auto |
Ce paramètre permet d'indiquer que le navigateur détermine automatiquement l'ordre de navigation. C'est la valeur par défaut. |
inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer l'ordre de navigation séquentiel pour un élément (l'ordre de tabulation).
Remarques
- Définition et rôle : La propriété nav-index permet de spécifier la position d'un élément dans l'ordre de navigation. Cela est particulièrement utile
dans des interfaces complexes où les utilisateurs interagissent principalement au clavier, comme dans des formulaires ou des applications télévisées.
- Valeurs possibles : nav-index accepte des valeurs numériques entières (positives ou négatives). Les éléments avec un index plus bas sont visités en
premier, tandis que ceux avec un index plus élevé sont visités ensuite. Une valeur négative peut exclure un élément de l'ordre de navigation.
- Différence avec tabindex : Bien qu'elle partage des similarités avec la propriété HTML tabindex, nav-index est spécifiquement définie dans le contexte
de la navigation spatiale CSS, ciblant principalement les appareils ou interfaces utilisant des touches directionnelles (flèches haut, bas, gauche, droite).
- Prise en charge limitée : Bien que définie dans le module CSS Basic User Interface Level 3, la propriété nav-index n'est pas largement prise en charge
par les navigateurs modernes. Les développeurs doivent vérifier sa compatibilité ou utiliser des solutions alternatives pour obtenir un comportement similaire.
- Amélioration de l'accessibilité : En organisant l'ordre de navigation à l'aide de nav-index, il devient plus facile pour les utilisateurs naviguant au clavier
d'interagir avec les éléments de l'interface dans un ordre logique, améliorant ainsi l'expérience utilisateur pour les personnes handicapées.
- Impact sur la navigation spatiale : La propriété est particulièrement pertinente pour les dispositifs utilisant une navigation spatiale (par exemple,
téléviseurs connectés ou consoles de jeux). En combinant nav-index avec d'autres propriétés comme nav-up, nav-down, nav-left et nav-right, il est possible
de créer une navigation intuitive.
- Exclusion d'éléments : Les éléments avec une valeur de nav-index négative sont exclus de la navigation. Cela peut être utile pour masquer certains éléments
non interactifs ou secondaires de l'ordre de navigation principal, comme des icônes ou des éléments purement décoratifs.
- Organisation logique : En affectant des valeurs spécifiques de nav-index aux éléments d'une interface, les développeurs peuvent s'assurer que les éléments
importants (comme les boutons principaux ou les champs obligatoires) sont atteints en priorité, tandis que les éléments secondaires apparaissent plus tard dans l'ordre de navigation.
- Utilisation dans des grilles ou des tableaux : Dans des interfaces complexes comme des grilles ou des tableaux, nav-index peut être utilisé pour définir un ordre
de navigation cohérent suivant la disposition visuelle de l'écran, facilitant ainsi l'utilisation.
- Fallbacks avec JavaScript : En raison de la compatibilité limitée, les développeurs peuvent utiliser JavaScript
pour simuler le comportement de nav-index, par exemple en manipulant dynamiquement l'attribut HTML tabindex ou en gérant manuellement les événements de clavier.
Dernière mise à jour : Dimanche, le 20 décembre 2015