标签是语义标记元件，仅标识上下文关联性，不承担阅读增强功能；阅读增强须由独立CSS或JS实现，二者需分工清晰、协同共存。
标签不是阅读增强工具，而是语义标记元件。它不负责改善可读性、放大字号或调整行高，它的唯一职责是告诉浏览器和辅助技术：“这段文字在当前上下文中被关联标注过”。把阅读增强（比如深色模式适配、字体缩放、焦点高亮）和混为一谈，会模糊语义边界，削弱其传达能力。
语义层：什么该由 承担
只表达“相关性”，不表达“重要”“强调”或“视觉优先”。它适用于以下明确有上下文锚点的场景：
- 搜索结果中匹配用户输入的关键词（如页面内搜索返回的“响应式设计”）
- 引用原文时标出被讨论的具体措辞（如“作者指出‘用户体验应前置’这一原则”）
- 代码示例中标注本次修订所改动的变量名或函数调用（如
const result = <mark>calculateTotal</mark>(items);） - 法律/规范文本中突出条文编号或关键术语（如“依据《数据安全法》第38条”）
样式层：阅读增强必须独立实现
真正提升阅读体验的功能——比如暗色模式适配、高对比度支持、焦点状态反馈、动态字体缩放——不能依赖的默认样式，也不能用 CSS 强行把它变成“阅读增强开关”。它们需要单独设计、独立控制：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 深色模式下背景色需重定义（如
background-color: #ffca28），但该规则应与全局阅读主题解耦，不干扰其他语义元素 - 色觉障碍用户依赖对比度而非颜色差异，因此必须显式设置
color与background-color组合，并通过工具验证 WCAG AA/AAA 标准 - 键盘聚焦时的视觉反馈（如外发光、边框）应作用于容器或交互元素，而非本身——它不是可聚焦目标
- 响应式字号缩放应通过
rem或clamp()控制正文，内的文字尺寸应随父级自然继承，不可单独放大破坏行高一致性
常见混淆点：哪些“看起来像高亮”的事不该交给
以下需求与语义无关，用反而造成误导：
- 文章摘要顶部加荧光色 banner（纯装饰 → 用
span+ class） - 鼠标悬停时整段文字变亮（交互反馈 → 用
:hover+ 容器选择器） - 屏幕阅读器朗读时自动停顿半秒（行为控制 → 用
aria-live或 JS 控制） - 夜间模式下所有文字统一加深（主题切换 → 用
@media (prefers-color-scheme: dark)批量控制）
协同但不替代：如何让 和阅读增强共存
两者可以共存，前提是分工清晰：
- 用标出“为什么这段值得看”，用 CSS 主题系统决定“怎么看”
- 服务端渲染时，仅对真实匹配内容注入；客户端阅读增强脚本（如字体调节器）不应修改或包裹节点
- 在无障碍测试中，分别验证：是否被读屏器识别为“marked text”，以及阅读增强功能是否在开启后仍保持语义完整
- 构建组件库时，把作为基础语义原子，把阅读增强能力封装为独立 hook 或 utility class，避免耦合
