Accessible SVG setup
The title is the accessible name.
<svg width="80px" height="80px" viewBox="0 0 80 80" focusable="false" aria-labelledby="logo-header" role="img" > <title id="logo-header">Logo Level Level</title> [ groups and paths ] </svg>
Remove tooltip
The aria-label is the accessible name.
<svg width="80px" height="80px" viewBox="0 0 80 80" focusable="false" aria-label="Logo Level Level" role="img" > [ groups and paths ] </svg>
Use the icon in a button
The aria-label on the button is the accessible name, the SVG content is overruled by the aria-label.
<button aria-label="Menu"> <svg width="40" height="40" viewBox="0 0 100 80" focusable="false" role="presentation" > <rect width="100" height="20"></rect> <rect y="30" width="100" height="20"></rect> <rect y="60" width="100" height="20"></rect> </svg> </button>