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标签。

这是否适用于屏幕阅读器？

来源

2017-10-18 domokun

否，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>

来源

2017-10-18 15:50:28 steveax

a11y：输入字段，包装在一个div中，附加“由id”附加到标签

回答

相关问题