Comprendre la norme

Structuration du RGAA v3

Conseils d'Intégration développeurs :

Alternative textuelle, <img alt="...">
- type d'image (descriptive ou informative)
- notion de pertinence

Applicable à tous les éléments de la page : images, iconographies, textes, bordures...

La page doit rester compréhensible même s'il n'y avait pas les couleurs
Le contraste doit être suffisant (outil de calcul de contraste pour la lisibilité du texte...)

Conseils auteurs et webdesigner pour les couleurs... : mise en oeuvre sur les images de contenus

Conseils webdesigner... : mise en œuvre dans la feuille de style et images associées

Conseils pour les développeurs :

Pour les tableaux de mise en page : éviter si possible, sinon respecter la linéarité de lecture, ajouter attribut role="presentation" et c'est tout. Pour les autres...
Titre général = balise <caption>
Résumé = attribut summary
Cellule de d'entête = balise <th>
Association des cellules de contenu aux cellules d'entête : collspan, rowspan pour les tableaux simples, headers pour les tableaux complexes

Conseils pour développeurs :

Contrôlable au clavier et avec la souris

Eviter de changer de contexte, ou avertir des changements de contexte (changement de focus ou de contenu)
utiliser ARIA pour :
- Indiquer aux technologies d'accessibilité les éléments qui ont été modifiés sur la page
- Associer des comportements aux éléments de l'interface si c'est un élément que vous créez vous même.
Exemples ARIA :
- Exemple ARIA auto-complete
- Exemple ARIA barre d'outil d'éditeur texte et dialogue
Proposer une alternative au javascript lorsque c'est possible (par exemple s'il n'est pas utile ou s'il y a possibilité d'avoir un comportement "statique")

Conseil global : essayer d'utiliser des composants d'interface accessibles :

Les contrôles HTML de base (input...)
Les contrôles de librairies qui prennent en charge l'accessibilité (par ex. versions récentes de jquerry-ui il me semble...)

Type (Format) du document : Exemple pour un document HTML5 : <!DOCTYPE html>
Titre du document : <title>Les éléments obligatoires pour l'accessibilité</title>
Langue de contenus :
- Sur tout le document : <html lang="fr">
- Sur un extrait de contenu : <span lang="en">
Pas de "détournement de balise" à des fins de présentation
Le document doit être du HTML valide (validateur W3C...)

Organisation du layout global de la page : planifier la structure en amont, et la représenter par les nouvelles balises HTML5 : header, footer, nav, main, sidebar...
Organisation des contenus de la page : les représenter en utilisant les nouvelles balises HTML lors-qu’approprié : section, article, aside.
Arborescence de titre cohérente : <h1> <h2>...
Ne pas utiliser de caractères écrits pour faire du stylage : pas de faux tirets avec le carractère "-", faire des vrais listes <ul><li>...

Utiliser les feuilles de style pour le stylage
Testez en désactivant les CSS
Testez l'agrandissement des caractères à 200%
Pas de background-color et color cohérent sur tous les éléments (piège si une background-image ne charge pas)
Liens identifiables (soulignés ?)

Faite un lien entre l'intitulé du champ et le champ lui même : balise <label>
Groupez les champs de même nature : balise <fieldset>
Champ obligatoire = attribut required
Nouveaux "input type" HTML5 : email, url, number, date
Gérer les erreurs de formulaire : indiquer les champs en erreur (aria-label ou aria-invalid + information visuelle...)
Bien indiquer les formats de saisie attendus

Les nouveaux composants HTML5 font un contrôle de la validité de la saisie coté client, mais pas toujours suffisant :

Liens d'évitement : pour permettre d'atteindre le contenu et les outils du site au clavier
Utiliser au moins 2 techniques de navigation : menu, fil d'ariane, moteur de recherche intégré...
Position et présentation des éléments de menu stable entre des pages similaires
Ordre de tabulation cohérent avec l'ordre d'affichage des éléments

Éviter les limites de temps de consultation
Avertir lors de l'ouverture de nouvelle fenêtre : par ex. à la fin de l'attribut title d'un lien
Indiquer les types et poids des fichiers proposés en téléchargement
Version accessible des documents en téléchargement