在我的网页上，我有一个锚（代码如下），我直观地显示为一个图像（标识）完全隐藏的文本。我希望锚是：

• 可访问-可由屏幕阅读器正确阅读，
• 当鼠标悬停时显示工具提示（工具提示解释图像标识，可能不是每个人都能理解）。

我使用以下方法：

HTML格式

<a href="http://some-institution.com"
   title="Some Institution"
   class="replace-text-with-image">Some Institution</a>

CSS格式

.replace-text-with-image {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* Display the image. */
    width: <image-width>;
    height: <image-height>;
    background-image: url(<url-to-image>);
    background-size: <image-width> <image-height>;
    background-repeat: none;
}

上述方法存在的问题：

• 一个家伙向我报告说，在遇到链接时，他的屏幕阅读器读取了链接的内容（“一些机构”），然后链接的title（“一些机构”再次），导致“口吃”。
• 我读到（in this article），使用title作为可访问性是错误的，应该使用aria-label。

因此，我尝试重构以同时使用aria-label和title：

<a href="http://some-institution.com"
   title="Some Institution"
   aria-label="Some Institution"
   class="replace-text-with-image">Some Institution</a>

现在NVDA（我正在测试的屏幕阅读器）读取title和aria-label属性，再次导致口吃。
其他可能不起作用的解决方案：

• 当我移除title属性而只留下aria-label时，它读起来很好，但我不能移除title属性，因为这是我想要的可视化用户的解释。
• 我也可以只保留title属性，完全删除锚的内容，但我觉得有一个空锚点不是一个特别好的做法，不是吗？

这个问题的解决方案是什么？