如何制作一个由SEO和屏幕阅读器可访问的svg图形组成的标题？

Question

我有一个<div class="container"> <div class="box">box</div> container </div> <br> <br> <div class="container-spread"> <div class="box-spread">box</div> container </div>标签，其中只有一个SVG徽标，但网络浏览器和屏幕阅读器无法访问。我应该如何让它们可以访问？

Answer 1

使用title标记内的desc和svg标记为网络抓取工具提供替代方案。对于屏幕阅读器，您还应添加aria-label属性。

<svg aria-label="alternative for screen readers" role="img">
  <title>title</title>
  <desc>description</desc>
</svg>