不能直接用而用模拟，是因为IE10及更早版本不识别该语义标签，或项目有SSR、微前端等兼容要求；此时必须添加role="complementary"及aria-label等属性确保可访问性，而非仅靠CSS布局。
为什么不能直接用 <aside></aside> 却要用 <div> 模拟？<p>因为某些旧版浏览器（如 IE10 及更早）不识别 <code><aside></aside> 语义标签，或项目强制要求 DOM 结构中避免 HTML5 语义元素（例如 SSR 渲染兼容、微前端子应用隔离、CSS 重置策略）。此时用 <div> 手动模拟 <code><aside></aside> 的逻辑，核心不是“长得像”，而是“行为和可访问性一致”。
- 必须添加
role="complementary"，否则屏幕阅读器不会将其识别为辅助内容区
- 建议加上
aria-labelledby 或 aria-label，明确说明侧边栏用途（如 aria-label="文章相关推荐"）
- 不要仅靠 CSS 浮动或
position: absolute 实现布局——这会破坏文档流与语义顺序，影响键盘焦点和读屏顺序
display: flex 布局下 <div class="aside"> 宽度不生效？<p>常见错误是把侧边栏放在 <code>flex 容器里却没设主轴尺寸约束。Flex 项默认会收缩（flex-shrink: 1），即使写了 width: 280px，也可能被压缩为最小内容宽。
- 给侧边栏加
flex: 0 0 280px（即不伸展、不收缩、基准宽 280px）
- 主内容区用
flex: 1 占满剩余空间，避免用 width: calc(100% - 280px) —— 后者在缩放或响应式时易出错
- 若父容器未设
display: flex，或漏了 flex-direction: row，flex 属性完全无效
如何让 <div class="aside"> 在移动端自动折叠？<p>侧边栏的“独立逻辑”不仅指结构，还包括响应式行为：PC 端常驻，移动端需收起并提供触发入口。关键不在隐藏本身，而在保持可访问性不降级。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>用 <code>max-width 媒体查询 + transform: translateX(100%) 隐藏（比 display: none 更安全，不破坏焦点流）
role="complementary"，否则屏幕阅读器不会将其识别为辅助内容区aria-labelledby 或 aria-label，明确说明侧边栏用途（如 aria-label="文章相关推荐"）position: absolute 实现布局——这会破坏文档流与语义顺序，影响键盘焦点和读屏顺序display: flex 布局下 <div class="aside"> 宽度不生效？<p>常见错误是把侧边栏放在 <code>flex 容器里却没设主轴尺寸约束。Flex 项默认会收缩（flex-shrink: 1），即使写了 width: 280px，也可能被压缩为最小内容宽。
- 给侧边栏加
flex: 0 0 280px（即不伸展、不收缩、基准宽 280px） - 主内容区用
flex: 1占满剩余空间，避免用width: calc(100% - 280px)—— 后者在缩放或响应式时易出错 - 若父容器未设
display: flex，或漏了flex-direction: row，flex属性完全无效
如何让 <div class="aside"> 在移动端自动折叠？<p>侧边栏的“独立逻辑”不仅指结构，还包括响应式行为：PC 端常驻，移动端需收起并提供触发入口。关键不在隐藏本身，而在保持可访问性不降级。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>用 <code>max-width 媒体查询 + transform: translateX(100%) 隐藏（比 display: none 更安全，不破坏焦点流）
aria-expanded="false" 和 aria-hidden="true" 同步控制<button></button> 而非 <div>，且绑定 <code>aria-controls="aside-id"inert 属性（或手动移除/恢复 tabindex）侧边栏内链接点击后页面跳转，但焦点丢失怎么办？
这是纯 <div> 模拟时最易忽略的细节：原生 <code><aside></aside> 不接管焦点，但自定义侧边栏若含交互元素（如搜索框、筛选按钮），用户键盘操作后焦点可能“掉出”组件外，导致后续 Tab 键无法继续在侧边栏内循环。
- 给侧边栏容器加
tabindex="-1"，使其可被脚本聚焦 - 在用户打开侧边栏后，用
element.focus()主动将焦点移到第一个可聚焦子元素（如首链接或搜索框） - 实现键盘循环：监听
keydown，当焦点在末尾元素且按Tab时，preventDefault()并跳回首个元素 - 不要依赖 CSS
outline: none彻底隐藏焦点环——可用:focus-visible精准控制
侧边栏是否“独立”，不取决于它用了什么标签，而在于它是否在结构、行为、可访问性三个层面都自洽。手写 <div> 时，补全这些逻辑比写对一个 class 名难得多。</div>
