Screen-reader 标记复选框/单选按钮的友好方式,它已经使用了可点击的标签
Screen-reader friendly way to label a checkbox / radio button, that is already using a label to be click-able
如果我希望在用户单击相关文本时填充复选框/单选框,那么我倾向于将其包装在标签中,例如
HTML
<fieldset class="inline">
<label for="radio-inline-1" class="block-label">
<input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1">
Yes
</label>
<label for="radio-inline-2" class="block-label selected">
<input type="radio" value="No" name="radio-inline-group" id="radio-inline-2">
No
</label>
</fieldset>
那么...我现在如何在合规庄园中标记复选框/单选框集的问题?
是"whatever"html+css的情况吗?例如
HTML
<p class="pretendLabel">Do you like compliant code?</p>
<fieldset class="inline">
<label for="radio-inline-1" class="block-label">
<input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1">
Yes
</label>
<label for="radio-inline-2" class="block-label selected">
<input type="radio" value="No" name="radio-inline-group" id="radio-inline-2">
No
</label>
</fieldset>
或者我是否使用带有两个 "for" 的额外标签,打开标签或其他东西?
我担心的主要是屏幕阅读器在假装标签上没有 "for" 或其他直接关联的情况下无法正确关联问题和潜在答案。
使用带有图例元素的字段集。
<fieldset class="inline">
<legend>Do you like compliant code?</legend>
如果我希望在用户单击相关文本时填充复选框/单选框,那么我倾向于将其包装在标签中,例如
HTML
<fieldset class="inline">
<label for="radio-inline-1" class="block-label">
<input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1">
Yes
</label>
<label for="radio-inline-2" class="block-label selected">
<input type="radio" value="No" name="radio-inline-group" id="radio-inline-2">
No
</label>
</fieldset>
那么...我现在如何在合规庄园中标记复选框/单选框集的问题?
是"whatever"html+css的情况吗?例如
HTML
<p class="pretendLabel">Do you like compliant code?</p>
<fieldset class="inline">
<label for="radio-inline-1" class="block-label">
<input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1">
Yes
</label>
<label for="radio-inline-2" class="block-label selected">
<input type="radio" value="No" name="radio-inline-group" id="radio-inline-2">
No
</label>
</fieldset>
或者我是否使用带有两个 "for" 的额外标签,打开标签或其他东西?
我担心的主要是屏幕阅读器在假装标签上没有 "for" 或其他直接关联的情况下无法正确关联问题和潜在答案。
使用带有图例元素的字段集。
<fieldset class="inline">
<legend>Do you like compliant code?</legend>