I have a quite simple question, I’m using some buttons that does not contain any text, only an svg, but when you hover on it, a label appear (:after) which is bad for a11y. I’d like to make this a bit better. I know i can’t put id on pseudo element, therefore i cannot use the aria-labelledby.
What is the best here ? I’m not sure adding an alt to the svg would solve this, so should i just use the aria-label ?
here’s the code i use:
.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>All help is appreciated, thanks