Connect info to input

Question

I am trying to make my webpage user friendly for screenreaders. How can I correctly connect the blue information text on the right side to the input field? The reason for why I am asking is that the screenreader user will not get the information before after he jumps forward. E.g. if the input field is a phone number, and the informations says "you have to start with the land code", then you will not know this before it ruins the users flow. He would then need to jump back to fix it. I would like to have the information text on the right side and not move it to the left side, since this is more appealing.

Thank you in advance!

Answer 1

You can use Accessible Rich Internet Applications (ARIA) to help guide the screen reader.

This page has a great example. Simply use the aria-describedby attribute to tell the screen reader which element describes the input.

<input type="text" aria-describedby="extrainfo">
<div role="tooltip" id="extrainfo">Some info</div>

Answer 2

you are looking for aria-describedby.

This is used for adding additional information that is read out after semantically derived information.

<label for="input1">Label</label>
<input id="input1" aria-describedby="info-box-1">
<span id="info-box-1">Some Info</span>

In the example above it will read "Label" and then "Some Info"

Support and other issues

Warning - support for aria-describedby is really not as good as you might think.

If information is truly important (i.e. the element will not make sense without it) then you should revert to using visually hidden text instead.

I have a Stack Overflow answer on the class you should use for visually hidden text instead of the built in sr-only class in most libraries.

Please note there are certain times you cannot use this (i.e. within a <select>s <option>, but for essential information this is the only 100% supported way to do it (all the way back to IE6)

Note how in the following example I use aria-hidden on the "some info" span to hide it and then add a visually hidden span directly within the label.

.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 for="input1">Label <span class="visually-hidden">,Some Info</span></label>
<input id="input1">
<span aria-hidden="true">Some Info</span>