forked from w3c/wai-showcase-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathspeech.html
More file actions
200 lines (183 loc) · 14.1 KB
/
Copy pathspeech.html
File metadata and controls
200 lines (183 loc) · 14.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text to Speech - Web Accessibility Perspectives</title>
<script src="lib/modernizr.custom.js"></script>
<meta name="viewport" content="width=device-width">
<link href="https://www.w3.org/WAI/wai-main.css" rel="stylesheet" type="text/css" />
<link href="wai-style-changes.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]><link rel="stylesheet" href="/WAI/ie-old.css" type="text/css" media="all" /><![endif]-->
<link href="lib/ableplayer.min.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.12.3.min.js"></script>
<script src="lib/js.cookie.js"></script>
<script src="lib/ableplayer.min.js"></script>
</head>
<body class="editors-draft">
<header>
<div id="controls"><ul>
<li><a href="#skip"><img src="https://www.w3.org/Icons/downinpage.png" alt="" /> Skip to Content</a></li>
<li> | <a href="/WAI/changedesign">Change text size or colors</a></li>
</ul></div>
<div id="masthead"><p id="logos"><a href="/" title="W3C Home"><img alt="W3C logo" src="https://www.w3.org/Icons/w3c_home" /></a><a href="/WAI/" title="WAI Home"><img alt="Web Accessibility initiative" src="https://www.w3.org/WAI/images/wai-temp" /></a></p></div>
<div id="tagline"><p>WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities</p></div>
</header>
<nav id="nav">
<h2>Site Navigation</h2>
<p id="w3cnav"><a href="https://www.w3.org/">W3C Home</a></p>
<p id="subhomenav"><a href="/WAI/">Web Accessibility Initiative (WAI) Home</a></p>
<ol id="nav1" type="A">
<li class="current-nav"><a href="../gettingstarted/Overview.html" shape="rect">Getting Started</a>
<ul>
<li class="nav-head">Using the Web
<ol type="1">
<li><a href="../users/browsing.html" shape="rect">Better Web Browsing Tips</a></li>
<li><a href="../users/inaccessible.html" shape="rect">Contact Inaccessible Websites</a></li>
</ol>
</li>
<li class="current-nav nav-head">Accessibility Basics
<ol type="1">
<li><a href="/standards/webdesign/accessibility" shape="rect">Accessibility - W3C <img src="/Icons/tr.png" alt="W3C website" /></a></li>
<li><a shape="rect" href="accessibility.php">Introduction to Accessibility</a></li>
<li class="current-nav"><a href="Overview.html">Impact & Benefits Videos</a>
<ul>
<li><a href="keyboard.html">Keyboard</a></li>
<li><a href="contrast.html">Contrast</a></li>
<li><a href="layout.html">Layout</a></li>
<li id="current-node" class="current-nav"><span class="label"><span id="current-icon">»</span>Speech</span></li>
<li><a href="large.html">Controls</a></li>
<li><a href="captions.html">Captions</a></li>
<li><a href="customizable.html">Customizable</a></li>
<li><a href="voice.html">Voice</a></li>
<li><a href="understandable.html">Understandable</a></li>
<li><a href="notifications.html">Notifications</a></li>
</ul>
</li>
<li><a href="components.php" shape="rect">Essential Components</a></li>
<li><a href="../bcase/Overview.html" shape="rect">Business Case</a></li>
<li><a href="/WAI/gettingstarted/tips/index.html">Tips for Getting Started</a></li>
</ol>
</li>
</ul>
</li>
<li><a href="../users/Overview.html" shape="rect">Designing for Inclusion</a></li>
<li><a href="../guid-tech.html" shape="rect">Guidelines & Techniques</a></li>
<li><a href="../managing.html" shape="rect">Planning & Implementing</a></li>
<li><a href="../eval/Overview.html" shape="rect">Evaluating Accessibility</a></li>
<li><a href="../train.html" shape="rect">Presentations & Tutorials</a></li>
<li><a href="../about-links.html" shape="rect">Getting Involved with WAI</a></li>
</ol>
<div id="nav-static">
<div class="nav-discover">
<p><a href="https://www.w3.org/WAI/yourWAI" shape="rect"><strong><u>Discover new resources</u></strong> for people with disabilities, policy makers, managers, and you!</a></p>
</div>
<p class="translations"><a href="https://www.w3.org/WAI/wai-translations" shape="rect"><img src="https://www.w3.org/WAI/images/translations-med-1" alt="characters from different languages" /> Translations</a></p>
</div>
</nav>
<main id="main" role="main">
<div class="main-inner">
<div id="skipwrapper"><a id="skip" shape="rect" name="skip">-</a></div>
<h1 class="attach_permalink">Text to Speech <br />Web Accessibility Perspectives</h1>
<h2 id="intro" class="no-display">Introduction</h2>
<p>Web accessibility is essential for people with disabilities but useful for many more. Learn about some of the accessibility considerations and how they benefit everyone in different situations.</p>
<h2 id="film" class="no-display">Video on Text to Speech</h2>
<div class="video-container">
<video preload="metadata" poster="stills/text-to-speech.jpg" data-able-player data-youtube-id="YOUTUBEID" data-youtube-desc-id="YOUTUBEID-AD">
<track src="captions/speech-en.vtt" label="English captions" kind="captions" srclang="en" default=""></track>
<track kind="descriptions" src="captions/speech-desc-en.vtt" label="Audio Descriptions" srclang="en" />
</video>
</div>
<h2 id="what">What is Text to Speech?</h2>
<p>Content needs to be coded so that it can be read aloud by text to speech software. Many computers and mobile devices today have built in text to speech software. People with disabilities may use specialized text to speech software called screen readers. These can also highlight the text as it is being read aloud, for people to see and hear the content at the same time.</p>
<h2 id="who">Who depends on this feature?</h2>
<ul>
<li>People who are blind and cannot see what is on the screen;</li>
<li>People who have partial sight (often legally blind) and cannot see certain types of content;</li>
<li>People with some forms of dyslexia and other cognitive and learning disabilities, who need to see and hear the text to better understand it.</li>
</ul>
<h2 id="others">What are the additional benefits?</h2>
<ul>
<li>Content can be read aloud for people who cannot read the written language;</li>
<li>Content can be read aloud for people who prefer to listen, for example while multi-tasking.</li>
</ul>
<h2 id="action">What needs to happen for this to work?</h2>
<p>Using semantic <acronmy>HTML</acronmy> markup for structures, such as headings, paragraphs, lists, forms, and tables is essential for text to speech to work. Also, text alternatives are necessary for images, icons, and other non-text content. Screen reading software announces these structures, and can also read text alternatives for images when they are present.</p>
<h2 id="resources">Learn more</h2>
<ul>
<li><strong>Accessibility Principle:</strong>
<ul>
<li><a href="https://www.w3.org/WAI/intro/people-use-web/principles#alternatives">Text alternatives for non-text content</a></li>
<li><a href="https://www.w3.org/WAI/intro/people-use-web/principles#adaptable">Content can be presented in different ways</a></li>
</ul>
</li>
<li><strong>Getting Started:</strong>
<ul>
<li><a href="https://www.w3.org/WAI/gettingstarted/tips/writing.html#write-meaningful-text-alternatives-for-images">Write meaningful text alternatives for images</a></li>
<li><a href="https://www.w3.org/WAI/gettingstarted/tips/writing.html#use-headings-to-convey-meaning-and-structure">Use headings to convey meaning and structure</a></li>
<li><a href="https://www.w3.org/WAI/gettingstarted/tips/developing.html#identify-page-language-and-language-changes">Identify page language and language changes</a></li>
</ul>
</li>
<li><strong>Easy Check:</strong>
<ul>
<li><a href="https://www.w3.org/WAI/eval/preliminary.html#images">Image text alternatives ("alt text")</a></li>
<li><a href="https://www.w3.org/WAI/eval/preliminary.html#structure">Basic Structure Check</a></li>
</ul>
</li>
<li><strong>User Story:</strong>
<ul>
<li><a href="https://www.w3.org/WAI/intro/people-use-web/stories.html#accountant">Ms. Laitinen, Accountant with blindness</a></li>
<li><a href="https://www.w3.org/WAI/intro/people-use-web/stories.html#teenager">Ms. Kaseem, Teenager with deaf-blindness</a></li>
<li><a href="https://www.w3.org/WAI/intro/people-use-web/stories.html#classroomstudent">Ms. Olsen, Classroom student with attention deficit hyperactivity disorder (ADHD) and dyslexia</a></li>
</ul>
</li>
<li><strong>WCAG 2.0:</strong> <a href="https://www.w3.org/WAI/WCAG20/quickref/?tags=text-alternatives">Success Criteria relating to "text to speech"</a></li>
<li><strong>Mobile Web Design:</strong>
<ul>
<li><a href="https://www.w3.org/WAI/mobile/experiences.html#non-text">Non-text objects (images, sound, video) with no text alternative</a></li>
<li><a href="https://www.w3.org/WAI/mobile/experiences.html#visual-formatting">Information conveyed only using CSS (visual formatting)</a></li>
<li><a href="https://www.w3.org/WAI/mobile/experiences.html#link-label">Non descriptive link label</a></li>
</ul>
</li>
<li><strong>Tutorial:</strong> <a href="https://www.w3.org/WAI/tutorials/">Web Accessibility Tutorials</a> (several related topics)</li>
</ul>
<section aria-labelledby="more">
<h2 id="more">Impact & Benefits Videos</h2>
<ul class="video-listing">
<li><a href="keyboard.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Keyboard Compatibility</span></a></li>
<li><a href="contrast.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Colors with Good Contrast</span></a></li>
<li><a href="layout.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Clear Layout and Design</span></a></li>
<li class="current"><a><span class="video-thumb" aria-label="Current: "><img src="img/video-thumb-demo.jpg" alt=""></span><span> Text to Speech</span></a></li>
<li><a href="large.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Large Links, Buttons, and Controls</span></a></li>
<li><a href="captions.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Video Captions</span></a></li>
<li><a href="customizable.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Customizable Text</span></a></li>
<li><a href="voice.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Voice Recognition</span></a></li>
<li><a href="understandable.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Understandable Content</span></a></li>
<li><a href="notifications.html"><span class="video-thumb"><img src="img/video-thumb-demo.jpg" alt=""></span><span> Notifications and Feedback</span></a></li>
</ul>
</section>
<aside class="side-box contribute" role="complementary">
<h2 class="heading">Help improve this page</h2>
<p>Please share your ideas, suggestions, or comments via email to the publicly-archived list <a href="mailto:wai-eo-editors@w3.org?subject=%5bPerspectives%20-%20Keyboard%5d">wai-eo-editors@w3.org</a> or via GitHub.</p>
<div class="buttons">
<a class="btn" title="Publicly archived list" href="mailto:wai-eo-editors@w3.org?subject=%5bPerspectives%20-%20Speech%5d">E-mail</a>
<a class="btn" href="https://github.com/w3c/wai-showcase-examples/edit/gh-pages/speech.html">Fork & edit on GitHub</a>
<a class="btn" href="https://github.com/w3c/wai-showcase-examples/issues/new?title=%5bPerspectives%20-%20Speech%5d">New GitHub Issue</a>
</div>
</aside>
</div>
</main>
<footer id="footer" role="contentinfo">
<div>
<h2><strong>Document Information</strong></h2>
<p><strong>Status:</strong> Updated 6 May 2016. <br clear="none" /><strong>Editor and project lead:</strong> <a href="https://www.w3.org/People/shadi">Shadi Abou-Zahra</a>. Developed by the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a> with support from the <a href="https://www.w3.org/WAI/DEV/">WAI-DEV project</a>, co-funded by the European Commission. <a href="acknowledgements.html">Acknowledgements</a>.</p>
<div class="footer-nav">
<p>[<a href="https://www.w3.org/WAI/sitemap.html" shape="rect">WAI Site Map</a>] [<a href="https://www.w3.org/WAI/sitehelp.html" shape="rect">Help with WAI Website</a>] [<a href="https://www.w3.org/WAI/search.php" shape="rect">Search</a>] [<a href="/WAI/contacts" shape="rect">Contacting WAI</a>] <br clear="none" /><strong>Feedback welcome to <a href="mailto:wai-eo-editors@w3.org" shape="rect">wai-eo-editors@w3.org</a></strong> (a publicly archived list) or <a href="mailto:wai@w3.org" shape="rect">wai@w3.org</a> (a WAI staff-only list).</p>
</div>
<div class="copyright">
<p>Copyright © 2016 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.</p>
</div>
</div>
</footer>
<script src="lib/sharebox.js"></script>
</body>
</html>