社交媒体图标alt必须描述功能而非重复“图标”，如“在Twitter上关注我们”；href需加rel="noopener noreferrer"并验证有效性，SVG优先用aria-label而非<title>。
用 <img> 加 alt 显示图标时，alt 文本怎么写才不算“空”又不冗余
直接说结论：社交媒体图标不是装饰图，alt 不能留空或只写“图标”，必须描述其功能（即“点击跳转到某平台主页”），但不用重复“图标”二字。
常见错误是写成 alt="Twitter 图标" 或 alt=""——前者语义重复（用户看到图形就知道是 Twitter），后者让屏幕阅读器跳过链接，等于砍掉无障碍访问入口。
实操建议：
-
alt写成动词短语，聚焦行为，比如alt="在 Twitter 上关注我们"、alt="访问 GitHub 仓库" - 如果图标同时带文字（如“GitHub”旁配 Octocat 小图），且文字已说明用途，
alt可设为""，但前提是父级<a>的aria-label或链接文本已明确意图 - 避免用 emoji 替代
alt（如alt="?"），屏幕阅读器不一定读出含义，也不利于翻译和 SEO
为什么不用 <i> 或 <span> + 字体图标（如 Font Awesome）
字体图标本质是字符，没有固有语义，alt 属性对它们无效；若不加额外 ARIA 标记，屏幕阅读器可能读成“f”“g”或直接跳过。
立即学习“前端免费学习笔记（深入）”；
这不是“能不能用”的问题，而是“用了就得补语义”的问题。很多项目踩坑在于只加了 <i class="fab fa-github"></i>，却没配 aria-hidden="true" 和对应的 aria-label。
实操建议：
- 若坚持用字体图标，必须成对处理：
<i class="fab fa-github" aria-hidden="true"></i><span class="sr-only">访问 GitHub 仓库</span>（其中.sr-only是视觉隐藏但保留给读屏的样式） - 现代项目更推荐 SVG 内联：可直接加
role="img"和aria-label，比字体图标可控性强，且无字体加载失败导致“方块”风险 - 不要依赖 CSS
::before伪元素插入图标——它完全无法被辅助技术捕获
<a> 包裹图标的 href 值怎么填才安全
href 不是随便写个平台 URL 就完事。常见错误是硬编码 https://twitter.com/xxx，结果账号改名、平台停服或链接失效，前端就挂死。
更重要的是，外部链接默认在当前页跳转，用户点完就丢了你家页面——这违背基本用户体验。
实操建议：
- 始终加上
rel="noopener noreferrer"，防止新页面通过window.opener反向控制原页面（安全漏洞） - 加
target="_blank"，但别只加这个——缺少rel会引发安全隐患 - 如果平台支持用户名变量（如 Mastodon 实例），href 应用模板拼接，而非写死；例如
https://fosstodon.org/@<code>username</code>，并确保username经过 URL 编码 - 测试 404：上线前手动点开每个链接，确认返回 200 或至少是平台标准的 301 跳转页，而非“页面不存在”
SVG 内联图标里 <title> 和 aria-label 到底用哪个
两者都能提供可访问文本，但作用层级不同：<title> 是 SVG 元素的子节点，仅当 SVG 作为图像嵌入（非内联）或鼠标悬停时生效；而 aria-label 直接绑定到容器元素，对读屏器更可靠。
真实场景中，<title> 很容易被忽略——比如用 <use> 引用符号时，<title> 不会继承；或者 CSS 设置了 display: none，它就失效了。
实操建议：
- 优先在包裹 SVG 的
<a>上加aria-label，例如<a href="..." aria-label="在 LinkedIn 上查看我们的公司主页"><svg>...</svg></a> - 如果 SVG 是独立使用的（比如页脚统一图标组），可在
<svg>根标签加role="img"和aria-label，此时可省略<title> - 不要同时写
<title>和aria-label——读屏器可能重复播报，尤其在 VoiceOver 中
rel 属性的完整性。一个 target="_blank" 没配 rel，就是把门开着等别人进你家厨房。 
