如何为键盘焦点用户显示隐藏文本：CSS :has() 实现无障碍悬停增强

通过 css `:has()` 选择器，在元素获得键盘焦点时（如 tab 导航）动态显示原本仅靠 `:hover` 触发的隐藏文本，兼顾可访问性与语义化，无需 javascript 即可提升 wcag 合规性。

在构建可访问的卡片组件时，仅依赖 :hover 显示辅助信息（如扩展描述、上下文提示）会遗漏键盘用户和屏幕阅读器使用者——这是常见的无障碍断点。现代 CSS 提供了优雅的纯样式解决方案：:has() 关系选择器，它允许我们根据子元素或后代元素的状态（例如 a:focus）向上匹配父容器，并触发对应样式的变更。

以下是以您提供的卡片结构为基础的完整实现方案：

✅ 核心思路

将原本用于视觉隐藏的文本（如 包裹的说明内容）设为 opacity: 0 + transform: translateY(5px) 等过渡友好属性，并利用 :has() 检测卡片内可聚焦元素（如链接 ）是否处于 :focus 状态，从而激活显示规则。

✅ 推荐 CSS 写法（兼容 Chrome 105+、Safari 15.4+、Firefox 121+）

/* 隐藏文本默认状态（建议用 class 而非内联 style） */
.suba-priority-card__paragraph span {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none; /* 防止干扰焦点流 */
}

/* 当卡片内任意链接获得焦点时，显示其后 sibling 的 span */
.suba-priority-card__body h3:has(a:focus) + .fr-article-card-foxtrot__paragraph span,
.suba-priority-card__body footer:has(a:focus) ~ .fr-article-card-foxtrot__paragraph span {
  opacity: 1;
  transform: translateY(0);
}

? 为什么用 :has()？ 它是首个支持“父选择子状态”的原生 CSS 机制，避免了为每个可聚焦元素单独绑定 JS 事件监听器，也规避了 :focus-within 可能误触（如表单控件嵌套）的风险，语义更精准。

✅ HTML 微调建

议（增强健壮性）

  
  The Black & Latino Employee Network for Diversity at xxxx(BLENDS) mission is to empower Black 
  and Latino employees by creating professional development programs...

  
  
    This ERG supports career growth, mentorship, and community outreach.
  

⚠️ 注意事项

• 可访问性优先级：若该隐藏文本包含关键操作信息（如“按 Enter 键跳转至详情页”），不应仅靠视觉显示，而应使用 aria-live 或 保证屏幕阅读器可读。
• 焦点管理：确保卡片整体可通过 tabindex="0" 获得焦点（当前结构中 已天然可聚焦，故无需额外设置）。
• 降级处理：对不支持 :has() 的旧浏览器，可配合 @supports (selector(:has(*))) { ... } 进行渐进增强，或回退为 :focus-within（需测试边界行为）。
• 性能提示：:has() 在复杂 DOM 中可能影响渲染性能，建议限制作用域（如使用 #brxe-fbcf6d ID 前缀）并避免深层嵌套选择器。

✅ 总结

用 :has() 实现“焦点即显示”，是当前最简洁、语义清晰且符合 Web 标准的无障碍增强方式。它让键盘用户与鼠标用户获得一致的信息层级体验，同时保持代码轻量、维护成本低。只要确保隐藏内容不承载关键交互语义，并辅以适当的 ARIA 属性，即可满足 WCAG 2.1 AA 级别中关于“键盘可操作性”与“信息可感知性”的核心要求。