aria-由伪元素标记

Question

我有一个非常简单的问题，我正在使用一些不包含任何文本的按钮，只有一个 svg，但是当你将鼠标悬停在它上面时，会出现一个标签（

:after

），这对 a11y 来说是不好的。我想让这变得更好一点。我知道我无法将 id 放在伪元素上，因此我无法使用

aria-labelledby

。

这里最好的是什么？我不确定向 svg 添加 alt 是否可以解决这个问题，所以我应该使用

aria-label

吗？

这是我使用的代码：

.action-icon {
    outline: none;
    border: 1px solid gray;
    border-radius: 3px;
    align-items: center;
    display: flex;
    padding: .2rem;
}

.action-icon::after {
    transform: translateX(30%);
    position: absolute;
    border-radius: 5px;
    font-size: 75%;
    white-space: nowrap;
    padding: .3rem .6rem;
    content: "";
    background: black;
    color: white;
    opacity: 0;
}

.action-icon:hover::after {
    transition: opacity 500ms ease;
    opacity: 0.7;
    pointer-events: none;
}

.delete:hover::after {
    content: "Delete entity";
}

<button>
  <img src="unsplash.it/200/200" width="20" class="delete action-icon"/>
</button>

感谢所有帮助，谢谢

Answer 1

删除图标需要可访问的文本替代。在图像上使用

alt

就足够了。

<button>
  <img alt="delete" src="unsplash.it/200/200" width="20" class="delete action-icon"/>
</button>