role="generic"无效且危险，因它未被ARIA 1.1/1.2规范定义，主流屏幕阅读器忽略或报错；纯布局容器应默认不加role，需语义时改用role="region"等合法地标角色并配aria-label。
别用 role="generic" —— 它在主流浏览器和屏幕阅读器中不被识别、不触发任何语义行为，也不是 ARIA 规范定义的有效角色。把它加在纯布局容器上，不仅没帮助，反而可能干扰无障碍体验。
为什么 role="generic" 是无效且危险的
ARIA 1.1 和 1.2 规范中从未定义过 generic 这个角色。它既不是“隐式角色”（如 div 默认是 role="generic" 的说法早已被废弃），也不在 WAI-ARIA Roles 词汇表中。现代辅助技术（NVDA、VoiceOver、JAWS）会直接忽略该属性，或将其当作错误处理。
- 浏览器会静默丢弃该 role，等价于没写
- 部分旧版工具链（如某些自动化检测器）可能误报为“合法”，但实际无语义作用
- 若开发者误以为它“中性安全”，可能因此跳过真正必要的语义补全（如
role="region"+aria-label）
纯布局容器的正确处理方式
对仅用于 CSS 布局、无交互、无内容意义的容器（如 <div class="grid-wrapper">），优先遵循“无为而治”原则：
<ul>
<li>
<strong>默认不加 role</strong>：原生 <code>div 和 span 在无障碍树中本就不暴露角色，这是理想状态
aria-labelledby 引用），改用 role="region" 并配 aria-label 或 aria-labelledby
role="presentation" 或 role="none" —— 它们会主动移除子元素的语义，仅适用于装饰性图片等明确无需暴露的节点需要语义时的替代方案
当布局容器实际承载了逻辑分区（如侧边栏、主内容区、页脚区域），应使用有明确含义的地标角色：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<div role="banner"> → 替代页眉包装器 <li><code><div role="main"> → 标记核心内容区域（确保页面唯一） <li><code><div role="complementary"> → 侧边栏、相关链接模块 <li><code><div role="contentinfo"> → 页脚信息区块 <p>所有地标角色都应配合 <code>aria-label（如aria-label="用户操作面板"）以避免歧义，尤其当同一角色多次出现时。验证与调试建议
用真实辅助技术验证，而非仅依赖 Lighthouse 或 axe：
- 在 Chrome 中打开开发者工具 → “Accessibility” 面板，查看节点是否出现在无障碍树中、role 值是否被解析
- 用 NVDA + F7 打开“元素列表”，检查布局容器是否意外出现在“区域”或“地标”列表里
- 运行
npx axe-cli --browser chrome http://localhost:3000，确认无aria-role相关违规
