SVG图形的可访问性（A11y）：title与desc标签的语义作用-H5教程-PHP中文网

SVG可访问性依赖内部和元素：作为图标名称须为直接子元素且简洁准确；补充功能说明，也须为直接子元素并置于后；仅内联SVG才能启用该语义，配合aria-hidden="false"确保被屏幕阅读器识别。

svg图形的可访问性（a11y）：title与desc标签的语义作用

SVG 的可访问性不靠 HTML 的 title 属性，而靠 SVG 内部的和 <desc> 元素</desc> 。这两个标签是 W3C 规范明确要求的语义化标记，屏幕阅读器只识别它们——且必须写对位置、格式和用法。

title 是图标“叫什么”，优先被朗读

标签提供图形最核心的名称，相当于图标的 alt 文本。比如搜索图标写 <title>搜索，关闭按钮写关闭。它必须是

✅ 正确：
❌ 错误：（HTML 属性无效）
❌ 错误：（不是直接子元素）

desc 补充“用来干什么”，增强上下文理解

提供辅助说明，帮助用户理解图形意图或操作后果。比如点击后跳转至个人资料页，或当前处于禁用状态。它同样必须是

✅ 推荐顺序：
⚠️ 注意：复杂图标（如带状态的开关、多步骤流程图）尤其需要，单靠不足以传达完整语义

内联 SVG 才能真正启用可访问性

用加 alt 属性，虽有基础可访问性，但无法支持

/<desc> 的精细控制，也无法响应状态变化。只有把 SVG 代码内联到 HTML 中（即直接写 <svg> 标签），屏幕阅读器才能解析内部语义结构。工具导出的 SVG 文件通常不带这两个标签，需手动补全，或借助 SVGR + babel-plugin-svg-dynamic-title 在构建时自动注入并支持 props 动态更新。<ul> <li>✅ 内联示例：<code><svg aria-hidden="false" focusable="false"><title>上传选择本地文件并上传至服务器...

✅ 必须配合：aria-hidden="false"（确保不被忽略）、focusable="false"（避免键盘意外聚焦）

动态场景下需绑定状态，不能静态写死

当 SVG 作为 React/Vue 组件复用时，同一个图标可能对应不同语境（如“播放” vs “暂停”）。此时

和 <desc> 应随组件 props 变化。SVGR 的 <font color="blue">babel-plugin-svg-dynamic-title</font> 插件可自动将传入的 title prop 映射为 <title> 内容，并生成唯一 ID 关联到 aria-labelledby，让屏幕阅读器实时播报最新状态。<ul> <li>例如：<code><playicon title="播放视频" desc="点击开始播放当前课程"></playicon></code> → 渲染出带动态语义的 SVG</li> <li>不推荐：用 JS 在运行时插入 <title> —— 屏幕阅读器只读取初始 DOM，后期注入无效