role="marquee"无效，因ARIA规范未定义该role，浏览器忽略或降为generic；滚动须用CSS动画或JS实现，并兼顾可访问性——提供暂停、适配减少动画偏好、明确语义与焦点管理。
role="marquee" 不是合法的 ARIA role，浏览器不会识别它，也不会触发任何滚动行为——滚动公告必须靠 CSS 或 JavaScript 实现，ARIA 里根本没有这个 role。
为什么 role="marquee" 无效
ARIA 规范（WAI-ARIA 1.2）中没有定义 marquee 这个 role。使用它既不会启用滚动，也不会提升可访问性，反而可能干扰屏幕阅读器对元素语义的判断。
-
role="marquee"是无效值，浏览器会忽略或降级为role="generic" - 原生
<marquee>标签早已被废弃，HTML5 不支持，且无键盘/屏幕阅读器支持 - 想实现“滚动”效果，必须用 CSS
animation或 JS 控制scrollLeft/transform
用 CSS @keyframes 实现可访问滚动公告
这是目前最稳妥、兼容性好、且能兼顾基本可访问性的方案。关键点：避免无限自动滚动干扰用户，提供暂停机制。
- 用
aria-live="polite"告诉屏幕阅读器内容是动态更新的（适合轮播式通知） - 用
overflow: hidden+white-space: nowrap+animation模拟横向滚动 - 动画时长需足够长（建议 ≥ 10s），否则视障用户或认知障碍用户来不及阅读
- 必须提供手动暂停按钮（
aria-controls关联，用animation-play-state控制）
<div class="marquee" aria-live="polite" aria-label="最新公告"> <span class="marquee-content">【系统维护】将于今晚22:00开始，预计持续30分钟。</span> </div>
JS 控制滚动更灵活，但要注意焦点和中断逻辑
当需要响应用户交互（如 hover 暂停、点击跳转、多条消息轮播）时，JS 是必要手段，但容易出可访问性问题。
立即学习“前端免费学习笔记（深入）”；
- 不要直接操作
element.scrollLeft循环滚动——会导致焦点丢失、键盘导航中断 - 优先用
transform: translateX()配合requestAnimationFrame，保证平滑且不影响文档流 - 每条公告应包裹在独立
<li>或<div role="group">中，并用aria-labelledby或aria-describedby明确关联说明 - 必须监听
prefers-reduced-motion，开启后禁用动画：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }
替代方案：静态轮播 + 显式操作控件更可靠
对多数业务场景，“滚动”不是刚需，反而是可访问性风险源。更推荐用翻页式公告栏。
- 每条公告单独显示，用
button控制“上一条/下一条”，所有按钮带aria-label - 当前项用
aria-current="true"标记，屏幕阅读器可感知位置 - 自动轮播（如有）必须可暂停、停止、跳过，且默认不自动播放（WCAG 2.2 要求）
- 后台更新内容时，用
aria-live="polite"+aria-atomic="false"避免整块重读
真正难的不是让文字动起来，而是让动起来的内容对所有人可读、可停、可理解。滚动效果越炫，越要先问一句：键盘用户怎么跳过？屏幕阅读器用户听到几遍？有没有人正在专注阅读却被迫跟着跑？
