如何实现键盘用户聚焦卡片时显示隐藏文本（无障碍适配）

我有一个包含隐藏文本的卡片，目前仅在鼠标hover时显示隐藏文本（通过opacity: 0和transform属性实现隐藏）。出于无障碍需求，需要实现键盘用户聚焦该卡片时也能显示隐藏文本，请问最简/最优方案是什么？

卡片HTML代码 #

<article id="brxe-fbcf6d" class="brxe-div suba-priority-card">
    <div class="brxe-div suba-priority-card__body">
      <h3 class="brxe-heading fr-article-card-foxtrot__title">
        <a href="https://ourimpact.xxxx.com/our-people/employee-resource-groups/#erg-blends">BLENDS</a>
        text
      </h3>
      <div class="brxe-text-basic fr-article-card-foxtrot__paragraph">
        The Black &amp; Latino Employee Network for Diversity at xxxx(BLENDS) mission is to empower Black 
        and Latino employees by creating professional development programs, offering educational resources, 
        and engaging with the community in diversity initiatives.
      </div>
      
      <footer class="brxe-div suba-priority-card__footer">
        <a href="https://ourimpact.xxxx.com/our-people/employee-resource-groups#erg-blends" aria-label="Read more about BLENDS" class="brxe-div suba-priority-card__info">
          <time class="brxe-text-basic suba-priority-card__read-more" datetime="June 7, 2023">Read more</time>
          <i class="brxe-icon suba-priority-card__cta-icon fas fa-arrow-right-long" aria-label="arrow"></i>
        </a>
      </footer>
    </div>
    
    <div class="brxe-div suba-priority-card__image-wrapper">
      <picture class="brxe-image suba-priority-card__image css-filter size-full" decoding="async">
        <source type="image/webp" data-srcset="https://ourimpact.xxxx.com/wp-content/uploads/Group-2030.jpg.webp" srcset="https://ourimpact.xxxx.com/wp-content/uploads/Group-2030.jpg.webp">
        <img width="700" height="490" src="https://ourimpact.xxxx.com/wp-content/uploads/Group-2030.jpg" alt="Fingerprint image" decoding="async" class="perfmatters-lazy entered pmloaded" data-src="https://ourimpact.xxxxx.com/wp-content/uploads/Group-2030.jpg" data-ll-status="loaded">
        <noscript>
          <img width="700" height="490" src="https://ourimpact.xxxx.com/wp-content/uploads/Group-2030.jpg" alt="Fingerprint image" decoding="async"/>
        </noscript>
      </picture>
    </div>
</article>

核心解决方案 #

要实现键盘聚焦时和hover有相同的视觉表现，只需两步操作，无需JavaScript，完全通过HTML和CSS实现：

1. 让卡片可被键盘聚焦 #

给<article>标签添加tabindex="0"，确保它能被Tab键选中并获得焦点；同时添加role="region"和aria-label增强语义，方便屏幕阅读器识别：

<article id="brxe-fbcf6d" class="brxe-div suba-priority-card" tabindex="0" role="region" aria-label="BLENDS员工资源组卡片">
  <!-- 原卡片内容不变 -->
</article>

2. 同步聚焦与hover的CSS状态 #

找到当前控制隐藏文本显示的hover样式，添加:focus-visible选择器（专门针对键盘聚焦的伪类），让聚焦时触发同样的显示逻辑：
假设原hover样式为：

.suba-priority-card:hover .fr-article-card-foxtrot__paragraph {
  opacity: 1;
  transform: translateY(0); /* 替换为你实际使用的transform值 */
}

修改后：

/* 同时支持鼠标hover和键盘聚焦 */
.suba-priority-card:hover .fr-article-card-foxtrot__paragraph,
.suba-priority-card:focus-visible .fr-article-card-foxtrot__paragraph {
  opacity: 1;
  transform: translateY(0);
}

/* 可选：自定义聚焦轮廓，确保对比度符合无障碍标准（不要完全去掉轮廓） */
.suba-priority-card:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

方案优势 #

• 极简高效：仅修改少量代码，无JS依赖，性能拉满
• 符合无障碍规范：:focus-visible精准区分键盘与鼠标聚焦，避免干扰鼠标用户；tabindex和语义化属性确保键盘导航和屏幕阅读器的兼容性
• 体验统一：聚焦与hover时的视觉表现完全一致，用户认知无断层

内容的提问来源于stack exchange，提问作者Andrew McSpadden