如何创建仅使用CSS背景图的无障碍空<a>标签

你现在用CSS背景图做社交链接的空<a>标签，视觉上没问题，但对屏幕阅读器用户极不友好——标签里没有可读内容，用户根本不知道这个链接指向哪里。下面是几种靠谱的无障碍解决方案：

方法1：使用aria-label属性（最简洁） #

直接给<a>标签添加aria-label属性，明确说明链接用途，屏幕阅读器会读取这个标签内容。

修改后的HTML：

<a class="social-link" href="https://mastodon.social" aria-label="访问我的Mastodon主页"></a>

CSS保持不变：

.social-link{
  height:48px;
  width:48px;
  background-image: url("mastodon.png");
}

方法2：添加视觉隐藏的文本内容 #

在<a>标签内添加实际文本，用CSS把文本移出可视区域——既不破坏视觉效果，又能被屏幕阅读器识别。

HTML代码：

<a class="social-link" href="https://mastodon.social">
  <span class="sr-only">Mastodon主页</span>
</a>

新增视觉隐藏的CSS类：

.social-link{
  height:48px;
  width:48px;
  background-image: url("mastodon.png");
  display: inline-block; /* 确保链接是块级元素，扩大点击区域 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

这个sr-only类是行业通用的视觉隐藏方案，完全不影响页面布局，只有屏幕阅读器能读取内容。

方法3：补充title属性（仅作辅助） #

可以给<a>加title属性，鼠标悬停时会显示提示文本，但注意它不能替代aria-label或隐藏文本——很多屏幕阅读器不会默认读取title，键盘用户也看不到悬停提示。

示例：

<a class="social-link" href="https://mastodon.social" aria-label="访问我的Mastodon主页" title="Mastodon主页"></a>

以上方法都能让你的社交链接符合WCAG无障碍标准，优先推荐方法1或方法2，确保所有用户都能理解链接用途。

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