能否在<label>标签内嵌套<output>元素实现合规的无障碍HTML输出?
这个方案完全符合HTML规范,也可以在Orca等主流屏幕阅读器上正常运行,具体说明如下:
- 写法合法性:HTML规范中
<label>允许嵌套除其他<label>、交互控件(按钮、链接等)之外的所有流式内容,<output>本身是专门用来展示计算/输出值的语义化标签,两者嵌套没有任何规范层面的限制,属于合法写法。 - 无障碍朗读效果:你的写法比原来
<span>Vector <strong>42</strong></span>的纯样式写法语义清晰很多,Orca会先朗读标签文本Vector,再识别<output>的数值属性播报42,不会把内容识别为无意义的普通文本。如果你的数值是动态更新的,可以给<output>额外加上aria-live="polite"属性,数值变动时屏幕阅读器会自动播报新值,体验更好。 - 可选优化:如果这个展示内容和页面上的现有表单控件没有关联,也可以不用套
<label>,直接用<span>Vector <output>42</output></span>也完全合规,不影响朗读效果。
内容的提问来源于stack exchange,提问作者Phlip
相关产品推荐
相关产品推荐

