Je viens de remplacer un bouton radio pour sélectionner l'appareil mobile de l'utilisateur avec des div contenant des images du téléphone à la place. J'utilise un événement de clic JQuery pour détecter quand l'utilisateur choisit une option. Comment puis-je rendre ce clavier accessible?Accessibilité du clavier pour les div contenant des images en tant qu'options
Du mieux au pire (OMI), vous pouvez:
style radio buttons avec vos images, en JS évidemment parce que support for form styling is erratic à travers les navigateurs. Si vous n'avez plus d'étiquettes visibles, vous devriez au moins les afficher en dehors de l'écran. Et mieux, faites ce dernier seulement après avoir testé dans JS que les images sont vraiment affichées à l'écran. L'alternative de texte de vos images pourrait être insuffisante dans ce cas.
Utilisez des images uniquement dans les éléments à mise au point: liens et éléments de formulaire. Vos boutons answer sur les boutons sont corrects. Comme ci-dessus, soyez prudent avec le texte alternatif et Cacherlabel s (pas avec display: none; ou visibility: hidden; ou ils ne seraient pas lus par les lecteurs d'écran plus, il suffit de les afficher en dehors d'eux en dehors de l'écran avec text-indent ou positionnement relatif/absolu
Utilisez tabindex sur les div de sorte qu'ils seront focalisable et ensuite ajouter tabindex sur tous les éléments pouvant être activés, dans l'ordre. Tout un cauchemar à court et à long terme.
Buttons peut contenir du HTML et donc pour l'accessibilité au clavier un bouton semble fonctionner beaucoup mieux. Bien sûr, le comportement n'est pas tout à fait le même que les boutons radio. En outre, IE < 8 renvoie le code HTML interne au lieu de l'attribut de valeur.