HTML – 标签内的复选框?
我在网上看到人们编码复选框的两种方式,哪一个是正确的?
>< input id =“a”type =“checkbox”/>< label for =“a”>复选框< / label> 它们在Chrome中运行良好,是否比其他浏览器多一个?有什么区别吗? DEMO 解决方法
只要您将输入和标签与for / id属性相关联,即使输入正确到标签中,两者都是完全正确,有效和可访问的(请参阅@AramKocharyan链接的问题的最佳答案以及我的评论)
当用户专注于表单元素(输入,选择或文本区域)时,屏幕阅读器将读取关联的标签内容.在表单中,很可能他们只会阅读标签,图例和按钮(我的意思是重置,提交,图像或按钮),因为JAWS等都有特殊模式;大致的目的是填写表格,而不是像网页的其余部分一样阅读内容. 您经常会在左侧找到带有标签的表单,在右侧输入一些帮助: E-mail [ ] ex: johndoe@domain.com >如果标签元素外部有输入,则提示将以跨度编码.屏幕阅读器不会听到它,因为它不是标签或提交按钮的一部分. <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用户. 它对于错误和提示一样有用: <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; } 这样,错误就会被读取给屏幕阅读器(他们看不到或者几乎看不到的颜色不是借助本文向他们传达信息的唯一方式). (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |