如何用HTML代码构建符合WCAG标准的警告框Alert组件-html教程-PHP中文网

警告框必须设 role="alert" 和 aria-live="assertive"，确保屏幕阅读器即时播报；关闭按钮须为语义化 button 并管理焦点；颜色对比度需达 4.5:1，错误信息须文字明确表达；aria-live 区域须预定义且更新时清空重写。

如何用html代码构建符合wcag标准的警告框alert组件

没有 role="alert" 的 div 不会被屏幕阅读器识别为警告，用户可能完全错过关键提示。仅靠颜色（如红色边框）或图标（❗）无法满足 WCAG 2.1 的 1.4.1（使用颜色）和 4.1.3（状态消息）要求。

必须添加 role="alert"，且该元素不能是 display: none 或 visibility: hidden —— 否则 ARIA 属性失效
推荐用 aria-live="assertive" 配合 role="alert"，确保内容变化时立即中断当前朗读并播报
避免把 role="alert" 放在动态插入的容器内部（比如嵌套在 div class="modal-body" 里），应直接作用于最外层警告内容容器
不要用 aria-hidden="true" 包裹警告文本，哪怕它只是临时显示 —— 这会直接屏蔽语音输出

WCAG 2.1 要求所有功能组件必须支持键盘操作（2.1.1），且交互后焦点不能丢失（2.4.3）。单纯用 × 文本或 SVG 图标而不提供可聚焦、可朗读的按钮，会导致键盘用户无法关闭，屏幕阅读器用户不知其用途。

关闭按钮必须是 <button type="button"></button>，不能是 <span></span> 或 <a href="#"></a>
添加 aria-label="关闭此警告"（不可省略为 aria-label="关闭"，缺乏上下文）
点击/回车/空格触发关闭后，焦点应回到触发警告的操作源（如提交按钮），或至少移到警告框前一个可聚焦元素 —— 不能留在已移除的 DOM 上
若警告框通过 CSS 动画淡出，需在 transitionend 后再从 DOM 移除，否则屏幕阅读器可能来不及播报“已关闭”

仅靠红色背景 + 白色文字不等于合规。WCAG 1.4.3 要求普通文本最小对比度 4.5:1；同时，错误类型必须通过文字（如“错误：”）、图标（带 aria-hidden="true"）或位置（如紧邻表单控件上方）明确表达，不能只靠颜色区分。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

检查 background-color 与 color 的实际对比度（可用浏览器插件 axe 或 WAVE），深红 #d32f2f 在白底上对比度约 3.8:1，不达标；建议改用 #c62828 或搭配深灰文字
在警告文本开头加前缀，例如 <span>警告：您的密码强度不足</span>，而非仅靠样式暗示严重性
如果用了感叹号图标，必须设 aria-hidden="true"，并确保替代文本已由正文承载，否则屏幕阅读器会重复朗读“感叹号警告：……”
禁用纯 CSS 的 ::before { content: "⚠️" } 生成图标 —— 多数屏幕阅读器不读取伪元素内容

很多前端框架（React/Vue）默认把新警告渲染进已有容器，但若该容器未预先声明 aria-live，或更新时未触发 DOM 变化（如仅修改 innerText），屏幕阅读器将静默忽略。

aria-live 容器必须在页面加载时就存在，不能 JS 创建后才挂载属性
推荐结构：<div aria-live="assertive" aria-atomic="true" class="sr-only"></div>，配合 CSS .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
插入新警告文本时，先清空再写入（el.textContent = msg），而非追加（el.append(...)），否则 aria-atomic="true" 无法保证整段重读
避免在 aria-live 区域内放链接、按钮等交互元素 —— assertive 模式下焦点不会自动进入，反而造成键盘陷阱