The speak-as
descriptor specifies how a counter symbol constructed with a given @counter-style
will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.
Syntax
/* Keyword values */ speak-as: auto; speak-as: bullets; speak-as: numbers; speak-as: words; speak-as: spell-out; /* @counter-style name value */ speak-as: <counter-style-name>;
Values
auto
- If the value of
speak-as
is specified asauto
, then the effective value ofspeak-as
will be determined based on the value of thesystem
descriptor:- If the value of
system
isalphabetic
, the effective value ofspeak-as
will bespell-out
. - If
system
iscyclic
, the effective value ofspeak-as
will bebullets
. - If
system
isextends
, the value ofspeak-as
will be the same as ifspeak-as: auto
is specified on the extended style. - For all other cases, specifying
auto
has the same effect as specifyingspeak-as: numbers
.
- If the value of
bullets
- A phrase or an audio cue defined by the user agent for representing an unordered list item will be read out.
numbers
- The numerical value of the counter will be read out in the document language.
words
- The user agent will generate a counter value as normal and read it out as a word in the document language.
spell-out
- The user agent will generate a counter representation as normal and would read it out letter by letter. If the user agent doesn't know how to read out a partiular counter symbol, the user agent might read it out as if the value of
speak-as
wasnumbers
. <counter-style-name>
- The name of another counter style, specified as a
<custom-ident>
. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying thefallback
descriptor. If the specified style does not exist,speak-as
defaults toauto
.
Accessibility concerns
Assistive technology support is very limited for the speak-as
property. Do not rely on it to convey information critical to understanding the page's purpose.
Let's Talk About Speech CSS | CSS Tricks
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | auto |
Computed value | as specified |
Formal syntax
auto | bullets | numbers | words | spell-out | <counter-style-name>where
<counter-style-name> = <custom-ident>
Examples
Setting the spoken form for a counter
HTML
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
CSS
@counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3 The definition of 'speak-as' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
speak-as | Chrome No support No | Edge No support No | Firefox Full support 33 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 33 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
list-style
,list-style-image
,list-style-position
symbols()
, the functional notation creating anonymous counter styles.