In the case of certain rich dynamic widgets or functionalities or for completing a form, instructions are
required to guide users.
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.
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" id="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:
