屏幕阅读器不读CSS content属性生成的伪元素文本，因其不可聚焦且无语义；真正可读内容须为真实DOM节点或正确ARIA标记元素，图标类伪元素应设aria-hidden="true"。
screen reader只读CSS里的content属性吗
不读。绝大多数屏幕阅读器完全忽略 content 生成的伪元素文本，哪怕加了 aria-label 也没用——因为伪元素本身不可聚焦、不可语义化，属于纯视觉层。
常见错误现象：::before { content: "⚠️"; } 想提示“必填”，但盲人用户根本听不到；或者用 content: attr(data-label) 做动态提示，结果静默失效。
- 真正能被读到的内容，必须是真实DOM节点（比如
<span>必填</span>）或带正确ARIA角色/属性的元素 - 如果非要视觉隐藏又保留可读性，用
clip-path: inset(50%)或position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;，别依赖content - 所有图标类
::before/::after都应配aria-hidden="true"，避免干扰
display: none 和 visibility: hidden 对屏幕阅读器的影响差异
display: none 会让元素彻底从可访问树中移除，屏幕阅读器跳过不读；visibility: hidden 虽然看不见，但仍在DOM里、仍可被读取——这是关键区别，也是最容易踩的坑。
使用场景：比如折叠面板的隐藏内容、表单校验失败时的提示框，若用 visibility: hidden，盲人用户会听到一堆“不可操作的空内容”；而用 display: none 又可能破坏动画过渡（CSS transition 不触发）。
立即学习“前端免费学习笔记（深入）”；
- 需要动画隐藏时，先用
opacity: 0+visibility: hidden，动画结束再切到display: none - 绝对不要对
aria-live区域用visibility: hidden，它会导致更新被读两次或漏读 - 检查 DevTools 的 Accessibility 面板，看元素是否还在“Accessibility Tree”中
color contrast 不够导致屏幕阅读器误判文字可读性
不是误判——屏幕阅读器本身不关心颜色，但低对比度会直接让OCR类辅助工具（如某些OCR读屏、手机相机读字）失效，更严重的是，很多视障用户并非全盲，而是低视力，他们靠放大+高亮看屏幕，此时 #999 文字在浅灰背景上根本看不清。
WCAG AA 级要求文本与背景对比度 ≥ 4.5:1（小字）或 3:1（大字），但开发者常忽略字体粗细、字号、渲染引擎差异带来的实际对比衰减。
- 用浏览器插件（如 axe DevTools）实时测，别只信设计稿标注的色值
- 避免在
background-image上叠放文字，渐变/纹理背景会让对比度计算失真 -
color: #fff在background-color: #f0f0f0上看似白灰分明，实测对比度仅 1.8:1，必须调深背景或加文字阴影
媒体查询里用 prefers-reduced-motion 影响无障碍体验
它不只是“关掉动画”，更是告诉系统“用户有前庭障碍或注意力障碍”，这时候你该做的不只是停掉 transition，还要同步关闭自动轮播、移除闪烁效果、甚至禁用 hover 弹窗——否则光停动画没用，交互逻辑依然混乱。
容易被忽略的点：很多框架默认把 prefers-reduced-motion: reduce 当成布尔开关，但其实它是个媒体查询状态，需用 @media (prefers-reduced-motion: reduce) 显式包裹样式，且不能和 @supports 混用。
- 所有含
animation或transition的 class 都要配一套@media (prefers-reduced-motion: reduce)回退规则 - JavaScript 中监听
window.matchMedia("(prefers-reduced-motion: reduce)").matches，动态停掉setInterval轮播 - 别用
reduce做“性能优化”借口，比如偷偷关掉aria-live更新——这会直接切断信息通道
