应避免在label内直接写单位，因其会被屏幕阅读器连读为输入值的一部分；正确做法是用aria-describedby将单位文本作为独立描述元素关联到input。
label 里直接写单位会不会被屏幕阅读器误读
会。把单位（比如 kg、px、%）和数值塞进 <label> 文本里，屏幕阅读器通常会连读，例如“体重五十千克”听起来像一个完整数值，而实际用户要填的是数字 50，单位是固定提示——这会让视障用户困惑，也影响表单语义清晰度。
常见错误现象：<label>体重（kg）</label><input type="number"> —— 单位括号紧贴文字，没有隔离，AT（辅助技术）无法区分“输入目标”和“单位说明”。
- 正确做法：用
aria-describedby把单位单独挂载为描述性元素 - 单位文本放在
<span>或<small>中，并加id，不参与 label 的主语义 - 避免在
label里用括号、斜杠、冒号拼接单位，如（单位：kg）、/px
用 aria-describedby 关联单位提示的实操写法
这是目前最稳妥、无障碍支持度高（NVDA、VoiceOver、JAWS 均识别良好）、且不影响视觉布局的方式。
使用场景：所有带固定单位的数字输入，如尺寸（px）、重量（g）、不透明度（%）、字体大小（rem）等。
立即学习“前端免费学习笔记（深入）”；
<label for="width">宽度</label><input type="number" id="width" aria-describedby="width-unit"><span id="width-unit" class="unit-hint">px</span>
注意：aria-describedby 的值必须严格匹配描述元素的 id；单位元素建议加轻量样式（如 font-size: 0.85em; color: #666;），但不要 display: none 或 aria-hidden="true"
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
input placeholder 里写单位行不行
不行。placeholder 是临时提示，不是标签替代品，WCAG 明确要求它不能承载必要信息——用户聚焦后 placeholder 消失，单位就没了；而且很多屏幕阅读器默认不读 placeholder，或只在特定模式下读。
性能/兼容性影响：iOS Safari 对 placeholder 的语音支持不稳定；Android TalkBack 默认跳过它；部分老版本 Chrome 不触发 aria-label 和 placeholder 共存时的合并播报。
- 绝对不要用
placeholder="请输入数值（px）"代替单位标注 - 如果非要视觉上靠近输入框，把单位放在 input 右侧（用 flex 布局），再用
aria-describedby关联 - placeholder 只用于补充说明，比如“如：120、240”，而非单位本身
label 后紧跟单位 span 是否算语义正确
不算。即使写成 <label>字号<span class="unit">rem</span></label><input>，整个 span 仍属于 label 的可访问名称（accessible name），会被 AT 当作 label 文本的一部分拼读，结果还是“字号rem”，不是“字号，单位 rem”。
容易踩的坑：以为加了 class 或 CSS 隐藏就能规避读取——只要 DOM 在 label 内部，无障碍 API 就默认纳入其 accessible name 计算。
- label 内容应仅包含用户需要理解的字段含义，如“字号”“行高”“不透明度”
- 单位必须脱离 label 树结构，用
aria-describedby或aria-labelledby（后者适合多字段共用同一单位说明）显式关联 - 若单位动态变化（如切换 px/rem/%），需用
aria-live更新，不能只改 textContent
复杂点在于：单位不是装饰，它是输入约束的一部分；但 HTML 没有原生 <label-unit>，只能靠 ARIA 补足语义断层——这点常被忽略，直到做无障碍验收才暴露。
