La propriété CSS speak

Remarque : La propriété speak est obsolète. Aucun navigateur grand public ne la prend en charge, et les lecteurs d'écran ne la lisent pas depuis CSS. Considérez cette page comme une référence pour le code hérité et utilisez plutôt de vraies techniques d'accessibilité (HTML sémantique, ARIA, l'attribut aria-hidden).

La propriété CSS speak définit si — et comment — le texte d'un élément est rendu de façon auditive : c'est-à-dire lu à haute voix par un synthétiseur vocal dans un agent utilisateur auditif (le type d'outil sur lequel un utilisateur de lecteur d'écran s'appuie). Elle appartient à une famille de fonctionnalités CSS « auditives » / « vocales » qui étaient censées styliser la sortie audio de la même façon que CSS ordinaire stylise la sortie visuelle.

Cette page explique ce que la propriété était censée faire, toutes les valeurs qu'elle accepte, pourquoi elle n'a jamais été intégrée, et ce qu'il faut utiliser aujourd'hui.

Pourquoi cette propriété existe (et pourquoi elle a échoué)

L'idée derrière speak était simple : tout comme display: none masque un élément d'une page visuelle, speak: none le masquerait d'une page parlée, tandis que spell-out forcerait un synthétiseur à lire une chaîne caractère par caractère (utile pour un acronyme tel que « URL » ou un numéro de série).

En pratique, la spécification a évolué — les valeurs ont été réparties entre CSS 2.1 et le CSS Speech Module ultérieur — et aucun navigateur ne l'a jamais intégrée. Les lecteurs d'écran lisent le DOM rendu et l'arbre d'accessibilité, non votre feuille de style, donc ils n'ont jamais respecté speak non plus. C'est pourquoi elle est marquée comme obsolète : elle n'a aucun effet nulle part.

Que faut-il utiliser à la place

Étant donné que speak ne fait rien, utilisez des techniques que la technologie d'assistance respecte réellement :

• Masquer le contenu de tout le monde (y compris les lecteurs d'écran) : utilisez display: none ou l'attribut HTML hidden. C'est l'équivalent réel de l'ancien speak: none.
• Masquer le contenu visuellement mais le conserver pour les lecteurs d'écran : une classe utilitaire « visually hidden » / « sr-only » (positionnement hors écran), afin qu'un bouton avec seulement une icône puisse tout de même annoncer une étiquette.
• Masquer le contenu décoratif aux lecteurs d'écran uniquement : aria-hidden="true" sur l'élément.
• Épeler quelque chose : il n'existe pas de méthode CSS fiable ; utilisez du texte clair, un élément abbr, ou un aria-label rédigé de la façon dont vous souhaitez qu'il soit prononcé.

Valeurs

La propriété accepte six valeurs de mots-clés plus les deux mots-clés CSS universels (initial, inherit). none, normal et spell-out proviennent de CSS 2.1 ; auto, never et always proviennent du CSS Speech Module.

Syntaxe

Syntaxe CSS speak

speak: auto | normal | spell-out | none | never | always | initial | inherit;

Une déclaration minimale ressemble à ceci (elle n'aura aucun effet observable dans aucun navigateur actuel) :

.acronym {
  speak: spell-out;
}

Référence des valeurs

Compatibilité des navigateurs

Aucun navigateur grand public ne prend en charge speak. La déclaration est analysée mais ignorée partout, donc elle n'atteint jamais un lecteur d'écran.

Propriétés associées

• display — la façon moderne et prise en charge de supprimer complètement un élément de la page (et de l'arbre d'accessibilité).
• content — contenu généré qui est annoncé par les lecteurs d'écran, donc à utiliser avec précaution.
• cursor — une autre propriété de présentation, celle-ci entièrement prise en charge.

Pratique