HTML徽章与标签可访问性怎么处理？辅助文本添加方法-html教程-PHP中文网

徽章和标签必须显式提供可访问文本，纯视觉徽章需用aria-label或aria-labelledby说明含义；svg徽章应加role="img"和；动态更新须配合aria-live="polite"及aria-atomic="true"确保读屏器及时感知。

html徽章与标签可访问性怎么处理？辅助文本添加方法

徽章和标签本身没有语义，屏幕阅读器默认跳过；必须显式提供可访问文本，否则视障用户完全感知不到数字、状态或含义。

纯视觉徽章（如通知角标 <span class="badge">9</span>）不包含任何语义，也不能被聚焦或朗读。不能依赖 CSS 伪元素、字体图标或 position: absolute 的“隐藏”来绕过可访问性。

若徽章紧邻可读文本（如按钮内“消息 3”），且该文本已说明功能，可用 aria-hidden="true" 隐藏徽章，但需确保父元素（如 <button></button>）已有完整可访问名称
若徽章独立存在（如侧边栏未读数、头像右上角在线状态），必须用 aria-label 直接描述其含义，例如 aria-label="您有3条未读消息"，而非 "3" 或 "badge"
避免把 aria-label 加在 <span></span> 上却让它不可聚焦——除非它包裹在交互元素内（如 <button><span aria-label="删除" ...></span></button>），否则屏幕阅读器可能忽略

内联 SVG 做徽章（比如带数字的铃铛图标）时，aria-label 虽然能用，但优先级低于原生 SVG 语义；更稳的方式是走规范路径。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

在 <svg></svg> 根节点加 role="img"，并在第一个子元素位置放 <title></title>，例如 <title>有2个新通知</title>
<title></title> 必须是 <svg></svg> 的直接子元素，且不能被 CSS display: none 或 visibility: hidden 隐藏，否则部分读屏器不读
如果 SVG 同时含交互（如点击跳转），还需加 tabindex="0" 和键盘事件监听，否则仅靠 <title></title> 不足以支持完整操作流
切勿在同一个 <svg></svg> 上同时写 aria-label 和 <title></title>——行为不可预测，某些读屏器会静默丢弃其中一个

JavaScript 修改徽章文本（如从 "1" 变成 "5"）后，屏幕阅读器不会自动感知变化；不主动通知，用户就卡在旧状态里。

把徽章元素包进 <div aria-live="polite" aria-atomic="true"> 容器中，确保更新时整块内容被重读（<code>aria-atomic="true" 防止只读变化部分）
不要用 aria-live="assertive" 处理普通通知——它会打断当前朗读，造成干扰；仅限错误、中断类强提示
若徽章是按钮的一部分（如 <button>消息<span>3</span></button>），推荐直接更新按钮的 aria-label 全量值（如改为 aria-label="消息，3条未读"），比单独活区更可靠
避免仅靠 CSS opacity: 0 或 transform: scale(0) 隐藏/显示徽章——这些不影响可访问树，读屏器仍会持续朗读旧值

最易被忽略的是：徽章常被当成“装饰”，但只要它传递状态、数量或动作意图，就不是装饰。alt="" 不适用，aria-hidden="true" 是危险默认值，而空 aria-label 或纯数字值等于没写。