应使用带语义 class 和 ARIA 标签的 元素，如 已启用，配合支持色觉障碍的视觉样式（颜色+图标+字重）及服务端安全渲染。
怎么用 HTML 显示“双因素认证已启用”徽章
直接用 <span></span> 或 <small></small> 套一个带语义的 class，配合 CSS 控制样式最稳妥。别用图片或纯文字硬写，否则无法被屏幕阅读器识别，也不利于后续状态切换。
- 推荐结构：
<span class="mfa-status mfa-status--enabled">已启用</span>（禁用时改 class 为mfa-status--disabled） - 必须加 ARIA 属性：
aria-label="双因素认证：已启用"，让辅助技术能读出完整含义 - 避免只写“✅ 已启用”，符号无语义，且颜色色弱用户可能无法区分
为什么不能只靠颜色区分启用/未启用状态
单纯用绿色表示“已启用”、红色表示“未启用”，对色觉障碍用户（如红绿色盲）完全不可见——这不是设计瑕疵，是可访问性违规（违反 WCAG 1.4.1）。
- 必须叠加视觉差异：比如
mfa-status--enabled用绿色 + ✅ + 粗体，mfa-status--disabled用灰色 + ⚠️ + 斜体 - 字体大小别太小，最小建议
font-size: 0.85em，否则在高缩放下糊成一团 - 测试方法：开系统级色彩滤镜（Windows 高对比度 / macOS 色彩滤镜），看是否还能分辨状态
服务端渲染时如何安全注入 MFA 状态
状态值必须来自可信后端上下文，绝不能靠前端 JS 拼接或 localStorage 伪造。否则攻击者可篡改 DOM 欺骗用户。
- 模板中应这样写：
<span class="mfa-status mfa-status--<%= user.mfa_enabled ? 'enabled' : 'disabled' %>" aria-label="双因素认证：<%= user.mfa_enabled ? '已启用' : '未启用' %>"></span> - 禁止写：
document.querySelector('.mfa-status').textContent = '已启用'—— 这类 JS 注入容易被拦截或延迟执行，首次渲染时空白或错误 - 如果用 React/Vue，确保该组件是服务端直出（SSR）而非客户端 hydrate 后才挂载，否则 SEO 和首屏可访问性受损
CSS 徽章样式怎么写才不破坏布局流
用 display: inline-flex 或 display: inline-block，别用 float 或绝对定位。否则在行内文本中会错位、换行异常，或撑开父容器高度。
立即学习“前端免费学习笔记（深入）”；
- 推荐规则：
.mfa-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; } - 禁用
position: absolute：它会让徽章脱离文档流，当父元素有line-height调整时极易上飘或下沉 - 注意
vertical-align：默认是baseline，和周围文字对不齐；设成middle更稳
