HTML怎么标注单位信息_HTML label内含单位写法【说明】-html教程-PHP中文网

应避免在label内直接写单位，因其会被屏幕阅读器连读为输入值的一部分；正确做法是用aria-describedby将单位文本作为独立描述元素关联到input。

html怎么标注单位信息_html label内含单位写法【说明】

label 里直接写单位会不会被屏幕阅读器误读

会。把单位（比如 kg、px、%）和数值塞进 <label></label> 文本里，屏幕阅读器通常会连读，例如“体重五十千克”听起来像一个完整数值，而实际用户要填的是数字 50，单位是固定提示——这会让视障用户困惑，也影响表单语义清晰度。

常见错误现象：<label>体重（kg）</label><input type="number"> —— 单位括号紧贴文字，没有隔离，AT（辅助技术）无法区分“输入目标”和“单位说明”。

正确做法：用 aria-describedby 把单位单独挂载为描述性元素
单位文本放在 <span></span> 或 <small></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"

html-to-pptx-converter

使用 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 计算。