HTML – 标签内的复选框？

只要您将输入和标签与for / id属性相关联,即使输入正确到标签中,两者都是完全正确,有效和可访问的(请参阅@AramKocharyan链接的问题的最佳答案以及我的评论)

当用户专注于表单元素(输入,选择或文本区域)时,屏幕阅读器将读取关联的标签内容.在表单中,很可能他们只会阅读标签,图例和按钮(我的意思是重置,提交,图像或按钮),因为JAWS等都有特殊模式;大致的目的是填写表格,而不是像网页的其余部分一样阅读内容.

您经常会在左侧找到带有标签的表单,在右侧输入一些帮助：

E-mail [                 ] ex: johndoe@domain.com

>如果标签元素外部有输入,则提示将以跨度编码.屏幕阅读器不会听到它,因为它不是标签或提交按钮的一部分.
>使用label元素内的输入,您可以将标签和提示都放入label元素中：

<label for="email">
    <strong>E-mail</strong>
    <input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
    <span>ex: johndoe@domain.com</span>
</label>

这样,提示将与真实标签一起读给AT用户.
注意：当然你会选择不同的强度和跨度,比如resp.粗体右对齐和斜体左对齐.样式不需要span(只是样式标签并取消强大的一半规则),但它更简单(更简单？):)

它对于错误和提示一样有用：

<p class="error>
        <label for="email">
            <strong>E-mail</strong>
            <input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
            <span>ERROR: not a valid e-mail address. Example of a valid e-mail: johndoe@domain.com</span>
        </label>
    </p>

.error strong {
      color: red;
      font-weight: bold;
    }

    .error input {
      border: 1px solid red;
    }

    .error span {
      color: red;
    }

这样,错误就会被读取给屏幕阅读器(他们看不到或者几乎看不到的颜色不是借助本文向他们传达信息的唯一方式).