Formation RGAA
Liens utiles
Intro
Démarche d'accessibilité universelle vs. uniquement les handicapés.
Environ 21M de personnes handicapées, dont “seulement” 1.2M handicapés visuels → apporter une réponse globale (diversités utilisateurs, supports, configs).
Limites des tests utilisateurs : les personnes ne savent pas quelles informations ne leur sont pas accessibles (ne savent pas qu'elles existent).
Outils
- NVDA Key (Windows) (exercices : aller lire l'actu de yahoo, lancer une recherche sur google)
Exemple de déclaration de conformité CG du Pas-de-Calais
Images
Les images avec alt vide sont ignorées (zappées) par la revue d'écran.
Cas des images avec légende : plutôt qu'un alt vide, indiquer par ex un sobre alt=“illustration” (pour que la légende soit contextualisée).
Cas des images complexes (ex. graphique) : longdesc pointant vers une url (ancre ou page).
Sur les inputs type image, préciser dans le alt (ex Valider l'adresse)
Textes
Sur le plan de l'accessibilité les smileys texte ne sont pas conformes (incompréhensibles / ignorés par les revues d'écran et la nuance qu'ils apportent est du coup zappée). Il vaut mieux des smileys-images avec des textes alternatifs.
PDF Accessibility Checker
Formulaires
Lorsque le lecteur d'écran passe en mode formulaire, seuls les champs sont lus → placer les infos dans “legend” ou “label”.
Pour les boutons radio il faut des étiquettes pour que les gens qui ont du mal avec le pointage fin de la souris puissent les activer.
Grouper les champs dans des fieldset (on peut inclure un fieldset dans un autre). C'est par exemple indispensable pour les trois champs d'une date.
Exemple pour élément de formulaire accessible comprenant le champ d'aide :
<label for=“id de l'input”>
Etiquette
<input id=“id de l'input” bablabla />
<a href=“url”>Aide</a>
</label>
Invisible marche partout
.invisibile {
font-size:0 !important;
height:0 !important;
left:-9999px !important;
position:absolute !important;
top:-9999px !important;
width:0 !important;
}
Menu déroulant js/ARIA
Avec switch au 'on change' accessible et compatible ie6 Accessible Ui-selectmenu de jQuery
Hors sujet
Plugin “glossaire” détectant automatiquement les termes présents dans un glossaire et opérant des liens -et une infobulle- vers le glossaire. Paramétrable pour désactiver sur titres niveau Hx et intitulés de liens.
Il faut revoir le formulaire de comm des blogs DC pour mettre des legend aux fieldsets.
