speak-as
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
css
/* 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 particular 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.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | auto |
Computed value | as specified |
Formal syntax
Examples
Setting the spoken form for a counter
HTML
html
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
css
@counter-style speak-as-example {
system: fixed;
symbols: ;
suffix: " ";
speak-as: numbers;
}
.list {
list-style: speak-as-example;
}
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-speak-as |
Browser compatibility
BCD tables only load in the browser
See also
list-style
,list-style-image
,list-style-position
symbols()
, the functional notation creating anonymous counter styles.