Sélection de la langue

Recherche

Barre de progression et compteur

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

La barre de progression est utilisée pour fournir une rétroaction à jour sur la progression d'un flux de travail ou d'une action. Le compteur est utilisé pour afficher une valeur dans une plage lorsqu'il existe une valeur minimale et maximale connue (mesure scalaire).

Conception et codage

Utilisation de base

Parce que certains navigateurs ne prennent pas en charge la fonctionnalité nativement, ces correctifs émulent la même fonctionnalité à l'aide de HTML générique et WAI-ARIA.

Barre de progression

L'élément HTML5 progress affiche la progression d'une tâche.

Apparence

22 %

66 %

100 %

Bonne utilisation

Point de conformité :

  • Fournir des données visuelles de la valeur actuelle et maximale (dans une table ou alignées avec la barre de progression)
Mauvaise utilisation

Points de conformité :

  • Afficher une valeur dans une plage lorsqu'il existe une valeur minimale et maximale connue (référez-vous à compteur)
  • N'utilisez pas les classes .progress .progress-bar qui viennent avec Bootstrap, puisqu'elles ne sont pas sémantiquement correctes
    70 %
  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<progress value="22" max="100"><span class="wb-inv">22 %</span></progress>
<progress value="198" max="300"><span class="wb-inv">66 %</span></progress>
<progress value="500" max="500"><span class="wb-inv">100 %</span></progress>

Faites référence à Correctif « progress » pour des options supplémentaires.

Compteur

L'élément HTML5 meter affiche une mesure scalaire dans une plage connue.

Apparence

3 sur 10

70 %

Bonne utilisation

Point de conformité :

  • Fournir des données visuelles des valeurs minimale, maximale et actuelle (dans une table ou alignées avec la barre de progression)
    • Incluez les attributs low et high pour indiquer des niveaux supérieurs ou inférieurs aux valeurs normales, la couleur de la barre changera
      • Trop basse :
        15 % (trop basse)
        <meter min="100" low="120" value="115" max="200" high="180">15 % (trop basse)</meter>
      • Trop élevée :
        90 % (trop élevée)
        <meter min="0" value="90" max="100" high="80">90 % (trop élevée)</meter>
Mauvaise utilisation

Points de conformité :

  • Ne pas afficher la progression d'une tâche (faites référence à barre de progression)
  • Ne pas utiliser pour représenter des valeurs qui n'ont pas de plage maximale
  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<meter value="3" min="0" max="10">3 sur 10</meter>
<meter value="0.7">70 %</meter>

Faites référence à Correctif « meter » pour des options supplémentaires.

Une partie du code et des documents pour cette page provient de Bootstrap (lien externe)

Date de modification: