Posted by Daniel Tyreus ● Oct 5, 2019 2:05:25 PM

Styling Speakable Content With CSS

Speakable web content is designed primarily to be read out loud by digital assistants like Google Assistant or Alexa. While many web crawlers can tell the difference between normal text on a web page and text that is supposed to be speakable, browsers currently do not display it differently. But with CSS styling you can give your readers a visual clue about which text is also speakable.

Most HTML markup is designed so that it web browsers will interpret it and display it in a way that is easy for viewers to understand. For example, text inside heading tags is often given a bigger font size than text inside paragraph tags. By default this is not the case with speakable markup.

In a previous post I showed three different ways to indicate what content is speakable in your HTML using the Speakable Specification. If you choose the method with CSS selectors, it's also easy to add some styles to make the speakable content visually different from other text.

So for example, using the example from the previous blog post with the following JSON+LD structured data:

  "@context": "",
  "@type": "WebPage",
  "speakable": {
    "@type": "SpeakableSpecification",
    "cssSelector": [".soundcheck-speakable"]  

You could also add a CSS style

.soundcheck-speakable {
  text-decoration: underline dotted #000;

to give a simple dotted underline to any speakable section.

I'm sure you can actually be much more creative than that. We've created a Sketch file with a few mockups, ideas, and even some custom icons that's free to download.

Dowload Free Idea Files

Have you made something cool? Contact us and we will mention it in our blog or share it on social media.

Topics: speakable, markup, CSS