提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[HTML5] Semantics for accessibility

html5 for
2023-09-14 08:59:17 时间

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>

 

相关文章