[HTML5] Semantics for accessibility

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>