Chaque utilisateur possède son propre mode de navigation. Certains utilisent le clavier, d'autres, la souris. Par exemple, cela signifie qu'il faut, dans le cas d'un drag-and-drop, activer le clic ou la pression sur une touche pour rendre votre script accessible. Un gestionnaire d'événement onclick est lancé par le clic de la souris mais aussi par la touche Entrée de votre clavier. Dans le même ordre d'idée, vous devez doubler vos onmouseover par des onfocus ainsi que les onmouseout par des onblur afin que chacun puisse disposer des méthodes affectées aux éléments, et ce, quelquesoit son mode de navigation. Pour illustrer cette notion, prenons le cas d'un rollover. Dans l'exemple suivant, que vous naviguiez au clavier ou à la souris, cela fonctionne.
<a href="#" id="test">lien test</a>
<script type="text/javascript"><!--
// Rollover sur un élément
function fnRollOver(sId, sCSS, sOverCSS)
{
// Test de la méthode utilisée
if(!document.getElementById) return;
// Identification de l'élément
var oElem = document.getElementById(sId);
if(!oElem) return;
// Définition de la classe CSS d'origine
oElem.className = sCSS;
// Comportement au survol ou à la prise du focus
oElem.onmouseover = function() { oElem.className = sOverCSS; };
oElem.onfocus = function() { oElem.className = sOverCSS; };
// Retour à l'état d'origine
oElem.onmouseout = function() { oElem.className = sCSS; };
oElem.onblur = function() { oElem.className = sCSS; };
}
// Lancement de la fonction fnRollOver()
fnRollOver('test', 'CSS', 'OverCSS');
//--></script>