Elles ne doivent pas être détournées de l'usage prévu :
Ne doit pas être utilisé pour faire du formatage mais pour indiquer que l'on passe à autre chose (saut de ligne va être lu par les synthèses vocales)
Un paragraphe ne doit pas être entre des balises div mais entre <p></p>.
On peut utiliser :
<p role="heading" aria-level="1226">
Cela permet aux lecteurs d'écrans de bien voir que ce sont des titres, et cela ne perturbe pas le référencement.
Les éléments sectionnant de html5 (<header>, <article>, <footer>) ne sont pas encore lus par tous les lecteurs d'écran. Il faut avoir h1, h2… Il existe une extension firefox “headings map” qui permet de vérifier la structure d'un document.
Il ne faut pas abuser du “dl”, c'est très verbeux.
Les menus de navigation doivent utiliser ul, li…
A la fin de chaque élément de liste, la synthèse vocale marque une pause avant de passer au suivant.
Elles doivent être dans des balises <q> quand c'est court ou <blockquote>.
C'est compliqué à mettre en place pour des sites de presse.
C'est utile pour les utilisateurs ayant des problèmes de mobilité, qui peuvent avoir des raccourcis clavier.
<header> Le titre </header> <nav> Pour tout ce qui est navigation </nav> <main> Il ne peut y en avoir qu'une seule </main> <footer> Pied de page </footer>
Thématique un peu fourre-tout.
<svg height="100px" wisth="100px" role="img" aria-label="carre"> <title>Carré</title> <desc>Carré vert</desc> <rect fill="green" height="100px" width="100px"/> </svg>
On peut utiliser un outil pour mesurer le contrast, mais il arrive que des constrasts qui apparaissent prochent à l'utilisateur.
Mettre en place un “style switcher” sur le site… Il y en a dans jquery.
Par exemple, sur le site du LIMSI
<a href="https://www.limsi.fr/fr/actualites/447-seminaire-de-mecanique-d-orsay" title="Séminaires de mécanique d'Orsay"> En savoir plus </a>
Utiliser les attributs :
Un bouton pertinent ne s'appelle pas “OK” mais “Envoyer la réponse au questionnaire”. On peut mettre un “title” ou “aria-label”.
Les listes d'options doivent être regroupées dans des optgroup.
Lorsqu'il y a une erreur de saisie, la page doit avoir “Erreur” comme “title”, comme dans la fenêtre modale issue de javascript par exemple.
Indiquer un role “presentation” si ce n'est pas un tableau de contenu.
Un tableau de contenu est complexe quand il y a plusieurs entêtes dans une colonne (sous-total par exemple).
<table summary="Budget 2016"> <caption>Budget prévisionnel</caption>
Si on veut intégrer une vidéo, ableplayer est accessible (pour des sites). Ne jamais imposer du son sur une page web…
Il faut titrer les boutons “play”, “pause” dans les players vidéo.