Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Close menu when user tabs out of it.

Français

Pour le tester, appuyez sur le premier bouton bleu (Men’s Fashion) et ouvrez-le avec la touche Entrée, puis appuyez sur la Tab jusqu'à le dernier link, puis appuyez de nouveau sur la touche. Le menu se ferme et l'onglet passe au menu suivant "Women’s fashion". De plus, le code ne se déclenchera pas sur SHIFT+TAB, il ne se fermera donc pas de manière inattendue si l'utilisateur revient en arrière du dernier élément de la liste.

Il y a aussi un auditeur sur le premier lien. Quand l'utilisateur recule à l'aide de la touche shift (SHIFT+TAB), il le ferme lorsqu'il quitte le lien.

English

To test it, press the first blue button (Men's Fashion) and open it with the Enter key, then press the Tab to the last link, then press the key again. The menu closes and the tab focus moves to the next menu "Women's fashion". In addition, the code will not be triggered on SHIFT + TAB on that link, so it will not close unexpectedly if the user goes back from the last item in the list.

There is also a listener on the first link. When the user moves backwards (SHIFT + TAB), it closes when focus leaves the link.


Code

<script>
function tabOff(id) {

if (!event.shiftKey && event.keyCode == 9) {
$(id).collapse('hide');
}
}
function shiftTabOff(id) {
if (event.shiftKey && event.keyCode == 9) {
$(id).collapse('hide');
} }
</script>

CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA