Mémo dev

Les recommandations ci-dessous sont extraites du Guide de l'intégrateur RGAA de la DINUM. Ce guide propose des fiches pour chaque thématique avec des conseils de développement, l'explication du besoin pour les utilisateurs et des ressources complémentaires.

Le mémo développement

Les recommandations ci-dessous sont extraites du guide de l’intégrateur RGAA établi par la Dinum. Ce guide propose des fiches pour chaque thématique avec des conseils de développement, l'explication du besoin pour les utilisateurs et des ressources complémentaires.

Layout

  • Déclarer un doctype valide.
  • Déclarer toujours la langue de traitement sur la balise html.
  • Valider le code source.
  • Structurer votre page avec les landmarks ARIA.
  • Si le site est en HTML5, structurer la page avec les balises HTML5 et les landmarks ARIA.

Navigation

  • Définir des titres de pages pertinents.
  • Implémenter un lien d'accès rapide au contenu.
  • Implémenter un lien d'accès rapide à la navigation principale.
  • Implémenter des liens d'évitement pour tous les groupes de liens importants.
  • Implémenter deux systèmes de navigation au moins.

Contenus

  • Donner un titre pertinent aux cadres en ligne.
  • Utiliser les balises appropriées pour structurer les listes.
  • Indiquer les changements de langue et de sens de lecture.
  • Indiquer les ouvertures de nouvelles fenêtres.
  • Indiquer le format et le poids des documents en téléchargements.

Tableaux

  • Implémenter le role="presentation" sur les tableaux de mise en forme.
  • Déclarer les cellules d'en-têtes dans des éléments th.
  • Implémenter un attribut scope="col" pour les en-têtes de colonnes.
  • Implémenter un attribut scope="row" pour les en-têtes de lignes.
  • Utiliser les relations id, headers pour relier les cellules de données à leurs en-têtes dans le cas de cellules fusionnées.

Liens

  • Attention aux liens vides.
  • Définir des intitulés de liens pertinents.
  • Respecter la construction des titres de liens.

Formulaires

  • Définir des étiquettes pertinentes.
  • Utiliser une méthode conforme pour relier les champs à leurs étiquettes respectives.
  • Pour les champs obligatoires avec un format de saisie, pensez toujours à l'indiquer (de préférence dans l'étiquette du champ).
  • Pour les erreurs de saisie, reliez l'erreur au champ concerné et indiquez un exemple de saisie réelle lorsque nécessaire.

Focus

  • La prise de focus est visible, les valeurs de l'outline ne la dégradent pas.
  • Une mise en forme autre que la couleur permet d'identifier les liens ainsi que leur survol et la prise de focus.
  • Lors de la navigation au clavier la prise de focus est cohérente et ne reste pas bloquée sur un élément (piège au clavier).

Respecter la distinction fond et forme

  • Aucun contenu ne disparaît lors de l'activation ou de la désactivation des styles.
  • La page reste compréhensible et les différentes zones sont correctement ordonnées lorsque les styles sont désactivés.

Images

  • Définir un alt sur toutes les images img.
  • Définir un alt="" sur les images de décoration.
  • Définir une alternative conforme et pertinente lorsqu'elle est porteuse d'information.
  • Éviter le plus possibles les images textes

Informations par la forme et la couleu

  • Ne pas donner d'informations uniquement par la couleur.
  • Ne pas donner d'informations uniquement par la forme.
  • Implémenter des alternatives à la couleur et à la forme qui soient pertinentes.

Agrandissement des caractères

  • Ne pas définir des tailles de caractères en pixels.
  • Eviter de fixer des hauteurs de boîte en pixels.
  • Utiliser la propriété overflow:hidden avec précaution.
  • Définir si possible des points de rupture en em.

Multimédia

  • Faire précéder toutes les vidéos d'un titre.
  • Fournir un lien clairement identifié permettant d'accéder à l'alternative accessible des médias non temporels.

Suivez notre actualité !

DesignGouv, c’est aussi des événements, des rencontres et des discussions pour faire vivre la culture design au sein des administrations. Rejoignez-nous !

Recevoir notre newsletter

Sur Twitter : @design_gouv