嵌套Fieldset的Legend如何适配屏幕阅读器？代码合规性咨询

问题1：单选按钮Label内的sr-only span是否完全不必要？ #

得分场景判断：

• 如果单选按钮的<label>已经包含清晰的可见文本，且外层<fieldset>的<legend>通过正确的语义关联（比如用<fieldset>完整包裹单选组，屏幕阅读器能自动将legend与组内控件关联），那这个sr-only span属于冗余内容，完全可以去掉，避免重复读取干扰用户。
• 如果当前外层<legend>和单选按钮的关联存在问题（比如你提到的未关联情况），sr-only span是用来补充控件上下文信息的临时方案，那它暂时有存在价值。但更优的做法是修复<fieldset>与控件的原生语义关联，而非依赖sr-only补漏——原生语义的兼容性远好于额外辅助文本。

问题2：用“Answer”作为内层Legend文本是否过于通用？ #

是的，这个文本过于模糊。
嵌套fieldset场景下，内层<legend>需要明确传递当前分组的具体用途，比如“问题1的回答选项”“是否同意服务条款”这类带上下文的描述。屏幕阅读器用户依赖legend理解分组意义，“Answer”无法让用户知道该分组对应哪个问题、什么类型的回答，会造成理解障碍，必须替换为更具体的文本。

问题3：如何兼顾不同屏幕阅读器对Legend的读取差异，是否应改用aria-label？ #

不建议用aria-label替代<legend>，原生的<fieldset>+<legend>是W3C推荐的表单分组语义，兼容性比aria-label更好，绝大多数主流屏幕阅读器都能正确识别。针对读取差异的优化可以这么做：

• 优化legend文本：确保外层legend传递核心主题，内层legend补充具体分组信息，避免过长或模糊的描述。
• 补充关联：如果需要让控件读取完整上下文，可给每个单选按钮添加aria-labelledby属性，关联外层legend、内层legend和自身label的id，比如aria-labelledby="outer-leg inner-leg radio1-label"，让屏幕阅读器一次性读取完整的上下文信息。
• 测试验证：针对NVDA、VoiceOver、JAWS这类主流屏幕阅读器做测试，调整文本内容和关联方式，确保在不同工具下都能清晰传递信息。
• 特殊场景补充：如果需要隐藏可见的legend但保留屏幕阅读器读取，可给legend添加sr-only类，而非用aria-label——原生语义的优先级更高。

内容的提问来源于stack exchange，提问作者Jirosworld