Mixing
Make an HTML textarea Voice Over readable
<div>
<textarea placeholder="Type a message...."> </textarea>
</div>
How to make this text area readable by the voice over software?
html css voiceover screen-readers
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
add a comment |
<div>
<textarea placeholder="Type a message...."> </textarea>
</div>
How to make this text area readable by the voice over software?
html css voiceover screen-readers
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
add a comment |
<div>
<textarea placeholder="Type a message...."> </textarea>
</div>
How to make this text area readable by the voice over software?
html css voiceover screen-readers
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
<div>
<textarea placeholder="Type a message...."> </textarea>
</div>
How to make this text area readable by the voice over software?
html css voiceover screen-readers
html css voiceover screen-readers
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
asked Nov 21 '18 at 7:13
Chinmaya Ranjan BiswalChinmaya Ranjan Biswal
298
298
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
What part are you trying to make readable?
- the contents of the textarea?
- the contents as you're typing?
- a label for the textarea?
- all of the above?
When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.
As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).
If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)
So you'd want something like:
<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>
Make sure you use the for attribute of the <label> to associate the label with the textarea.
Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
add a comment |
In bootstrap, we have a class called .sr-only for screen reader.
HTML
<div>
<span class="sr-only">Readable text</span>
<textarea placeholder="Type a message...."> </textarea>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406941%2fmake-an-html-textarea-voice-over-readable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
What part are you trying to make readable?
- the contents of the textarea?
- the contents as you're typing?
- a label for the textarea?
- all of the above?
When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.
As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).
If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)
So you'd want something like:
<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>
Make sure you use the for attribute of the <label> to associate the label with the textarea.
Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
add a comment |
What part are you trying to make readable?
- the contents of the textarea?
- the contents as you're typing?
- a label for the textarea?
- all of the above?
When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.
As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).
If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)
So you'd want something like:
<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>
Make sure you use the for attribute of the <label> to associate the label with the textarea.
Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
add a comment |
What part are you trying to make readable?
- the contents of the textarea?
- the contents as you're typing?
- a label for the textarea?
- all of the above?
When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.
As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).
If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)
So you'd want something like:
<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>
Make sure you use the for attribute of the <label> to associate the label with the textarea.
Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
What part are you trying to make readable?
- the contents of the textarea?
- the contents as you're typing?
- a label for the textarea?
- all of the above?
When focus moves to a textarea that already has contents (from typing previously), the text should be selected and the entire text should already be read by voiceover. If you start typing, the previously (automatically) selected text will be cleared and whatever you type will replace it.
As you type in the field, the characters or words (depending on your settings) will be spoken as you type it, at least on OSX. On iOS, the onscreen keyboard will read every letter as you type (unless you have a bluetooth keyboard for iOS, then it will be a similar experience to OSX, namely that characters or words will be announced as you type).
If you want a label, just use the <label> element. The placeholder attribute on the <textarea> may or may not be read by a screen reader and the spec for placeholder says to not use it as a replacement for a label. (See the warning on the spec page.)
So you'd want something like:
<label for="mytext">here's my label</label>
<textarea id="mytext"></textarea>
Make sure you use the for attribute of the <label> to associate the label with the textarea.
Note: The "sr-only" class from bootstrap (see What is sr-only in Bootstrap 3?) is for visually hiding text that can still be read by screen readers. Just adding a <span> with hidden text will not associate that text with the textarea element.
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
answered Nov 21 '18 at 23:21
slugoliciousslugolicious
4,91411318
4,91411318
add a comment |
add a comment |
In bootstrap, we have a class called .sr-only for screen reader.
HTML
<div>
<span class="sr-only">Readable text</span>
<textarea placeholder="Type a message...."> </textarea>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
add a comment |
In bootstrap, we have a class called .sr-only for screen reader.
HTML
<div>
<span class="sr-only">Readable text</span>
<textarea placeholder="Type a message...."> </textarea>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
add a comment |
In bootstrap, we have a class called .sr-only for screen reader.
HTML
<div>
<span class="sr-only">Readable text</span>
<textarea placeholder="Type a message...."> </textarea>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
In bootstrap, we have a class called .sr-only for screen reader.
HTML
<div>
<span class="sr-only">Readable text</span>
<textarea placeholder="Type a message...."> </textarea>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
answered Nov 21 '18 at 7:19
blackcityhenryblackcityhenry
19017
19017
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406941%2fmake-an-html-textarea-voice-over-readable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
