{"id":20,"date":"2008-02-18T11:27:09","date_gmt":"2008-02-18T15:27:09","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/2008\/02\/18\/say-instead-part-of-css3\/"},"modified":"2012-05-24T22:55:51","modified_gmt":"2012-05-25T02:55:51","slug":"say-instead-part-of-css3","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2008\/02\/18\/say-instead-part-of-css3\/","title":{"rendered":"&#8220;Say-Instead&#8221; Part of CSS3"},"content":{"rendered":"<p>Again while in Austin, Texas, I was talking with <a title=\"Charles L. Chen creator of CLiCk Speak and Fire vox\" href=\"http:\/\/www.clcworld.net\/\">Charles L. Chen<\/a> about his <a title=\"CLiCk Speak Firefox extension\" href=\"http:\/\/clickspeak.clcworld.net\/\">CLiCk Speak<\/a> Firefox extension and he showed me that by using the new CSS3 property called &#8220;<a title=\"Say-Instead at the bottom of page\" href=\"http:\/\/www.w3.org\/TR\/css3-speech\/\">say-instead<\/a>&#8220;, which is used to allow screen readers to pronounce words or phrases correctly. Listed below is a few examples of phrases you might use in your posts, which a screen reader would pronounce incorrectly.<\/p>\n<p>The first part of the line is the way you typed it and the second is the way it should be spoken.<\/p>\n<ul>\n<li><span class=\"streets\"><span>Dr. Kapp versus Dr. Cop<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Homepage versus Home Page<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Pope John Paul II versus Pope John Paul the Second<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Rocky II versus Rocky 2<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Godfather II versus The Godfather Part 2<\/span><\/span><\/li>\n<\/ul>\n<p><span>If the say-instead property were officially part of CSS3 and available to use in browsers you would have to add to your CSS file the different classes for each set of words or sets of words you want to have said properly. A few examples of this would be as follows:<\/span><\/p>\n<p><span>.sayinstead_drkapp { say-instead: &#8220;doctor cop&#8221;;}<\/span><\/p>\n<p><span>.sayinstead_homepage { say-instead: &#8220;home page&#8221;;}<\/span><\/p>\n<p><span>.sayinstead_popejp2 { say-instead: &#8220;Pope John Paul the Second&#8221;;}<\/span><\/p>\n<p><span>.sayinstead_rocky2 { say-instead: &#8220;Rocky Two&#8221;;}<\/span><\/p>\n<p><span>.sayinstead_godfather2 { say-instead: &#8220;The Godfather Part Two&#8221;;}<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span>The way you need to get these to work is put a &lt;SPAN&gt; tag around each set of words that needs to have the &#8220;say-instead&#8221; text read out loud. Below is the example of the code:<\/span><\/p>\n<ul>\n<li><span class=\"streets\"><span>Dr. Kapp versus &lt;span class=&#8221;sayinstead_drkapp&#8221;&gt;Dr. Kapp&lt;\/span&gt;<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Homepage versus &lt;span class=&#8221;sayinstead_homepage&#8221;&gt;Homepage&lt;\/span&gt;<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Pope John Paul II versus &lt;span class=&#8221;sayinstead_popejp2&#8243;&gt;Pope John Paul II&lt;\/span&gt;<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Rocky II versus &lt;span class=&#8221;sayinstead_rocky2&#8243;&gt;Rocky II&lt;\/span&gt;<\/span><\/span><\/li>\n<li><span class=\"streets\"><span>Godfather II versus &lt;span class=&#8221;sayinstead_godfather2&#8243;&gt;The Godfather II&lt;\/span&gt;<\/span><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>I&#8217;m spent a bunch of time trying to get this to work in this post and was having trouble, I think part of the problem is that I&#8217;m trying to do this inside of WordPress. I created an example on my website to use as the test example for the <a title=\"say-instead etst example\" href=\"http:\/\/localhost\/testarea\/jfciii\/sayinstead.shtml\">&#8220;say-instead&#8221; CSS3 property<\/a>.<\/p>\n<p>Here is the <a title=\"say-instead example by Charles L. Chen\" href=\"http:\/\/clc4tts.clcworld.net\/css_say-instead.html\">example<\/a> created by Charles L. Chen on his website for the &#8220;say-instead&#8221; CSS3 property. Please give the example page a try by using a screen reader such as <a title=\"JAWS screen reader by Freedom Scientific\" href=\"http:\/\/www.freedomscientific.com\/fs_products\/software_jaws.asp\"><span style=\"color: #000000;\">JAWS<\/span><\/a>, <a title=\"Window-Eyes by GW Micro\" href=\"http:\/\/www.gwmicro.com\/Window-Eyes\/\"><span style=\"color: #000000;\">Window-Eyes<\/span><\/a>, or the Firefox extension <a title=\"Fire Vox a Firefox extensin by Charles L. Chen and others\" href=\"http:\/\/firevox.clcworld.net\/\"><span style=\"color: #000000;\">Fire Vox<\/span><\/a> created by Charles L. Chen. See my post for more details about <a title=\"my blog post on the Fire vox Firefox extensio.\" href=\"http:\/\/http:\/\/www.jfciii.com\/blog\/2008\/02\/08\/the-fire-vox-firefox-extension-is-a-free-screen-reader\/\">Fire Vox<\/a>.<\/p>\n<p>I hope this information is helpful while building your websites and trying to make them as accessible as possible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Again while in Austin, Texas, I was talking with Charles L. Chen about his CLiCk Speak Firefox extension and he showed me that by using the new CSS3 property called &#8220;say-instead&#8220;, which is used to allow screen readers to pronounce &hellip; <a href=\"http:\/\/www.jfciii.com\/blog\/2008\/02\/18\/say-instead-part-of-css3\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,91,90,113,89,100,88,20,101],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-22","category-accessibility","category-charles-l-chen","category-click-speak","category-fire-vox","category-firefox","category-jaws","category-say-instead","category-web-standards","category-window-eyes"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":161,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions\/161"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}