speak | CSS-Tricks - CSS-Tricks

The speak property in CSS is for specifying if a browser should speak the content it reads, such as through a screen reader.

.module {
  speak: never;
  speak-as: spell-out;
}

Values for `speak`

auto: As long as the element is not display: block and is visibility: visible, text will be read aurally.
never: text will not be read aurally
always: text will be read aurally, regardless of display value or ancestor values of speak.

Values for `speak-as`

Related to speak as it gets into how the text will be read:

normal: Takes the browser’s default speak settings.
spell-out: Instructs the browser to spell a properties content instead of speaking out full words.
digits: Reads numbers one at a time, like 69 would be read “six nine”. Nice.
literal-punctuation: Spells out punctations (like semicolons) rather than treating them like pauses.
no-punctuation: Entirely skips punctuation.

How do you “style” speech?

The speak property is less about styling the speech of a screen reader than it is tailoring the experience of a site’s accessibility when screen readers are being used.

It’s tempting to think of styling speech in terms of gender, pitch, accent and other ways that we ourselves speak in real life, but that’s not the case with speak. That level of control is what is currently under consideration for voice in the CSS Speech Module.

More Information

Browser Support

There is no support at the time of this writing. It appears that Opera used to natively support the property with a -xv- prefix before the browser merged with the Blink rendering engine used by Chrome.

MDN talks about speak-as in relation to counter styles:

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

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

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

Firefox supports that, as I update this article.

Values for speak

Values for speak-as