Screen Reader Instructions

In the case of certain rich dynamic widgets or functionalities or for completing a form, instructions are required to guide users.

screenshot of a web form — Figure 1 An example of registration form where visual instructions are provided regarding the form

Any specific hidden instructions CAN be given for screen reader users. The instructions SHOULD also be accessible for its users. Hidden instructions could be given in scenarios where the dynamic or context change happens after users select any option from the drop-down list, or selection of any pagination link, or in case of sliders wherein if the value is changed, the context change happens and so on.

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

The instructions that needs to be hidden for sighted users SHOULD be placed off-screen using proper CSS hiding class. For more information on different techniques to hide content visually, refer to https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/ .
In certain scenarios where dynamic instructions or notifications are made available for all users or users who use screen reader, appropriate live region or role SHOULD be defined. For more information on how to handle dynamic updates, refer Dynamic Update, Alerts and Notification components.

Instructions related to completion of form or any specific information to be filled or regarding the required/optional field SHOULD be available for all users. For more information, refer to Multi-page Forms and Form Control Status components.
For example,

<h1>Dynamic Update</h1>
<h2>Contact US</h2>
<h3>Please Select Your Query</h3>
<p>
    Please select the appropriate item from the drop-down menu below so we can
    route your inquiry to the correct person.
</p>
<label for="questionType">Select a Topic:</label>
<select class="questionType" name="questionType" aria-controls="inquiry_desc">
    <option value="please select">Please Select Your Query</option>
    <option value="Cert Flash Cards Online">Cert Flash Cards Online</option>
    <option value="Corporate Sales">Corporate Sales</option>
    <option value="Defective Products">Defective Products</option>
    <option value="Digital Products Help">Digital Products Help</option>
    <option value="Education Sales">Education Sales</option>
    <option value="Network Simulator">Network Simulator</option>
    <option value="Government Sales">Government Sales</option>
    <option value="Pearson IT Certification Practice Test">
        Pearson IT Certification Practice Test
    </option>
</select>
<button id="goButton">Go</button>
<div id="inquiry_desc" role="region">
    <h2 id="selectedHeading">No Inquiry Selected</h2>
    <p id="selectedParagraph">Select an Inquiry to view its description</p>
</div>

For more information where instructions could be required, refer to these components:

Screen Reader Instructions

Implementation

Why is it important