skip to Main Content

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


  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.

    Login or Signup to reply.
  2. You may use alt on the image as suggested, or just add an aria-label to the button itself:

    <button aria-label="Delete">
      <img src="unsplash.it/200/200" width="20" class="delete action-icon"/>
    </button>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search