Le HTML dynamique et l’accessibilité

Le HTML dynamique (DHTML) est généralement une combinaison de CSS et de JavaScript. Le DHTML permet aux développeurs d’afficher, de masquer ou de déplacer des informations basées sur des entrées de l’utilisateur ou des commandes pré-programmées. Beaucoup d’exemples de cette section ont utilisé le DHTML. La plupart des menus déroulants trouvés sur des pages Web utilisent aussi le DHTML. Parce que la plupart de ces éléments DHTML sont modifiés sur la base des entrées souris, ils sont généralement inaccessibles aux utilisateurs qui n’utilisent pas de souris. Quand on utilise le DHTML, deux points doivent être évalués pour déterminer son impact sur l’accessibilité :

1. Est-ce que l’événement utilisé pour déclencher un changement est indépendant des périphériques ? Si la souris est nécessaire, alors ce n’est pas pleinement accessible.
2. Est-ce que le contenu ou la fonctionnalité DHTML est accessible ? Si les technologies d’assistance ne peuvent pas accéder de manière adéquate au contenu ou à la fonctionnalité DHTML déclenchée, alors ce n’est pas pleinement accessible.

Utiliser document.write

Des informations dynamiques et en évolution constante sont écrites ci-après dans la page en utilisant la commande JavaScript document.write. Dans la plupart des cas, le contenu qui est écrit dans une page par du JavaScript est accessible aux technologies d’assistance. Cependant, si le contenu dynamique est en constante évolution ou interfére avec la navigation ou une fonctionnalité du navigateur, cela peut créer des problèmes d’accessibilité.

Fenêtres pop-up

Les fenêtres pop-up sont un cas unique dans la thématique accessibilité. Tout d’abord, la plupart des experts d’ergonomie sont contre l’usage des fenêtres pop-up, sauf dans les cas obligatoires. Si vous devez utiliser des fenêtres pop-up, vous devez savoir qu’elles créent plusieurs problèmes d’accessibilité. Pour un utilisateur voyant, il peut lui être difficile de les remarquer et de naviguer à l’intérieur. Pour quelqu’un qui utilise les technologies d’assistance, la nouvelle fenêtre peut être ennuyeuse et créer de la confusion car le comportement par défaut du lien a été modifié. L’implémentation du JavaScript peut rendre difficile, voire impossible, de la redimensionner, ce qui est très gênant pour une personne qui utilise un agrandisseur d’écran. Pour quelqu’un qui est aveugle, il n’y a généralement pas d’indication qu’il est entrain de naviguer dans une nouvelle fenêtre. Quand l’utilisateur tente de revenir à la page précédente en cliquant sur le bouton retour, il peut être déroutant de constater que cela ne fonctionne pas.

Redirection et rafraîchissement des fenêtres des navigateurs

Quand la page du navigateur affiche soudainement des changements ou des rafraîchissements, la personne qui consulte cette page peut être désorientée ou avoir de la confusion, surtout si cette personne utilise une technologie d’assistance. C’est ce qui arrive avec les redirections de pages quand le contenu de la page a été déplacé ou mis à jour. L’article 508 demande que les utilisateurs gardent le contrôle sur les changements de contenu dans le temps. Ne changez pas automatiquement ou n’actualisez pas la fenêtre du navigateur sans avoir d’abord alerter l’utilisateur que le changement va se produire et en lui donnant la possibilité de désactiver ou de retarder le changement.

Utiliser des CSS valides comme alternative au JavaScript

Comme mentionné précédemment, les CSS sont souvent modifiées par du JavaScript pour créer des pages DHTML changeant dynamiquement. Cependant, avec l’arrivée de la version 2 des CSS, une grande partie des fonctionnalités dynamiques disponibles avec le JavaScript est maintenant inclus dans les spécifications CSS. Ceci permet la construction d’une navigation interactive et dynamique et l’agencement d’éléments sans l’utilisation d’événements JavaScript. Vous pouvez créer des menus déroulants, des images interactives et d’autres fonctionnalités dans les sites Web sans vous soucier des gestionnaires d’événements dépendants de périphériques. Cependant, les nouvelles normes CSS ne sont pas entièrement prises en charge par les navigateurs modernes, à savoir Internet Explorer.

Les lecteurs d’écran n’ont pas non plus de grand support CSS, en particulier avec un contenu qui peut être rendu visible ou invisible en utilisant les styles display:none ou visibility:hidden. Beaucoup de lecteurs d’écran ne lisent pas le contenu ayant ces styles, même si le contenu fait toujours partie de la structure sous-jacente de la page. Tant qu’il n’y aura pas de meilleurs support CSS dans les navigateurs Web et les technologies d’assistance, utiliser les CSS seules pour produire du contenu dynamique ne devrait être fait qu’avec beaucoup de tests dans plusieurs navigateurs et lecteurs d’écran différents.