a11y:输入字段,包装在一个div中,附加“由id”附加到标签
问题描述:
我有一个时间选择器组件,由两个单独的input
字段组成,这些字段一起工作以创建一个幻想。a11y:输入字段,包装在一个div中,附加“由id”附加到标签
这是骷髅的样子
<div> {/* component container */}
<div> {/* container for hours:minutes */}
<input /> {/* hours */}
<input /> {/* minutes */}
</div>
<Select /> {/* custom React component, for AM/PM */}
</div>
一切的伟大工程“正规”的用户,但可访问性较差。
由于代码库中预先存在的限制,我很难简单地将所有内容都包装在label
中,这可以解决我的问题。
我在想什么做的是以下内容,我想这是否可以给屏幕阅读器或不是真的有用社群成员的意见(哈哈!)。
<label htmlFor="myUniqueId">Here goes my label</label>
<div id="myUniqueId"> {/* component container */}
<div> {/* container for hours:minutes */}
<input /> {/* hours */}
<input /> {/* minutes */}
</div>
<Select /> {/* custom React component, for AM/PM */}
</div>
因此,基本上,在容器上设置的ID,而不是输入,然后附加使用htmlFor
标签。
这是否适用于屏幕阅读器?
答
否,for
attribute must point at a labelable
element:
for属性可被指定为指示与 表单控件,其标题是要关联。如果指定了属性,则该属性的值必须是与标签元素相同的文档中的一个可插入元素的ID。
labelable
elements是:input
,button
,select
,textarea
,fieldset
,output
,object
,meter
,progress
,label
,img
。
我想构建这样说:
<label htmlFor="myUniqueId">Select time</label>
<fieldset id="myUniqueId"> {/* component container */}
<div> {/* container for hours:minutes */}
<input aria-label="hours" /> {/* hours */}
<input aria-label="minutes" /> {/* minutes */}
</div>
<Select aria-label="AM or PM" /> {/* custom React component, for AM/PM */}
</fieldset>