Providing form feedback accessibly helps users submit data more accurately and reduces the chance for error. For learning resources, easy access to feedback supports the learning process; for forms collecting data, good feedback helps to reduce the chance of input errors being made.
WAI-ARIA live regions can be used for this. Adding content inside a live region tells assistive technologies to announce the content to the user—without users having to move to that part of the page.
In this example, the user is presented with a multiple choice quiz question: "Who's the biggest selling recording artist?" When they click the "check answer" button, a message provides feedback on their answer. The markup looks like this:
<form> <fieldset> <legend>Who's the biggest selling recording artist?</legend> <div> <label><input type="radio" name="answer" value="michael"> Michael Jackson</label> <label><input type="radio" name="answer" value="elvis"> Elvis Presley</label> <label><input type="radio" name="answer" value="iggy"> Iggy Pop</label> <label><input type="radio" name="answer" value="madonna"> Madonna</label> </div> </fieldset> <div aria-live="polite"> </div> <div class="buttons"> <button type="button" class="check">check answer</button> <button type="submit" disabled>next question</button> </div> </form>
Note the empty
<div> with the
aria-live="polite" attribute. This is our live region. When we add content inside it (text or HTML elements containing text), screen readers will announce that content.
For instance, if the user activates the "check answer" button without having chosen an answer, the live region will be populated with the message, "Please choose an answer." This message appears to sighted users as a highlighted box, and it’s heard as speech by an assistive-technology user.
If, upon pressing "check answer," the user has the correct answer checked, the message congratulates them. In addition, the "next question" button is enabled (by removing the
disabled attribute) and focused.
$('[type="submit"]') .removeAttr('disabled') .focus();
Using the screen reader NVDA with Firefox, this produces the screen reader speech output, "Elvis is correct! You can go to the next question, next question button." That is, the live region is announced, and then the newly focused element is announced. Three important pieces of information are provided: The user has chosen correctly, they can continue, and the button currently in focus will allow them to continue. Had we used an
aria-live value of
assertive, the live region's message would have overridden the focus change and "next question button" would not have been announced.
Video: Form feedback with NVDA using a live region
An editor is available to try out the preceding live region example. Experiment by removing the live region and try operating it with just the keyboard, with your eyes closed.