CSS speak-Eigenschaft
Wie man die CSS-Eigenschaft speak verwendet, um ein Element auditiv darzustellen. Erfahren Sie mehr über die Eigenschaft und ihre Werte.
Hinweis: Die
speak-Eigenschaft ist veraltet. Kein verbreiteter Browser implementiert sie, und Screen-Reader lesen sie nicht aus CSS. Betrachten Sie diese Seite als Referenz für Legacy-Code und verwenden Sie stattdessen echte Barrierefreiheitstechniken (semantisches HTML, ARIA, das Attributaria-hidden).
Die CSS-Eigenschaft speak legt fest, ob — und wie — der Text eines Elements auditiv gerendert wird: also laut vorgelesen von einem Sprachsynthesizer in einem auditiven User-Agent (dem Werkzeug, auf das ein Screen-Reader-Nutzer angewiesen ist). Sie gehört zu einer Familie von „auditiven" / „Sprach"-CSS-Features, die dazu gedacht waren, Audioausgabe auf dieselbe Weise zu gestalten, wie gewöhnliches CSS die visuelle Ausgabe gestaltet.
Diese Seite erklärt, was die Eigenschaft ursprünglich leisten sollte, alle Werte, die sie akzeptiert, warum sie nie ausgeliefert wurde und was Sie heute stattdessen verwenden sollten.
Warum diese Eigenschaft existiert (und warum sie gescheitert ist)
Die Idee hinter speak war schlicht: So wie display: none ein Element auf einer visuellen Seite verbirgt, würde speak: none es auf einer gesprochenen Seite verbergen, während spell-out einen Synthesizer zwingen würde, eine Zeichenfolge Buchstabe für Buchstabe vorzulesen (nützlich für ein Akronym wie „URL" oder eine Seriennummer).
In der Praxis veränderte sich die Spezifikation — Werte wurden zwischen CSS 2.1 und dem späteren CSS Speech Module aufgeteilt — und kein Browser hat sie je umgesetzt. Screen-Reader lesen den gerenderten DOM und den Barrierefreiheitsbaum, nicht Ihr Stylesheet, weshalb sie speak ebenfalls nie berücksichtigt haben. Deshalb ist sie als veraltet markiert: Sie hat nirgendwo eine Wirkung.
Was stattdessen zu verwenden ist
Da speak nichts bewirkt, greifen Sie auf Techniken zurück, die assistive Technologien tatsächlich respektieren:
- Inhalt für alle verbergen (einschließlich Screen-Reader): verwenden Sie
display: noneoder das HTML-Attributhidden. Dies ist das reale Äquivalent zum altenspeak: none. - Inhalt visuell verbergen, aber für Screen-Reader zugänglich lassen: eine „visuell versteckte" / „sr-only"-Hilfsklasse (Off-Screen-Positionierung), damit ein Button mit nur einem Icon trotzdem eine Beschriftung ankündigen kann.
- Dekorativen Inhalt nur vor Screen-Readern verbergen:
aria-hidden="true"am Element. - Etwas buchstabieren: Es gibt keine zuverlässige CSS-Methode; verwenden Sie klaren Text, ein
abbr-Element oder einaria-label, das so geschrieben ist, wie Sie es ausgesprochen haben möchten.
Werte
Die Eigenschaft akzeptiert sechs Schlüsselwortwerte plus die beiden CSS-weiten Schlüsselwörter (initial, inherit). none, normal und spell-out stammen aus CSS 2.1; auto, never und always stammen aus dem CSS Speech Module.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS2, CSS Speech Module |
| DOM-Syntax | element.style.speak = "always"; |
Syntax
CSS speak-Syntax
speak: auto | normal | spell-out | none | never | always | initial | inherit;Eine einfache Deklaration sieht so aus (sie hat in keinem aktuellen Browser eine sichtbare Wirkung):
.acronym {
speak: spell-out;
}Werte im Überblick
| Wert | Beschreibung |
|---|---|
none | Verhindert, dass das Element und sein Inhalt auditiv gerendert werden. |
normal | Verwendet sprachabhängige Ausspracheregeln für die Darstellung eines Elements und seiner Kinder. |
spell-out | Buchstabiert den Text Buchstabe für Buchstabe, typischerweise verwendet für Akronyme und Abkürzungen. |
auto | Löst zu einem berechneten Wert von none auf, wenn display gleich none ist, andernfalls zu auto, was einen verwendeten Wert von normal ergibt. |
never | Verhindert, dass das Element auditiv gerendert wird. |
always | Das Element wird auditiv gerendert. |
initial | Setzt die Eigenschaft auf ihren Standardwert. |
inherit | Übernimmt die Eigenschaft vom übergeordneten Element. |
Browser-Kompatibilität
Kein verbreiteter Browser implementiert speak. Die Deklaration wird zwar geparst, aber überall ignoriert und erreicht daher keinen Screen-Reader.
| Browser | Unterstützung |
|---|---|
| Chrome | Nein |
| Firefox | Nein |
| Safari | Nein |
| Edge | Nein |
| Opera | Nein |
Verwandte Eigenschaften
display— der moderne, unterstützte Weg, ein Element vollständig von der Seite (und dem Barrierefreiheitsbaum) zu entfernen.content— generierter Inhalt, der tatsächlich von Screen-Readern vorgelesen wird, daher mit Bedacht verwenden.cursor— eine weitere präsentationsbezogene Eigenschaft, diese vollständig unterstützt.