The speak CSS property is used to control whether an element’s content is rendered by a speech synthesizer. It determines whether the text content of an element is spoken out loud by assistive technologies or other speech-based applications.

The speak property accepts several values:

  • auto: This is the default value. The element’s content is spoken according to the default speech rules.
  • none: The element’s content is not spoken by speech synthesizers. It is effectively silent.
  • normal: The element’s content is spoken using normal speech synthesis rules.

Here’s an example:

.spoken-element {
  speak: none;

In this example, the .spoken-element class sets the speak property to none. This ensures that the content of the element will not be spoken by speech synthesizers.

It’s important to note that the speak property primarily affects the behavior of assistive technologies and speech-based applications. It allows developers to control how an element’s content is rendered in those contexts. However, it does not have any impact on how the content is displayed visually or interacted with in a typical web browsing scenario.

The speak property is commonly used in combination with other accessibility-related CSS properties and techniques to enhance the experience for users who rely on speech-based technologies or screen readers. It helps to provide appropriate rendering and control over spoken content, ensuring a better accessibility experience for all users.