How to let screen reader to announce extra text
Question
In the following simple html code, when screen reader (NVDA, VoiceOver on mac) is on.
When I tab into the input box, it will announce This is the test label (visible on the web page)
I want to let the screen reader to announce something extra like if you type something, more fields will appear . (hidden on the web page)
Wonder how do I achieve it?
<html>
<head>
test
</head>
<body>
<label class="large-label" for="your-name">
This is the test label
</label>
<input id="your-name" name="your-name" type="text" />
</body>
</html>
1 answers
solution1
0 ACCPTED 2020-06-18 06:42:52
Visually Hidden Text
You want visually hidden / screen reader only text. This can be achieved with the CSS class located in the snippet below and then applying that class to a <span> within the label.
It will be announced to screen readers but not visible.
.visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }
<label class="large-label" for="your-name"> This is the test label <span class="visually-hidden">if you type something, more fields will appear</span> </label> <input id="your-name" name="your-name" type="text" />A better way
In this instance I would question whether this should be visually hidden text.
With the example given of "if you type something, more fields will appear" that is information that is useful to everyone. It is especially useful to people with cognitive disabilities or an anxiety disorder as pre-warning about changes helps them not get confused / prepare for the change so it is not unexpected.
I would suggest instead having an instructions section at the start of the form or above the particular input that explains this to everyone.
We can then link the input label and the instructions to the input using aria-labelledby="id1 id2" and giving the label and instructions an ID.
You must keep the for="" on the label as a backup / so the label is correctly linked to the input, allowing you to click the label to focus the input if you desire.
The below is a rough example, you would have to use your judgement as to what works for your use case but it should give you the idea.
#hint{ width: 90%; padding: 5%; background-color: #333; color: #fff; font-size: 1.3rem; }
<p id="hint">If you type something, more fields will appear</p> <label class="large-label" for="your-name" id="your-name-label"> This is the test label </label> <input id="your-name" name="your-name" type="text" aria-labelledby="your-name-label hint"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.