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
2
Answers
The delete icon needs an accessible text alternative. Using an
alt
on the image is sufficient.A button’s accessible name is derived from its content, whether that content is just text or other content with an accessible text alternative. So in this case, a screenreader encountering the button would announce—
—just like it would if the markup was
<button>delete</button>
.Using an
<input type="image" alt="delete" src="...">
element is also an accessible equivalent. However, using pseudo-elements with<input>
elements can be unpredictable, so it seems off the table for the approach you outlined in your question.You may use
alt
on the image as suggested, or just add anaria-label
to the button itself: