Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Définition et code xHTML
Des
accesskey sont des raccourcis clavier.
Pour les mettre en place, il suffit de mettre l'attribut
accesskey à une balise
a, input, textaera, label, button ou encore dans
legend (pour les
fieldset).
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <a href="page1.htm" accesskey="1">page 1</a>
<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" accesskey="2" /><br />
Message : <br /><textarea name="textarea" cols="21" rows="5" accesskey="3"></textarea>
</p>
<fieldset>
<legend accesskey="4">formulaire</legend>
<label accesskey="5" for="email">Email :</label> <input name="email" id="email" type="text" />
</fieldset>
<p><input name="button" type="button" accesskey="G" value="envoyer"></p>
</form>
|
Attention cependant, à ne pas mettre n'importe quelle touche ! Chaque navigateur a ses raccourcis clavier, prenonspar exemple les cas les plus flagrants : les touches "
F", "
E", "
A", "
V", "
O", "
?" servent à la barre de menu (
Fichier,
Édition...), les
accesskey prendront le dessus, d'accord, mais ça empêchera les utilisateurs déficients d'accéder au menu. Il faudra donc vous rabattre sur les touches numérotées ou alors, à certains symboles...
Les touches utilisées généralement
Voici les chiffres qui sont généralement utilisés pour les
accesskey :
1 - Page d'accueil
2 - Page de news
3 - Plan du site
4 - Formulaire de recherche
5 - FAQ
6 - Page d'aide à la navigation
7 - Contact
8 - Copyright
9 - Livre d'or
0 - Liste des touches des
accesskey
Les touches d'activation
Selon le navigateur, la combinaison de touche change ; en voici les principales :
- Internet Explorer : Alt + raccourci et ensuite Entrée ;
- autres navigateurs : Alt + raccourci.
Comme dans beaucoup de domaines, IE a un train de retard : il faut que la balise qui contient un accesskey soit visible !
Pour ceux qui veulent faire un menu invisible avec tous les
accesskey, j'ai une petite astuce :
font-size:1px; 
Définition et code xHTML
Les
tabindex permettent de naviguer dans un ordre voulu entre des liens ou encore des formulaires.
Ces raccourcis fonctionnent dans l'ordre croissant et n'ont pas vraiment de limite.
En xHTML, il faut mettre l'attribut
tabindex (c'est pas dur, hein
) à une balise
a, input, textaera, select, button.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <a href="page1.htm" tabindex="2">Aller sur la page 1</a>
<form action="#" method="post">
<p>Pseudo : <input name="texte" type="text" tabindex="2" /><br />
Message : <br /><textarea name="textarea" cols="21" rows="5" tabindex="3" ></textarea><br />
<select name="menu deroulant" tabindex="4">
<option>choix 1</option>
<option>choix 2</option>
<option>choix 3</option>
</select><br />
<input name="button" type="button" tabindex="5"></p>
</form>
|
Dans l'ordre de l'exemple, on mettra d'abord un message dans le formulaire, ensuite on sera sur le lien vers la page 1, on reviendra mettre un message, on pourra choisir une option et enfin on sera placés sur le bouton d'envoi.
La touche d'activation
La touche
TAB, (à la gauche de A pour un clavier azerty, ou Q pour un clavier qwerty).
Si vous voulez aller dans l'ordre inverse, il suffit de garder la touche MAJ (ou Shift pour certains) enfoncée et d'appuyer sur TAB.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
, quelques attributs xhtml sont là. Pas très connus mais super-utiles, nous allons en voir quelques-uns. 
442 Zéros connectés |
8 requêtes |
0.0469s (0.0342s)
