26 |
27 |

Présentation

28 |

AccessTooltip est une fonction JavaScript permettant de rendre les title accessibles au clavier

29 |

Comment ça fonctionne ?

30 |

La fonction génère une infobulle accesssible au clavier via la touche de tabulation pour tous les éléments passés en paramètre, possédant un title.

31 |

Démonstration

32 |

Liens

33 |

Pour en savoir plus : AccessTooltip

34 |

Contribuer !

35 |

Abbréviation

36 |

Le RGAA

37 |

Bouton

38 |

39 |

Image

40 |

Access42.net

41 |

Champ de formulaire

42 |
43 | 44 |
45 |
46 |
47 |

Comment l'utiliser

48 |

Insérer la fonction comme dernier élément de body

49 |
 50 | 
 51 | <script type="text/javascript" src="AccessTooltip.js"></script>
 52 | 
 53 | 
54 |

Créer une classe CSS pour styler le tooltip (attention, la position "absolute" est requise) :

55 |
 56 | 
 57 | Ctooltip{
 58 | 	position:absolute;
 59 | 	background-color:#FFFFF0;
 60 | 	border:1px solid gray;
 61 | 	border-radius:3px;
 62 | 	padding:3px;
 63 | 	box-shadow:2px 2px 2px #000;
 64 | 	color:#000;
 65 | 	font-size:80%;
 66 | }
 67 | 
 68 | 
69 |

Insérer l'appel de fonction comme dernier élément de body et utiliser les paramètres pour la personnaliser :

70 |
 71 | 
 72 | /*
 73 | ** Paramètres *** 
 74 | 	- requis objs : liste des sélecteurs CSS correspondant aux éléments à traiter.
 75 | 	- requis tooltipClassName : classe CSS utilisée pour la bulle d'aide
 76 | 	- requis toolTipBetween : décalage vertical, en pixel, entre la bulle d'aide et l'élément selectionné
 77 | 	- optionnel tooltipUp : false pour faire apparaitre la bulle d'aide en dessous de l'élément selectionné, true pour la faire apparaitre au dessus
 78 | 	- optionnel mouse : true pour remplacer, à la souris, le title par la bulle d'aide
 79 | 	- optionnel tempDelay : temps d'affichage de la bulle d'aide en millisecondes (0 pour qu'elle reste visible jusqu'à la perte de focus)
 80 | 	- optionnel useAriaDP : true pour utiliser le design pattern ARIA tooltip
 81 | 	- optionnel useEscClose : true pour autoriser la fermeture de l'infobulle via la touche ESC (true par défaut avec le DP ARIA tooltip)
 82 | */
 83 | <script type="text/javascript">
 84 | AccessTooltip({
 85 | 	objs : 'a, button, input, textarea, select',
 86 | 	tooltipClassName : 'access-tooltip',
 87 | 	toolTipBetween : 5,
 88 | 	toolTipUp : false,
 89 | 	mouse : true,
 90 | 	tempDelay : 4000,
 91 | 	useAriaDP : false,
 92 | 	useEscClose : true
 93 | });
 94 | </script>
 95 | 
 96 | 
97 |
98 |