Présentation de l’information

Utilisation des feuilles de styles

10.1 [A] La présentation de l’information doit être assurée par des feuilles de style CSS.

Rappel : Ne pas utiliser d’éléments et d’attributs HTML à des fins de présentation.

Les espaces ne doivent pas être utilisés :

pour séparer les lettres d’un mot ;
pour simuler des tableaux ;
pour simuler des colonnes de texte ;
etc.

Feuilles de styles désactivées

10.2 [A] L’information doit rester visible.

10.3 [A] L’information doit rester compréhensible.

Couleur des liens

10.6 [A] Les liens doivent se distinguer du texte.

Si les liens sont signalés uniquement par la couleur, le rapport de contraste entre la couleur des liens et la couleur du texte doit être au moins égal à 3:1.

Focus visible

10.7 [A] L’indication visuelle de la prise de focus ne doit pas être supprimée ou dégradée.

Ceci concerne les propriétés outline, outline-color, outline-width, outline-style.

Si les liens sont signalés uniquement par la couleur, une indication visuelle autre que la couleur doit permettre de signaler la prise de focus au clavier et le survol à la souris.

Informations données par la forme, la taille ou la position

10.14 [A] L’information ne doit pas être donnée uniquement par la forme, la taille ou la position. 10.15 [A] Cette règle doit être implémentée de façon pertinente.

Ces critères s’appliquent aux textes, aux images et aux médias temporels et non temporels.

Texte caché

10.13 [A] Les textes cachés doivent être correctement gérés pour être restitués par les technologies d’assistance si nécessaire.

Les contenus « cachés » au moyen des propriétés et attributs suivants ne sont pas restitués par les technologies d’assistance :

les propriétés CSS display:none et visibility:hidden ;
l’attribut HTML hidden ;
les propriétés CSS width:0, height:0, font-size:0, etc. (ou les attributs HTML width:0, height:0, etc.).

Le texte contenu dans ces éléments ne sera donc pas vocalisé par un lecteur d’écran.

La propriété ARIA aria-hidden="true" a pour objet de rendre les contenus « invisibles » aux technologies d’assistance uniquement (le contenu restera visible dans le navigateur).

Chaque texte caché au moyen d’une propriété CSS ou HTML doit vérifier l’une de ces conditions :

le texte n’a pas vocation à être restitué par les technologies d’assistance ;
le texte peut être rendu visible par une action de l’utilisateur sur l’élément lui-même ou sur un élément précédent ;
l’affichage du texte est pris en charge par un composant d’interface implémentant ARIA.

Chaque texte caché qui utilise une propriété ARIA aria-hidden doit vérifier l’une de ces conditions :

le texte n’a pas vocation à être restitué par les technologies d’assistance ;
l’état ARIA aria-hidden est cohérent avec l’état de visibilité du texte.

Texte agrandi

10.4 [AA] Le texte doit rester lisible lorsque les caractères sont agrandis jusqu’à 200%.

10.10 [AAA] Le texte doit rester visible sans qu’il soit nécessaire d’utiliser la barre de défilement horizontal lorsque les caractères sont agrandis jusqu’à 200%.

Les unités non relatives (px, pt, pc, mm, cm, in) ne doivent pas être utilisées pour les médias de type « écran » (screen, tv, handheld, projection) ; n’utiliser que des unités relatives (%, em ou rem) ou des mots-clé (xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, ou larger).

L’augmentation de la taille des caractères jusqu’à 200% ne doit pas provoquer de perte d’information.

Pour agrandir le texte avec Firefox :

dans le menu Affichage » Zoom, cocher l’option Zoom texte seulement ;
augmenter la taille de 200% (Ctrl++ 6 fois).

Niveaux de zoom : 100% » 110% » 120% » 133% » 150% » 170% » 200%.

Couleur du texte et de l’arrière-plan

10.5 [AA] Les déclarations de couleur de texte doivent être accompagnées d’une déclaration de couleur d’arrière-plan.

Toute déclaration de couleur de texte (color) doit être accompagnée d’une déclaration de couleur d’arrière-plan (background, background-color) et réciproquement.

En cas d’utilisation d’une image en arrière-plan (background, background-image), déclarer également une couleur de fond (background, background-color).

10.8 [AAA] Un mécanisme permet à l’utilisateur de choisir la couleur du texte et celle de l’arrière-plan.

Vérifier que ce mécanisme s’applique au contenu textuel des éléments HTML, ainsi qu’au contenu textuel des éléments <object>, <embed />, <svg> et <canvas>.

Composition du texte

Justification

10.9 [AAA] Le texte ne doit pas être justifié.

N.B. : Un « commutateur de styles » peut être proposé.

Nombre de caractères par ligne

10.11 [AAA] Le nombre de caractères par ligne doit être inférieur ou égal à 80 caractères (ou la largeur du texte doit pouvoir s’ajuster automatiquement à la largeur de la fenêtre).

Interligne et espace entre les paragraphes

10.12 [AAA] L’espace entre les lignes et les paragraphes doit être suffisant.

La valeur de l’interligne (line-height) doit être au moins égale à 150%, et la valeur de l’espacement entre les paragraphes (margin-top et margin-bottom) doit être au moins égale à 1,5 fois la valeur de l’interligne.

Exemple CSS :

{
   line-height: 150%;
   margin-top : 1.5em;
   margin-bottom : 1.5em;
}

N.B. : Un « commutateur de styles » peut être proposé.