Use text to speech to let users listen to the content of web pages.
When the website has a text so speech ability, use the text to speech button to let the user trigger the text to speech function to read the content on the current web page out loud.
The text to speech button should be enabled on:
When the website has a text to speech ability, the text to speech button should not be enabled on:
If the website requires the text to speech button anyway, this can of course be overruled and the text to speech button can be placed on any page and on any resolution where it is required.
The text to speech button triggers the text to speech ability of the website to read the content of the current web page out loud so that users can listen to the page.
Depending on the text to speech solution that is used in the website, the behavior can be different.
The text to speech button should always be placed just below the Heading 1.
Text to speech solutions read the content of web pages out loud so that a website user can listen to the web page. There are used to make content available to a larger population of internet such as those with literacy difficulties, learning disabilities, reduced vision, language learners, the growing elderly population, and anyone else looking for a simpler way to access digital content on the go. Text to speech solutions are specifically very useful for users for longer texts.
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>{{ 'Listen' }}</span>
</button>
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
</button>
/* No context defined for this component. */
.readspeaker-button {
@include theme('color', 'color-tertiary--lighten-1', 'readspeaker-color');
display: inline-block;
min-height: 1.8rem;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
&:focus,
&:hover {
i {
@include theme('background-color', 'color-primary--lighten-5', 'button-secondary-hover-background');
@include theme('color', 'color-primary', 'button-secondary-hover-color');
@include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
}
}
i {
@include theme('color', 'color-primary', 'button-secondary-color');
@include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
display: inline-block;
margin-right: .3rem;
padding: .1em .3em;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
border: 2px solid;
border-radius: border-radius('radius-1');
font-size: .9rem;
vertical-align: middle;
}
span {
font-size: .6rem;
vertical-align: middle;
}
}