1484 sujets

Web Mobile et responsive web design

Bonjour
Ou en est on dans le support de la navigation par clavier par les navigateurs de ses deux fonctionnalités ( tabindex et acceskey ) en 2016 : utilisable ou non ?

Cliquer avec la souris sur un endroit de la page html déplace le curseur et donc donne le focus à l'élément situé en dessous du curseur . En est il de même avec le clavier , changer par appui sur la touche "tab" pour passer à un élément suivant change t' il aussi ou à la fois le curseur ET le focus .

Merci
Modifié par 75lionel (04 May 2016 - 21:55)
Administrateur
Bonjour,

le curseur est le focus (par défaut entouré d'un outline, ce pointillé discret). Enfin dans un input de type texte ou textarea ou équivalent. Sur un lien ou un bouton, c'est l'élément avec l'outline qui a le focus et vice-versa.
Attention Safari et Chrome ne tabulent par défaut pas sur les liens, contrairement à Firefox et IE. Ca se change dans les options...

L'attribut tabindex : à ne jamais utiliser sauf si tu crées une application très compliquée, et encore... Il vaut mieux placer les liens et boutons et éléments de formulaires dans le code HTML dans le même ordre qu'ils doivent être tabulés (parcourus).
Un des rares contre-exemples est ce formulaire de réponse dans lequel je suis en train de taper : une pression sur Tab puis Espace et j'aurai validé ma réponse sans passer par les boutons de mise en forme et Joindre une image.

Accesskey : je te laisse lire http://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html ça a 10 ans et c'est encore plus vrai avec l'apparition des landmark roles : role="navigation", role="contentinfo", etc qui appliqués de préférence sur les éléments HTML5 correspondants (nav, footer, main, header, aside, etc) remplacent les liens d'évitement / d'accès rapide et enlèvent l'intérêt d'accesskey.

Un nouvel attribut HTML5 est capable de donner le focus à un élément dès le chargement de la page : autofocus. Il remplace de vilaines astuces JS mais il y a très très peu de cas où c'est une bonne idée idée de l'utiliser : la page d'accueil d'un moteur de recherche, la page de "tracking"/suivi de colis genre UPS et c'est tout Smiley smile