placeholder不能被屏幕阅读器可靠读出，因其非语义节点且不参与ARIA标签计算；iOS VoiceOver默认跳过，Android TalkBack支持不稳定；聚焦后文字消失导致辅助技术无法持续播报用途。
placeholder为什么不能被屏幕阅读器可靠读出
它不是语义节点，浏览器不将其纳入 ARIA 标签计算逻辑；iOS VoiceOver 默认跳过，Android TalkBack 支持不稳定；即使写了 placeholder="手机号"，读屏器大概率只报“编辑框”，不带上下文。更关键的是，用户聚焦输入框后文字立即消失，辅助技术无法持续播报用途。
label和aria-label哪个该优先用
能用 <label for="id"> 就别用 aria-label——前者天然建立语义关联、支持点击聚焦、所有辅助技术都稳定识别。只有 label 文本完全不可见（如纯图标搜索框）时，才退而求其次用 aria-label，且必须保证描述准确，例如 aria-label="站内搜索"，不能写成“搜索框”这种模糊表述。
-
for和id必须严格匹配：大小写、连字符、空格都不能错 - 禁止用
display: none或visibility: hidden隐藏label，改用visually-hidden类 -
aria-label和可见label不能共存，否则读屏器会重复播报
::placeholder样式必须补全哪些前缀
现代写法 input::placeholder 在 Chrome/Firefox/Edge 新版中可用，但 iOS Safari 15.6 及更早、Android WebView 旧版本仍需显式声明全部前缀，漏掉任一都可能导致提示文字不可见或颜色异常：
-
input::placeholder（标准） -
input::-webkit-input-placeholder（Safari/Chrome/Edge） -
input::-moz-placeholder（Firefox） -
input:-ms-input-placeholder（IE10–IE11）
另外，::placeholder 不继承父级字体，font-family 必须显式声明；Firefox 默认加了 opacity: 0.53，不设 opacity: 1 就会发灰；对比度务必 ≥ 4.5:1，否则色觉障碍用户看不见。
立即学习“前端免费学习笔记（深入）”；
移动端 placeholder 显示异常的三个硬性条件
iOS Safari 和微信 WebView 对 placeholder 渲染极其敏感，不是 CSS 写错了，而是触发了底层渲染边界。必须同时满足：
-
input设置了显式的height和line-height，且数值严格相等（仅靠padding-top撑高会导致基线错位） - 不能同时设置
value=""和placeholder，某些 WebKit 版本会优先渲染空value，直接覆盖提示文字 - 禁用
transform: scale()、perspective等属性——它们破坏图层合成，导致 placeholder 残留或错位
最常被忽略的一点：placeholder 的存在本身不会提升可访问性，反而可能掩盖 label 缺失的问题。删掉 placeholder 属性不等于修复可访问性，真正要动的是 label 关联逻辑和错误状态的 aria-invalid / aria-describedby 补全。
