speak-as

Syntaxe

/* Valeurs avec un mot-clé */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* Valeur de nom @counter-style */
speak-as: <counter-style-name>;

Valeurs

auto

Si la valeur de speak-as est spécifiée comme auto, la valeur effective de speak-as sera déterminée en fonction de la valeur du descripteur system :

• Si la valeur de system est alphabetic, la valeur effective de speak-as sera spell-out.
• Si system est cyclic, la valeur effective de speak-as sera bullets.
• Si system est extends, la valeur de speak-as sera la même que si speak-as: auto était spécifié sur le style étendu.
• Dans tous les autres cas, spécifier auto a le même effet que spécifier speak-as: numbers.

bullets

Une phrase ou une indication sonore définie par l'agent utilisateur pour représenter un élément de liste non ordonnée sera prononcée.

numbers

La valeur numérique du compteur sera prononcée dans la langue du document.

words

L'agent utilisateur générera la valeur du compteur normalement et la prononcera comme un mot dans la langue du document.

spell-out

L'agent utilisateur générera la représentation du compteur normalement et la prononcera lettre par lettre. Si l'agent utilisateur ne sait pas comment prononcer un symbole de compteur particulier, il pourra le prononcer comme si la valeur de speak-as était numbers.

<counter-style-name>

Le nom d'un autre style de compteur, spécifié comme <custom-ident>. Si cette valeur est incluse, le compteur sera prononcé selon la forme spécifiée dans ce style de compteur, un peu comme si on spécifiait le descripteur fallback. Si le style spécifié n'existe pas, speak-as revient à auto.

Accessibilité

La prise en charge par les technologies d'assistance de la propriété speak-as est très limitée. Ne comptez pas sur cette propriété pour transmettre des informations essentielles à la compréhension de la page.

Parlons de CSS Speech | Css Tricks ^(angl.) (2017)

Définition formelle

Syntaxe formelle

speak-as = 
  auto                  |
  bullets               |
  numbers               |
  words                 |
  spell-out             |
  <counter-style-name>  

Exemples

Définir la forme orale d'un compteur

Dans cet exemple, le système de compteur est fixe avec des symboles visuels inintelligibles. Cependant, le descripteur speak-as est utilisé pour que les marqueurs des éléments de liste soient lus comme des nombres dans l'arbre d'accessibilité. Lorsque cette propriété est prise en charge, les lecteurs d'écran liront les nombres plutôt que les marqueurs visuels.

Pour expérimenter le résultat du descripteur speak-as, utilisez une technologie d'assistance comme VoiceOver ou un autre lecteur d'écran, ou consultez le panneau d'accessibilité ^(angl.) dans les outils de développement d'un navigateur qui prend en charge speak-as.

HTML

<ul class="list">
  <li>J'ai eu une pomme</li>
  <li>J'ai mangé deux bananes</li>
  <li>J'ai dévoré trois oranges</li>
  <li>Je n'ai pas faim pour le dîner</li>
  <li>Mais je prendrai cinq boules de glace en dessert</li>
</ul>

CSS

@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les descripteurs de @counter-style : system, symbols, additive-symbols, negative, prefix, suffix, range, pad et fallback
• Propriétés de style de liste : list-style, list-style-image, list-style-position
• La fonction symbols() pour créer des styles de compteur anonymes.
• Le module de styles de compteur CSS
• Le module de listes et compteurs CSS