实用创作流程
SVG 标志无障碍：给正确的元素命名
咖啡馆的杯子标志有三种用途：单独标识店名、装饰可见品牌文字，或出现在首页链接里。每个副本都加同样的标题，可能只让界面重复，并不能帮助访客理解控件。
虚构的 Cedar Cup 示例在三种真实 HTML 情境中使用同一路径。Ciyo 创建标记并渲染页面，我们再独立打开保留文件，核对浏览器暴露的图片与链接名称。这是针对命名的示例，不是屏幕阅读器认证。
先判断标志在当前情境中的作用
从所在页面开始判断，而不是只看 SVG。标志是不是唯一的品牌标识？可见文字是否已经说出店名？整个区域是否是链接？这些答案决定哪个元素应承载信息。
我们准备一个 viewBox 为 0 0 120 100、填色为 #7A4A2A 的杯子路径。三个示例都保留该几何，只调整名称、隐藏装饰内容和链接文本，没有改变品牌绘图。
保持现有 SVG 路径不变。制作真实 HTML，展示名为 Cedar Cup 的独立信息标志、可见 Cedar Cup 文字旁的装饰副本，以及名为 Cedar Cup home、含装饰图标的首页链接。使用合适的 title、role 与 ARIA 标记。渲染并检查页面，核对暴露名称和键盘焦点，返回准确的 HTML。给独立的信息标志命名
独立示例使用 role="img"，通过 aria-labelledby 引用第一个子元素 title。标题为 Cedar Cup，浏览器暴露一张同名图片，表达品牌身份而不必描述杯子的装饰几何。
为每个相关内联实例使用唯一的 title ID。组件在页面重复时若复制相同 ID，名称可能引用错误元素。保留的示例只含一个信息副本，并指定明确 ID。
隐藏重复的装饰副本
可见文字已经写着 Cedar Cup 时，旁边的杯子在本例中属于重复信息，使用 aria-hidden="true" 和 focusable="false"。品牌身份由文字提供，图形仍可见。
不要把这种处理应用于提供额外必要信息的标志。不能因为它看起来像装饰例子，就隐藏读者仍然需要的信息。
| 情境 | 名称来源 | SVG 处理 |
|---|---|---|
| 独立标志 | 引用的标题：Cedar Cup | role="img" |
| 品牌文字旁的标志 | 可见 Cedar Cup 文字 | aria-hidden="true" |
| 首页链接 | 可见 Cedar Cup home 文字 | 链接内装饰 SVG |
为首页链接提供有意义的名称
链接的可见文字是 Cedar Cup home。其中 SVG 为装饰，因此控件名称来自文字。示例链接到本地 #home，真实网站应使用实际首页地址。
我们在独立打开的示例里按 Tab，焦点落在首页链接上，浏览器暴露的名称为 Cedar Cup home。装饰 SVG 没有再增加图片条目，这是这份页面中可观察的有限结果。
检查实际发布页面的名称
打开保存的 HTML，检查无障碍树、键盘顺序与可见标签。插入实际页头后还要检查：外层按钮、重复品牌文字或其他链接，都可能改变用户遇到的内容。
SVG title 不能代替有意义的控件文字。功能元素应明确表达用途。情境不同，就选择同样清楚的可见标签，或经过仔细核对的可访问名称，不要脱离上下文照抄。
在交付中说明使用情境
把原始 SVG、三情境示例和说明交给开发者，指出哪个实例应传达信息，哪个应当装饰。要求在最终页面及适合受众的辅助技术中检查。
颜色和名称应分别核对。名称正确的标志仍可能消失在深色背景里；清晰可见的标志也可能有无用的链接名称。
实用问答
每个 SVG 标志都应有 title 吗？
按情境选择。本例为独立品牌标识加标题，并隐藏冗余的装饰副本。
SVG title 足以为链接命名吗？
应明确命名功能元素。本例以可见 Cedar Cup home 文字作为链接名称。
测试了所有屏幕阅读器吗？
没有。我们核对了浏览器暴露的名称和键盘焦点；最终界面还应使用合适的辅助技术检查。
在真实使用情境中检查一个标志
让 Ciyo 制作信息、装饰与链接示例，再把适合的标记用于经过检查的网站实现。