代码之家  ›  专栏  ›  技术社区  ›  Andy Ford

将标签元素包裹在图例元素中

  •  6
  • Andy Ford  · 技术社区  · 18 年前

    我从来没有理由把标签元素放在图例元素中(从来没有真正想过或看到过)。但根据我正在实施的设计,这样做很有诱惑力。

    以下是我想做的事情:

    <fieldset>
    <legend><label for="formInfo">I would like information on</label></legend>
    <select id="formInfo">
        <option value="Cats">Cats</option>
        <option value="Dogs">Dogs</option>
        <option value="Lolz">Lolz</option>
    </select>
    </fieldset>
    

    它在Firefox3、Safari、Opera和IE6/7中按预期工作(单击标签会聚焦相应的输入),并且通过了验证,但我只是想知道是否有任何已知的原因(可访问性、语义、浏览器问题)不应该这样做

    2 回复  |  直到 18 年前
        1
  •  13
  •   joelhardi    18 年前

    你的在哪里 </fieldset> ?

    从语义上讲, legend describes a fieldset ,就像 label 描述单个字段。

    字段集应该用于将语义相关的字段组合在一起(例如,“地址”字段集可能有街道、城市和国家的输入字段)。

    假设字段集中有多个字段,那么按照你的建议做在语义上没有意义——你需要创建单独的图例文本来描述字段集,然后为每个字段创建一个标签。

    如果你只有一个字段,那么你根本不需要字段集或图例。

    所以,基本上,你不应该做你正在做的事情。

    如果你这样做是为了有额外的元素来附加CSS规则或Javascript事件,你最好使用通用元素,比如 div 和 span 这不会混淆文本到语音和其他非视觉用户代理。

    即放入a 分区 或 跨度;跨越;持续时间;(桥或拱的)墩距;跨距; 包括(广大地区) 在可访问性/语义方面(它没有任何含义)与误用语义元素(即使只是轻微的,就像在这种情况下一样)相比,它实际上是中立的,这可能会产生误导。想象一下,甚至 最佳情况 您在文本到语音浏览器中的布局场景:文本被大声朗读两次,一次作为图例,一次是作为标签——为什么有人想让“我想获取信息”这句话被大声朗读给他们听两次?尤其是因为它只有在选择的背景下才有意义 select 控制。

        2
  •  0
  •   nickf    18 年前

    嗯,标签元素本身似乎很好——它是对“formInfo”元素的描述,所以不用担心。然而,从语义上讲,这说明了什么 legend 元素?它应该是整个字段集的标题。...