speak

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

• Let’s Talk About Speech CSS
• CSS Speech Module spec
• Using the Web Speech API to simulate CSS Speech support
• Stack Overflow on Speak Support

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.