静态显示表单值的DIV需设置label关联吗？508合规咨询

针对你在确认页用带tabIndex的静态<div>展示表单值的场景，要满足508合规，需要明确以下几点：

1. 不能用<label for="...">关联DIV
   HTML规范中，<label>的for属性仅能关联具备「可标签化接口」的表单控件（如<input>、<select>、<button>等），<div>不属于这类元素，所以for属性对它无效，辅助技术不会识别这种关联。

2. 正确的关联方式：使用ARIA属性
   因为你的<div>设置了tabIndex={0}可以获得焦点，属于可聚焦元素，需要通过ARIA属性为它绑定描述文本，让屏幕阅读器能正确识别元素的含义。推荐两种方案：

方案一：用aria-labelledby关联现有<label> #

给<label>添加唯一ID，然后在<div>上通过aria-labelledby指向该ID，实现标签与展示元素的关联：

<div>
    <label className="itemText" id="labelFirstName">
        First Name
    </label>
    <div id="divFirstName" tabIndex={0} aria-labelledby="labelFirstName">
        {firstName}
    </div>
</div>

当用户通过Tab键聚焦到这个<div>时，屏幕阅读器会先读出标签文本（比如“First Name”），再读出DIV内的具体值，体验和表单控件一致。

方案二：用aria-label直接设置描述 #

如果不需要依赖外部<label>，也可以直接在<div>上通过aria-label指定描述文本：

<div>
    <label className="itemText">
        First Name
    </label>
    <div id="divFirstName" tabIndex={0} aria-label="First Name">
        {firstName}
    </div>
</div>

这种方式更简洁，但如果标签文本需要动态修改或复用，方案一的灵活性更高。

3. 额外优化建议

• 保持tabIndex={0}：不要使用正整数的tabIndex，避免破坏页面自然的Tab导航顺序。
• 若DIV内容较长，可添加role="region"并配合aria-label，让用户能快速跳转到该区域（不过仅展示单个值的场景通常不需要）。

内容的提问来源于stack exchange，提问作者gene b.