For example, when we use checkbox, if we do like this:
<div class="inline-control sign-up col-1"> <input type="checkbox" checked name="jLetter" id="jLetter"> Receive promotional offers? </div>
When we use screen reader, it will lose the semantics meaning, it only say:
checkbox checked
Instead, we want to hear:
Receive promotional offers?, checkbox, checked
There are two way to do it:
1. label wrap the checkbox
<div class="inline-control sign-up col-1"> <label> <input type="checkbox" checked name="jLetter"> Receive promotional offers? </label> </div>
2. Using id to match label and checkbox
<div class="inline-control sign-up col-1"> <div class="promotional"> <input type="checkbox" checked name="jLetter" id="jLetter"> <label for="jLetter">Receive promotional offers?</label> </div> </div>