footer标签在卡片中不是语义化“操作区”的合理选择，它专指内容区块的结尾信息（如版权、作者），而非交互容器；用于操作按钮会误导辅助技术、破坏可访问性，且缺乏默认聚焦与布局支持，应改用等语义中性方案。
footer 标签在卡片中不是语义化“操作区”的合理选择
直接把 footer 当作按钮容器用，容易误导辅助技术、破坏可访问性，且多数 CSS 框架（如 Bootstrap、Tailwind）的卡片样式并不为 footer 预设操作按钮布局逻辑。
HTML 规范中 footer 表示“一个章节或页面的页脚”，强调的是内容归属关系（比如版权、作者信息），而非交互区域。浏览器不会给它默认 focusable 或 role=“group” 行为，键盘用户可能跳过它，屏幕阅读器也可能读作“页脚”而非“操作区”。
- 若卡片是独立可复用组件（如 Vue/React 中的
Card），footer会和父级页面的<footer></footer>语义冲突 - CSS 中
footer默认 display: block，但无内边距、对齐或 flex 布局预设，需额外重置 - 部分 SSR 框架（如 Next.js）会对页面级
footer做特殊处理，嵌套使用可能触发警告或 hydration mismatch
用 div + role="region" 或 fieldset 是更稳妥的替代方案
需要视觉上类似页脚位置的操作按钮组，优先用语义中性但可控的容器，并显式声明用途。
推荐两种写法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
<div role="region" aria-label="卡片操作">...</div>：明确告知辅助技术这是“一个操作区域”，不带语义包袱，CSS 完全自由 -
<fieldset> <legend class="sr-only">卡片操作</legend>...</fieldset>：适合含表单控件（如提交按钮、切换开关）的场景，天然支持键盘导航与聚焦管理
示例（简洁版）：
<article class="card"><header><h3>通知设置</h3></header><div class="card-body">...</div>
<div role="region" aria-label="卡片操作">
<button type="button">编辑</button>
<button type="button">删除</button>
</div>
</article>
如果坚持用 footer，必须手动补全可访问性属性
真有 legacy 约束或设计系统强要求用 footer，不能只靠标签名蒙混过关。
- 必须加
role="group"或role="toolbar"（后者更适合按钮组合） - 必须提供
aria-label或aria-labelledby，不可依赖隐式语义 - 确保其父容器（如
article或section）有明确 heading，否则footer的上下文丢失
错误写法：<footer><button>保存</button></footer>
正确写法：<footer role="toolbar" aria-label="卡片操作工具栏"><button>保存</button></footer>
Flex 布局对齐按钮时，footer 的 margin 和 align-items 容易踩坑
很多开发者用 display: flex 把按钮右对齐，却发现 footer 内部按钮没居中或间距异常——问题常出在默认样式干扰。
- 某些浏览器对
footer应用了 margin-top（如 Chrome 对footer有 1em 上边距） -
align-items: center在footer上无效，除非显式设display: flex，但此时它已脱离语义初衷 - 若卡片整体用 CSS Grid，
footer可能被 grid-area 覆盖，导致定位失效
建议统一用类名控制布局：<div class="card-actions">，再通过 <code>.card-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } 管理，比依赖 footer 的默认行为可靠得多。
真正关键的不是“能不能放”，而是“放了之后是否被正确识别、聚焦、朗读、缩放、键盘导航”。语义错位的问题，上线后很难被测试覆盖，却直接影响残障用户操作路径。
