{"id":244389,"date":"2017-03-10T09:03:56","date_gmt":"2017-03-10T16:03:56","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=244389"},"modified":"2020-03-28T05:51:39","modified_gmt":"2020-03-28T12:51:39","slug":"speak","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/speak\/","title":{"rendered":"speak"},"content":{"rendered":"\n<p>The <code>speak<\/code> property in CSS is for specifying <em>if<\/em> a browser should speak the content it reads, such as through a screen reader.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.module {\n  speak: never;\n  speak-as: spell-out;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n<h4 class=\"wp-block-heading\" id=\"values-for-speak\">Values for <code>speak<\/code><\/h4>\n\n\n<ul><li><code>auto<\/code>: As long as the element is not <code>display: block<\/code> and is <code>visibility: visible<\/code>, text will be read aurally.<\/li><li><code>never<\/code>: text will not be read aurally<\/li><li><code>always<\/code>: text will be read aurally, regardless of <code>display<\/code> value or ancestor values of <code>speak<\/code>.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"values-for-speakas\">Values for <code>speak-as<\/code><\/h4>\n\n\n<p>Related to <code>speak<\/code> as it gets into <em>how<\/em> the text will be read:<\/p>\n\n\n\n<ul><li><code>normal<\/code>: Takes the browser&#8217;s default <code>speak<\/code> settings.<\/li><li><code>spell-out<\/code>: Instructs the browser to spell a properties content instead of speaking out full words.<\/li><li><code>digits<\/code>: Reads numbers one at a time, like 69 would be read &#8220;six nine&#8221;. Nice.<\/li><li><code>literal-punctuation<\/code>: Spells out punctations (like semicolons) rather than treating them like pauses.<\/li><li><code>no-punctuation<\/code>: Entirely skips punctuation.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-do-you-style-speech\">How do you &#8220;style&#8221; speech?<\/h3>\n\n\n<p>The <code>speak<\/code> property is less about styling the speech of a screen reader than it is tailoring the experience of a site&#8217;s accessibility when screen readers are being used.<\/p>\n\n\n\n<p>It&#8217;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&#8217;s not the case with <code>speak<\/code>. That level of control is what is <a href=\"https:\/\/www.w3.org\/TR\/css3-speech\/#voice-char-props\" rel=\"noopener\">currently under consideration<\/a> for <code>voice<\/code> in the CSS Speech Module.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<p><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/lets-talk-speech-css\/\">Let\u2019s Talk About Speech\u00a0CSS<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/TR\/css3-speech\/\" rel=\"noopener\">CSS Speech Module spec<\/a><\/li><li><a href=\"http:\/\/tink.uk\/using-the-web-speech-api-to-simulate-css-speech-support\/\" rel=\"noopener\">Using the Web Speech API to simulate CSS Speech support<\/a><\/li><li><a href=\"http:\/\/stackoverflow.com\/questions\/27751738\/is-the-css-setting-speaknone-now-equivalent-to-aria-hidden-true\" rel=\"noopener\">Stack Overflow on Speak Support<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p>There is no support at the time of this writing. It appears that Opera <a href=\"http:\/\/www.css3.info\/preview\/speech\/\" rel=\"noopener\">used to natively support<\/a> the property with a <code>-xv-<\/code> prefix before the browser merged with the Blink rendering engine used by Chrome.<\/p>\n\n\n\n<p>MDN talks about speak-as <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@counter-style\/speak-as\" rel=\"noopener\">in relation to counter styles<\/a>:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;ul class=\"list\">\n  &lt;li>One&lt;\/li>\n  &lt;li>Two&lt;\/li>\n  &lt;li>Three&lt;\/li>\n  &lt;li>Four&lt;\/li>\n  &lt;li>Five&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@counter-style speak-as-example {\n  system: fixed;\n  symbols: \ue245 \ue246 \ue247 \ue248 \ue249;\n  suffix: \" \";\n  speak-as: numbers;\n}\n\n.list {\n  list-style: speak-as-example;    \n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/#feat=mdn-css_at-rules_counter-style_speak-as\" rel=\"noopener\">Firefox supports that<\/a>, as I update this article. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The speak property in CSS is for specifying if a browser should speak the content it reads, such as through a screen reader.<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[466,1179],"acf":[],"jetpack-related-posts":[{"id":326099,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-combine-upright\/","url_meta":{"origin":244389,"position":0},"title":"text-combine-upright","date":"November 25, 2020","format":false,"excerpt":"The text-combine-upright CSS property combines characters into the space of one character. The spec calls this \"horizontal-in-vertical\" composition which is a nice way of describing the use case: situations where you may need some characters in a vertical writing mode to display horizontally on the same line. span { text-combine-upright:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/text-combine-upright-ex.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":248860,"url":"https:\/\/css-tricks.com\/video-screencasts\/151-first-minutes-sublime-text\/","url_meta":{"origin":244389,"position":1},"title":"#151: The First Few Minutes with Sublime Text","date":"December 12, 2016","format":false,"excerpt":"Sublime Text is a pretty darn popular code editor. Despite its popularity and all the good things I've heard about it, I still lean heavily on other editors (Coda being my go-to for most projects) and have never given Sublime Text the time of day. Call it sheer laziness or\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14045,"url":"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/","url_meta":{"origin":244389,"position":2},"title":"display","date":"September 5, 2011","format":false,"excerpt":"Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. span.icon { display: inline-block; \/* Characteristics of block, but lays out inline *\/ } The default value for all elements is inline. Most \"User-Agent Stylesheets\" (the default styles\u2026","rel":"","context":"In \"display\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inline-block.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":326293,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/","url_meta":{"origin":244389,"position":3},"title":"text-orientation","date":"November 27, 2020","format":false,"excerpt":"The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode. Basically, it rotates either the line by 90\u00b0 clockwise to help control how vertical languages are displayed \u2014 much like the way text-combine-upright rotates groups of characters within a line of text in a\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253584,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","url_meta":{"origin":244389,"position":4},"title":"font-display","date":"April 17, 2017","format":false,"excerpt":"The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet. @font-face { font-family: 'MyWebFont'; \/* Define the custom font name *\/ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); \/* Define where the font can\u2026","rel":"","context":"In \"font-display\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","url_meta":{"origin":244389,"position":5},"title":"text-underline-position","date":"April 3, 2015","format":false,"excerpt":"The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. .element { text-underline-position: under; } Values These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation: auto: the default. The browser will decide between placing the\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244389"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244389"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244389\/revisions"}],"predecessor-version":[{"id":305864,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244389\/revisions\/305864"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244389"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}