htmlaccessibilitywai-aria

Do I need aria-hidden for a decorative <svg> within a <button>?

If I have a button:

<button>
    <svg width="1em" class="inline"><use href="#start-icon"></use></svg>
    Start
</button>

Will screen readers ignore <svg> (which is a desired behavior) or I should hide it (with aria-hidden, for instance)?

Solution

  • By default, screen readers will announce the <svg> content if it is accessible. So yeah, you should hide it using aria-hidden :)

    <svg width="1em" class="inline" aria-hidden="true"><use href="#start-icon"></use></svg>