基本上我们有像
这样的东西<Button aria-label="Open the modal">
<div>
<svgImg />
</div>
</Button>
按钮要清楚它的作用，内容不应该太重要;代表按钮的内部html只是描述按钮的功能，而不是传达其他含义(例如，X图像描述按钮关闭某些东西，"提交"标签描述按钮向服务器提交内容，等等)。
然而，使用aXe chrome扩展，它抱怨svgImg没有被标记。但是…为什么呢?难道任何屏幕阅读器都不会看到这个然后说"这里有一个打开模态的按钮"吗?
我假设你的代码有<svg>而不是<svgImg>。如果有的话，我也没有听说过后一个元素。
真正图像，例如<img>标记需要alt属性作为文本替代(您可以将其视为"标签")。如果图片在页面上有意义，那么替代文本应该描述这个意义。如果图像是装饰性的，那么alt可以是空属性，只有alt本身，或者它可以有"(quote-quote)。
<img src='foo.jpg' alt>
<img src='foo.jpg' alt="">
如果图像嵌入到按钮中，并且按钮上没有任何文本使图像本身代表按钮的功能，那么您要么需要在按钮本身上设置aria-label，要么需要在图像上设置alt属性。
<button aria-label="open dialog">
<img src="open.jpg" alt>
</button>
<button>
<img src="open.jpg" alt="open dialog">
</button>
alt属性必须因为它是<img>的必需属性，但值为空。
使用第一个例子的一个缺点是，如果图像无法加载(网速慢或用户在浏览器中关闭了图像)，那么按钮将完全为空。用户不知道它是干什么用的。那里不会有图像
在第二个例子中，如果图像不能被加载，用户将看到实际的文本"在按钮中，这通常是首选的方式。
现在回到你原来的例子，斧头工具已经决定，<svg>元素是图像，并应用相同的逻辑，因为它将一个真正的<img>元素，但这是有争议的是否正确。
<img>的默认角色为"img"(图像)，如https://w3c.github.io/html-aria/#el-img
所定义的<svg>的默认角色是而不是"img"而是在https://w3c.github.io/html-aria/#el-svg
上定义的"图形-文档"。所以从技术上讲，SVG不是图像，所以斧头规则不应该适用。
如果您想避开警告(您不应该这样做)，您可以为SVG提供一个"演示文稿";作用。
<Button aria-label="Open the modal">
<div>
<svg role="presentation"/>
</div>
</Button>
如果您真的希望SVG像图像角色一样被处理，那么指定图像角色:
<Button aria-label="Open the modal">
<div>
<svg role="img"/>
</div>
</Button>
但是如果你指定一个图像角色，那么工具会抱怨它没有可选文本，所以你还必须在<svg>上指定aria-label，但这在你的例子中是愚蠢的，因为按钮已经有一个标签，所以没有必要使SVG为图像。
总之，要么忽略来自axe的警告，因为它不正确，要么指定一个"presentation"保持工具安静的角色。
(请注意，一些屏幕阅读器将尝试宣布<text>元素嵌入到<svg>中，所以如果您想保持这种行为，您应该而不是使用表示角色。)