Choix et implémentation des composants

Chaque bouton doit avoir une action valide (non nulle et fonctionnelle) associée via l'attribut onClick ou être inactif. l'exception de certains CTA et des boutons de soumission de formulaires, cette action ne doit pas induire une navigation. Dans le cas d'un changement de page, ouverture d'une nouvelle fenêtre ou redirection, il est recommandé d'utiliser un lien.

Chaque lien (balise <a>) doit avoir un intitulé explicite (voir intitulés)

Plusieurs options, par ordre de préférence :

• posséder un intitulé textuel entre les balises de fermeture et d'ouverture, ou dans les enfants de la balise (ex : paragraphe ou titre sémantique html)
• posséder un attribut aria-label portant un intitulé

Chaque lien doit avoir un attribut href valide (non vide et fonctionnel) ou être inactif. Dans le cas d'une action sans changement de page, ouverture d'une nouvelle fenêtre ou redirection (exemple : un téléchargement) ainsi que pour l'exception de certains CTA et des boutons de soumission de formulaires, il est recommandé d'utiliser un bouton.

Chaque lien (balise <a>) doit avoir un intitulé explicite (voir intitulés)

Plusieurs options, par ordre de préférence :

• posséder un intitulé textuel entre les balises de fermeture et d'ouverture, ou dans les enfants de la balise (ex : paragraphe ou titre sémantique html)
• posséder un attribut aria-label portant un intitulé

Chaque lien doit être visuellement différencié des autres textes.

Plusieurs options, par ordre de préférence :

• Porter uniquement la class link de Trilogy. Cela permet que le lien sans prise de focus (souligné), au survol (animation) ou avec prise de focus via le clavier (cadre bleu par défaut du navigateur) soit différencié par un critère autre que la couleur.
• Dans le cas où les classes additionnelles is-static ou is-plain sont utilisées, le contraste de couleur entre
  • le lien survolé et le lien non survolé
  • le lien survolé et le text qui n'est pas un lien
  • le lien non survolé et le texte qui n'est pas un lien
  doit être d'au moins 4.5:1 (voir la section contrastes de couleurs et la page "Boutons et liens"). Attention, ceci n'est pas possible actuellement avec Trilogy.

Explication des non conformités des classes is static et is-plain :

• Si l'on supprime l'animation au survol en ajoutant la classe is-static, il n'existe aucun moyen de différencier visuellement un lien survolé d'un lien non survolé. Il n'existe actuellement aucun moyen d'indiquer cette différence en utilisant Trilogy ; l'usage de la classe is-static est donc très fortement déconseillée.
• Si l'on supprime le soulignement en ajoutant la classe is-plain, il n'existe aucun moyen de différencier visuellement un lien du texte environnant puisque le contraste de couleur entre les couleurs de la marque est actuellement insuffisant ; l'usage de la classe is-static est donc très fortement déconseillée.

Chaque champ de saisie de texte doit avoir un label le décrivant :

• Un champ de saisie sans label visible doit posséder l'attribut aria-label

  <input class="input" type="text" aria-label="Recherche">

• Un champ de saisie avec label visible doit lier le champ et le label au moyen d'une correspondance id / for

  <div>
      <input id="email" class="input" type="text">
      <label for="email">Adresse mail</label>
  <div>

Chaque champ de sélection doit avoir un label le décrivant pour rester conforme aux exigences d'accessibilité :

• Un champ de sélection sans label visible doit posséder l'attribut aria-label

  <div class="select">
      <select aria-label="Sélectionner la langue">
          <option>Français (FR)</option>
          <option>English (US)</option>
      </select>
  <div>

• Un champ de sélection avec label visible doit lier le champ et le label au moyen d'une correspondance id / for

  <div class="select">
      <select id="country-code">
          <option>+33 (FR)</option>
          <option>+1 (US)</option>
      </select>
      <label for="country-code">Préfixe téléphonique</label>
  <div>

Chaque checkbox, radio et switch doit avoir un label le décrivant pour rester conforme aux exigences d'accessibilité :

• Un checkradio avec label visible doit lier le champ et le label au moyen d'une correspondance id / for

  <div class="control">
      <input class="is-checkradio" id="checkbox" type="checkbox">
      <label for="checkbox">Checkbox</label>
  </div>

Les tableaux sont utilisés pour présenter un ensemble de données qui serait peu clair sous forme de phrases.

Chaque tableau doit avoir une caption le décrivant (qui sera notamment lue par un lecteur d'écran, pour que l'utilisateur puisse choisir de rentrer ou non dans le tableau).

Chaque balise <table> doit donc contenir comme premier enfant une balise <caption> portant une description succinte du tableau.

De préférence, la caption décrit factuellement la structure d'un tableau, et ne répète pas une information présente ailleurs sur la page.

Chaque tableau doit utiliser les balises <th> pour identifier sémantiquement les en-têtes de colonnes et de lignes. Chaque cellule ne portant pas cette balise doit être déclarée <th>. Les balises <tr> sont recommendées pour structurées le lignes

Les tableaux de structure complexe doivent associer les en-têtes et les données pour rester conforme aux exigences d'accessibilité (ici, pour le lecteurs d'ecran). Pour cela :

• utiliser l'attribut scope sur les balises <th>

  <table class="table">
      <caption>Récapitulatif clients</caption>
      <tr>
          <td></td>
          <th scope="col">Nom</th>
          <th scope="col">Téléphone</th>
      </tr>
      <tr>
          <td>1.</td>
          <th scope="row">Alice</th>
          <td>iPhone</td>
      </tr>
      <tr>
          <td>2.</td>
          <th scope="row">Bob</th>
          <td>Samsung</td>
      </tr>
      <tr>
          <td>3.</td>
          <th scope="row">Charlie</th>
          <td>Sony</td>
      </tr>
  </table>

• en cas de cellules fusionnées, associer une balise <td> à une ou plusieurs balises <th> au moyen de l'attribut headers

  <table>
      <caption>Tableau complexe</caption>
      <tbody>
          <tr>
              <th id="h-a1">Header 1</th>
              <th id="h-a2">Header 2</th>
          </tr>
          <tr>
              <td colspan="2" headers="h-a1 h-a2">Lorem</td>
          </tr>
          <tr>
              <th colspan="2" id="h-b">Header 4</th>
          </tr>
          <tr>
              <td headers="h-b">Lorem</td>
              <td headers="h-b">Lorem</td>
          </tr>
      </tbody>
  </table>

Un certain nombres de rôles et d'attributs sont nécessaires pour rester conforme aux exigences d'accessibilité :

• Les rôles ARIA tablist, tab, tabpanel sont nécessaires pour signaler sémantiquement un groupe d'ongles aux technologies d'assistance.
• Les attributs ARIA aria-selected, aria-controls et id, aria-expanded servent à indiquer l'état actuel du système d'onglets aux technologies d'assitance.
• L'attribut tabindex facilite la navigation au clavier en implémentant un comportement de "roving tabindex" :
  • Un "tab in" amène le focus sur l'onglet portant la valeur tabindex=0
  • Le tab suivant amène le focus sur le prochain élément focusable après la liste d'onglets (c'est un "tab out")
  • Le changement de tab actif se fait grâce aux touches gauche et droite, ainsi que home et end
  • Le tab actif est celui qui porte la valeur tabindex=0 et qui prendra le focus lors du prochain "tab in"
  Ce comportement permet d'éviter aux utilisateurs qui naviguent au clavier de devoir parcourir la totalité des onglets pour traverser la liste ; c'est le comportement préconisé pour simplifier la navigation.

Le changement des valeurs des attributs est géré par Trilogy Vanilla via les data attribute data-tabs-context, data-tab-navigation, data-tabs-wrapper et data-tab-content.

<div class="tab-context" data-tabs-context>
    <div role="tablist" class="tabs">
        <button role="tab" tabindex="0" aria-selected="true" aria-controls="panel-a1" class="tab is-active" data-tab-navigation>Bouygues en bref</button>
        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-a2" class="tab" data-tab-navigation>Carte de la couverture</button>
        <button role="tab" tabindex="-1" aria-selected="false" aria-controls="panel-a3" class="tab" data-tab-navigation>Notre 5G</button>
    </div>
    <div class="tab-panels" data-tabs-wrapper>
        <div role="tabpanel" id="panel-a1" class="tab-panel is-active" aria-expanded="true" data-tab-content>
            <p>Contenu lié au premier onglet</p>
        </div>
        <div role="tabpanel" id="panel-a2" class="tab-panel" aria-expanded="false" data-tab-content>
            <p>Contenu lié au deuxième onglet</p>
        </div>
        <div role="tabpanel" id="panel-a3" class="tab-panel" aria-expanded="false" data-tab-content>
            <p>Contenu lié au troisième onglet</p>
        </div>
    </div>
</div>

L'utilisation d'une balise <button> pour les tabs est recommandée.