Search code examples
htmlbuttonsvgstructured-data

Do I need do wrap an <svg> with <button> to indicate it is a button?

So basically I have the following markup:

<button type="button"> <svg class="search"> ... </svg> </button>

The SVG itself does not indicate that it is a clickable element, but a button does. So for screen-readers (or blind people) it could be an improvement. Am I correct?

Solution

  • There is no reason you cannot put an SVG in a <button> element. Or you can add the attribute role="button" to tell screen readers that it is a button.

    <svg class="search" role="button">...</svg>