辅助功能测试：select 元素缺少关联标签

Question

要使页面符合所有政府辅助功能要求，每个表单元素都应该有一个标签。但是，我们有一个带有三个下拉菜单的出生日期选择器：日、月和年。可见标签只是 "Birth Date"。

有没有办法：

指定表单元素没有标签？
指定一个标签用于多个表单元素？

Answer 1

您可以使用 <fieldset> 和 <legend> 为组指定标签，但这并不意味着您可以省略单个标签。在您的示例中，您可能会争辩说与其他选择的接近程度相当于 "visual label"，因此您可以使用 title 属性来标记每个单独的组件，并使用 fieldset/legend 来标记组

在您的实例中，您还需要指出 * 表示必填字段

这是一些标记

<fieldset>
    <legend>Date of Birth* <span class="offscreen">required</span></legend>
    <select title="month">...</select>
    <select title="day">...</select>
    <select title="year">...</select>
    <button title="pick date" class="datepicker"></button>
</fieldset>

辅助功能测试：select 元素缺少关联标签

Accessibility testing: select element missing an associated label

forms

accessibility