该用 section，但必须带标题；不用 aside。社交分享区是当前内容的延伸服务，属主题性分组，需用 section 包裹并配 h2 标题（可视觉隐藏），不可用 div（无语义）或 nav（非导航用途）；按钮行为决定用 button（JS 操作）或 a（外部跳转）。
社交分享按钮该用 section 还是 aside？
用 section，但必须带标题；不用 aside。社交分享区本质是当前内容的延伸服务（如“分享到微博”“复制链接”），不是辅助性、可剥离的侧边信息（比如广告、相关文章推荐），它依附于当前 article 或主内容存在，不具备独立语义价值。W3C 明确将“分享控件组”归为“主题性分组”，且要求每个 section 应有明确标题——哪怕视觉上隐藏，也得用 h2 或更深层级标题包裹。
为什么不能用 div 或 nav？
常见错误包括：<div class="share-buttons"> 丢失所有语义，对屏幕阅读器和 SEO 完全不可见；<nav aria-label="分享链接"> 则是误用——nav 专指**导航链接集合**（跳转到站内其他页面），而分享按钮多数触发 JS 行为（复制、唤起微信 SDK）或跳转到外部平台（如 Twitter 分享页），不属于站点内部导航路径。强行套 nav 会误导辅助技术，让视障用户误以为这是网站导航的一部分。
section 内部按钮该用 button 还是 a？
按行为决定：
- 点击后执行 JS（如调用
navigator.clipboard.writeText()、打开微信分享弹窗）→ 必须用<button type="button">，保证键盘可聚焦、可空格/回车触发，且无默认跳转副作用 - 点击后跳转到外部平台（如
https://twitter.com/intent/tweet?text=...）→ 用<a href="...">，并加rel="noopener noreferrer"防安全风险 - 绝对不要用
<div onclick="...">或<span role="button">—— 可访问性断层，键盘用户无法操作，也不支持原生 focus 状态
容易被忽略的细节：标题层级与可访问性
很多团队把分享区写成：<section><button>分享</button></section>，这违反语义底线。正确结构必须含标题：
立即学习“前端免费学习笔记（深入）”；
<section aria-labelledby="share-title"> <h2 id="share-title" class="visually-hidden">分享本文</h2> <button type="button">复制链接</button> <a href="https://weibo.com/share" rel="noopener noreferrer">分享到微博</a> </section>
其中 visually-hidden 类应通过 CSS（如 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;）隐藏视觉样式但保留屏幕阅读器可读性。漏掉这个标题，整个 section 在无障碍树里就成“无主题区块”，会被跳过或误读。
