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></marquee> 标签早已被废弃，HTML5 不支持，且无键盘/屏幕阅读器支持
• 想实现“滚动”效果，必须用 CSS animation 或 JS 控制 scrollLeft/transform

用 CSS @keyframes 实现可访问滚动公告

这是目前最稳妥、兼容性好、且能兼顾基本可访问性的方案。关键点：避免无限自动滚动干扰用户，提供暂停机制。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 用 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"> 中，并用 <code>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" 避免整块重读

真正难的不是让文字动起来，而是让动起来的内容对所有人可读、可停、可理解。滚动效果越炫，越要先问一句：键盘用户怎么跳过？屏幕阅读器用户听到几遍？有没有人正在专注阅读却被迫跟着跑？