The below code contains multiple div so jaws read div by div correctly, but I want to make jaws to focus and read in different way.
<div class="row paddingBottom2Pcnt">
<div class="col-xs-5">
<label class="textBold textBold_desktop control-label">Date of Birth</label>
</div>
<div class="col-xs-7">
<label class="textBold textBold_desktop control-label">Social Number
</label>
</div>
<div class="col-xs-5">
<label class="lblSecondary textTransformNone"> 08/08/1994
</label>
</div>
<div class="col-xs-7">
<label class="lblSecondary textTransformNone">
XXX-XX-6745
</label>
</div>
</div>
Jaws take focus on div by div, but I want 1st focus on date of birth and that value and then Social Number and that value. Is there any way I can do it this way?
The down arrow key with screen readers (JAWS and NVDA) will essentially walk the DOM (*) (document object model) so whatever order your HTML code is in will be the order that JAWS reads it.
So one way to get the order you want is to change the order of your code so that DOB is first, then the date, then the SSN label, then the SSN number. You can use CSS to make things line up properly. For example, instead of four sibling <div>
elements with one parent <div>
container, you can have a <div>
parent for the two DOB related elements and another <div>
container for the SSN info, and those two <div>
elements are siblings.
<div class="row paddingBottom2Pcnt">
<div id="newParentContainer1">
<div>
<label class="textBold textBold_desktop control-label">Date of Birth</label>
</div>
<div>
<label class="lblSecondary textTransformNone"> 08/08/1994</label>
</div>
</div>
<div id="newParentContainer2">
<div>
<label class="textBold textBold_desktop control-label">Social Number</label>
</div>
<div>
<label class="lblSecondary textTransformNone">XXX-XX-6745</label>
</div>
</div>
</div>
Another option is to use a table. You only included a small screenshot of what you wanted but it could potentially be a table where the first column header is "Date of Birth" and the second column header is "Social Number" and then there are two data values.
<table>
<tr>
<th scope="col">Date of Birth</th>
<th scope="col">Social Number</th>
</tr>
<tr>
<td>08/08/1994</td>
<td>XXX-XX-6745</td>
</tr>
</table>
The down arrow key will still walk horizontally across the table so you'd hear the two column headers one after the other like your original DOM but the screen reader user has the option to traverse the table in any direction they want. Across a row or down a column (eg, with ctrl+alt+arrowkey).
(*) The screen reader is really walking the accessibility tree, not the DOM, but the accessibility tree is in the same order as the DOM. The accessibility tree is usually a subset of the DOM and won't contain every element that is in the DOM (for example, elements with CSS display:none
are in the DOM but not the accessibility tree).