问题:分组表单元素
我有一个HTML表单,在很少的地方,一个控件由几个输入组成.一个例子是一组单选按钮.
我想明确地对这些输入及其标签进行分组,以便屏幕阅读器(除了通过将它们对齐在一条线上的可视化表示之外)能够理解并宣布这种关系.
例如,假设我有这样的控件:
<div class="control"> <div class="control-label">Type</div> <div class="control-inputs"> <input type="radio" name="type" value="a" id="type-a" /> <label for="type-a">A</label> <input type="radio" name="type" value="b" id="type-b" /> <label for="type-b">B</label> </div> </div>
标准解决方案问题:Fieldset样式问题
fieldset元素和它的子图例似乎完全是为了那个(在下面的例子中使用).
问题是fieldset和legend元素不能像普通元素一样(some discussion about it),而现在除了在Firefox之外,使用我的布局所需的FlexBox在一行上对齐它们是不可能的.
<fieldset class="control"> <legend class="control-label">Type</legend> <div class="form-inputs"> <input type="radio" name="type" value="a" id="type-a" /> <label for="type-a">A</label> <input type="radio" name="type" value="b" id="type-b" /> <label for="type-b">B</label> </div> </fieldset>
问:还有其他方法吗?
这让我想知道除了使用fieldset元素之外是否有一些可访问的方法来分组几个表单控件?
可能的解决方案:role =“group”?
有一个“group” role(在下面的例子中使用),可以添加到一个简单的div中,看起来它可能会完成这项工作,但是没有明确说明它与使用字段集的功能相同.如果确实如此,那么我如何标记该组的元素作为传奇的等同物呢?
<div role="group" class="control"> <div class="control-label">Type</div> <div class="control-inputs"> <input type="radio" name="type" value="a" id="type-a" /> <label for="type-a">A</label> <input type="radio" name="type" value="b" id="type-b" /> <label for="type-b">B</label> </div> </div>
解决方法
基本上你已经在可能的解决方案部分回答了你的问题(顺便说一下,作为一个盲人,我只是对你用标题设置问题的方式印象深刻!).你错过了一个小而简单的东西,aria-label属性:
<div role="group" class="control" aria-label="Type">
注意:这在屏幕上是不可见的,它只是一个屏幕阅读器解决方案.但是,如果要使其可见,请使用aria-labelledby属性执行以下操作:
<div role="group" class="control" aria-labelledby="pseudolegend"> <div id="pseudolegend" class="style-it-like-a-legend">Type</div> [...] </div>
当然,伪传输可能是跨度甚至是p,如果你觉得它更合适.我做的快速而肮脏的本地测试表明,至少在JAWS和Chrome中,fieldset和带有aria-label的div之间没有区别.