Éléments graphiques

Les couleurs utilisées signalent la marque, la sémantique, la fonction et l'état des composants

Lorsqu'une couleur est porteuse d'information, elle ne peut pas être le seul signifiant. Si une information est portée par la couleur (sémantique ou autre), elle doit passer par un autre mode de signalisation, par ordre de préférence :

• un intitulé visible et lisible pour les agents utilisateurs
• un attribut aria-label

Dans Trilogy, les composants interactifs (boutons, checkbox etc...) peuvent parfois porter des couleurs sémantiques, même si la pratique est fortement déconseillée. Dans ce cas, l'intitulé accessible du composant doit signaler explicitement l'action mais aussi la sémantique pour rester conforme aux exigences d'accessibilité.

<button class="button is-primary" aria-label="Attention - Annuler la commande">Annuler la commande</button>

Le rapport de contraste entre le texte et son arrière-plan devrait être de 4.5:1 au moins quelle que soit la taille ou la graisse du texte.

Si ce n'est pas possible, le rapport de contraste doit être :

• de 4.5:1 au moins pour les textes :
  • de taille inférieure à 24px (18pt), sans graisse
  • de taille inférieure à 18.5px (14pt), avec graisse
• de 3:1 sinon

Chaque image doit avoir une alternative textuelle porteuse de sens. Cette alternative sert à décrire l'image en cas de défaut de chargement ou pour un lecteur d'écran pour les utilisateurs ayant un handicap visuel.

Chaque image (balise <img>) porteuse de sens doit avoir un attribut alt renseignant un court texte explicatif de l'image.

Si l'image est purement décorative, l'alt doit être vide.

Une image est porteuse de sens si :

• elle porte une information textuelle (ex : offre du moment)
• elle représente un produit (ex : photo d'un téléphone sur une carte de vente) du catalogue

Les SVGs porteurs de sens devraient être passés en source au sein d'une balise <img>. La balise image doit alors posséder l'attribut role="img" et alt.

<img role="img" src="box.svg" alt="Nouvelle box"/>

Les SVGs décoratifs devraient être passés en source au sein d'une balise <img>. La balise image doit alors posséder uniquement l'attribut alt vide.

<img src="box.svg" alt=""/>

Si le SVG doit être inline (balise <svg>), alors il doit :

• posséder l’attribut WAI-ARIA role="img"
• contenir une balise title ayant un identifiant et portant l'alternative. Il doit être le premier enfant de l'élément svg !
• posséder l'attribut aria-labelledby référençant l'identifiant du titre, car le titre est ignoré par certains browsers

<svg viewBox="0 0 50 50" version="1.1" role="img" lang="fr" aria-labelledby="title">
    <title id="title">Nouvelle box</title>
    ...
</svg>

Chaque icone doit contenir l'attribut aria-hidden="true". Le raccourci aria-hidden est découragé car certains lecteurs d'écran ne l'interprètent pas correctement.

Les icons devraient pour la plupart être décoratives, et associées à un élément textuel (ex : utiliser des icônes pour illustrer les bullet points d'une liste) ou contenues dans un élément interactif qui porte un texte associé (ex : un bouton, lien ou CTA)

<a target="_blank" title="Retrouvez-nous sur Facebook" href="https://www.facebook.com/bouyguestelecom">
    <span class="icon is-size-5">
        <i class="tri-social-facebook" aria-hidden="true"></i>
    </span>
</a>

Les icones non décoratives sans texte associé (ex : icône de loupe en guise de bouton recherche) doivent être contenues dans un span ou div ayant l'attribut role="img" et un attribut aria-label portant l'alternative.

<span role="img" aria-label="Rechercher" class="icon is-small"><i aria-hidden="true" class="tri-search"></i></span>

Chacun des éléments suivants doit présenter une description détaillée restituant à l'écrit la totalité de l'information présente à l'écran

• Graphique
  • un diagramme circulaire doit présenter une restitution des données chiffrées avec des phrases
  • un diagramme de tendances doit présenter les tendances dégagées, et quelques points clé chiffrés, avec des phrases
• Carte statique
  • une carte d'accès à un site physique doit présenter les instructions GPS pour arriver au site avec des phrases
  • un diagramme de tendances doit présenter les tendances dégagées, et quelques points clé chiffrés, avec des phrases
• Carte dynamique
  • une carte d'accès à un site physique doit présenter les instructions GPS pour arriver au site avec des phrases
  • un diagramme de tendances doit présenter les tendances dégagées, et quelques points clé chiffrés, avec des phrases
• Carte statique (accès à un site physique...) (ex : ).
• Chaque carte dynamique (ex : trouver la boutique la plus proche de soi...) doit avoir présenter une description détaillée restituant à l'écrit la totalité de l'information présente à l'écran (ex : instructions GPS pour arriver au site).