[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>

巴特西

[HTML5] Semantics for accessibility

最新文章

热门文章