Observation: Buttons without appropriate accessible name

Priority: Moderate Low Page: Roaming Optionen Observation Permalink

Observation Details

Clear selected button uses default english name as label

<button 
  type="button" 
  title="Clear Selected" 
  aria-label="Clear Selected" 
  class="vs__clear">
  <svg>...</svg>
</button>

Search button as well

<button>
  <svg>
    <title>search outline</title>
  </svg>
</button>

Remediation Notes

Use appropriate label for button. Use main language and a text alternative that describes the purpose of the button. E.g. "Suchen" instead of "search outline".

Also ensure, the image icon inside the button is not announced as an image. You can fix both issues by moving the label of the button to the button's content, as is built-in in HTML and as is already done in the search button.

A <button> element also should not set a role, ARIA label nor title. Limit the use of ARIA to the exact situations it is actually needed.

<button 
  class="vs__clear">
  <svg>
    <title>Eingabe zurücksetzen</title>
    ...
  </svg>
</button>

For the search button that already uses role="presentation", evaluate the actual use of the button. If the button is not needed, remove it.