• Accueil
•   >  Recueil
•   >  Quelques notes sur les thématiques du RGAA
•   >  Présentation de l’information

Présentation de l’information

RGAA : Présentation de l’information

• Utilisation exclusive de CSS
• Contenus visibles sans CSS
• Contenus compréhensibles sans CSS
• Couleurs par défaut
• Zoom texte
• Linéarisation des contenus
• Adaptation des textes
• Survol et focus
• Contrôle des contenus additionnels au clavier
• Visibilité de la prise de focus
• Visibilité des liens en environnement de texte
• Texte caché
• Information par la forme, la taille ou la position

Utilisation exclusive de CSS

• Utilisation exclusive de CSS :
  • <link rel="stylesheet"/> ;
  • <style></style> ;
  • ou attributstyle en ligne.
• Pas d’attribut de mise en forme <table border="0">.
• Pas de balise de mise en forme <font>.

Les attributs width et height utilisés sur d’autres éléments que les balises <img>, <object>, <embed>, <canvas> et <svg> sont également interdits.

Liste complète des attributs et balises interdites.

Contenus visibles sans CSS

Le contenu visible reste présent lorsque les feuilles de styles sont désactivées.

Attention, ne pas faire :

• Contenu inséré par CSS content (texte, icônes porteuses d’information)

  a[target="_blank"]:after{
      content:"nouvelle fenêtre"
  }

• Images de fond porteuses d’informations (background-image)

  h1:after{
      background-image:url("logo.png")
  }

Contenus compréhensibles sans CSS

Le contenu reste compréhensible lorsque les feuilles de styles sont désactivées.

• Ordre des éléments logique
• Ordre des éléments cohérent, l’enchaînement de la lecture est cohérent.

• Les informations qui se rapportent à un titre doivent être placé après et/ou tout mettre dans un li
• Le order en CSS n'est pas pris en compte par les lecteurs d'écran, pratique pour réagencer
• Le bandeau Cookie, doit être placer en début de page avant même le bandeau d'accès rapide
• Ne rien mettre dans le code après le bouton de validation d'un formulaire

Couleurs par défaut

• Toujours déclarer une couleur de texte, de lien et de fond sur le body

  body, body a{color:#000;}
  body{background-color:#fff;}

• Texte avec une image en arrière-plan : mettre un background-color

  .elt{
      background-image:url(...);
      color:#fff;
      background-color:#000;
  }

Zoom texte

Unités des tailles de police :

• Taille de police relatives : em, rem, %
• Depuis RGAA 4 : tailles de polices en px autorisées. (non conseillé car les tailles de police en pixels ne permettent pas d’agrandir les textes sur certains navigateurs)
• Quand un site propose un dispositif d’agrandissement des caractères (A+/A-), c'est cette fonctionnalité qui sera soumise à la conformité, mieux vaut laisser les navigateurs gérés !

Texte lisible avec agrandissement jusqu'à 200% :

• Zoom texte : Firefox : « Affichage > Zoom texte seul » : agrandissement à 200% (Ctrl + 6 fois)
• Ou utilisation des fonctions de zoom du navigateur (zoom graphique)

Linéarisation des contenus

Les contenus doivent rester présents, lisibles et utilisables sans utilisation des deux ascenseurs :

• Consultation verticale : 320px de large minimum
• Consultation horizontale : 256px de hauteur minimum

Les tableaux ont le droit d'être affiché avec un scroll

Adaptation des textes

Les textes doivent rester lisibles dans les conditions suivantes :

• interlignage augmenté de 1,5 fois la taille de police ;
• marge suivante : 2 fois la taille de police
• espacement des lettres : 0,12 fois la taille de la police
• espacement des mots : 0,16 fois la taille de la police

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

p {
    margin-bottom: 2em !important;
}

Cas particuliers : sous-titres incrustés, images-texte, texte dans une balise canvas.

Survol et focus — ancre

Contenus qui apparaissent à la prise de focus ou au survol d’un élément :

• Peut être masquer sans déplacer le focus ou le pointeur pointeur via la touche Echap
• Peut être survolé sans disparaitre
• Reste visible tant que le composant est actif

La balise title natif ou modèle de conception ARIA (tooltip, modale) n'est pas concernée par cette règle

Contrôle des contenus additionnels au clavier — ancre

Les contenus au survol doivent fonctionner aussi au clavier et autre périphérique de pointage équivalent

Visibilité de la prise de focus — ancre

• Pas de dégradation de l'outline natif outline:0 ou outline:none
• Ou utilisation d’une indication de focus augmentée suffisamment contrastée (ratio mini de 3)

Les états :focus, :hover des composants doivent également être suffisamment contrastés.

Attention aux composants interactifs masqués :

<input type="radio" id="default" class="sr-only" />
<label for="default">Défaut</label>

input:focus+label{ outline:1px dotted black }

Visibilité des liens en environnement de texte — ancre

A l'intérieur d'un bloc de texte

• Contraste suffisant (> 3 par rapport au texte environnant) ou ajouter un soulignement
• Indication supplémentaire a la couleur au survol souris ou prise de focus

Texte caché — ancre

Texte caché qui annule aussi la restitution d'écran :

• display:none
• visibility:hidden
• font-size:0

Uniquement pour la restitution d'écran :
aria-hidden="true" ou hidden

Information par la forme, la taille ou la position — ancre

Pensez au alternative textuelle ou une version alternative :

• Un petit curseur full CSS
• Une liste de progression sans texte
• Une petite fleche pour dire nouvelle fenêtre
• etc...

Une information ne doit pas être donnée uniquement par la couleur, ajouter un texte ou une image