aria-labelledby pseudo elements

Question

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

Answer 1

The delete icon needs an accessible text alternative. Using an alt on the image is sufficient.

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

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—

button "delete"

—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.