Saltar al contenido principal

SVG

  • Si usas svg decorativos, añade el atributo aria-hidden="true"
  • Si ofreces compatibilidad con internet explorer, añade el atributo focusable="false".
  • Para asegurarnos la compatibilidad las etiquetas title y desc si fuera necesario:
  <svg role="img">
<title>Título del svg</title>
<desc>Una descripción de la imagen svg.</desc>
...
</svg>

SVG dentro de enlace

Si el enlace incluye texto descriptivo fuera del svg, únicamente debemos añadir el atributo aria-hidden="true"

<a href="#!">
<svg aria-hidden="true">
<use xlink:href="#..."></use>
</svg>
Descargar archivo
</a>

<a href="#!">
<svg aria-hidden="true">
<use xlink:href="#..."></use>
</svg>
<span class="oculto">Descargar archivo</span>
</a>

Si el enlace no tiene texto descriptivo, debemos añadir los atributos role="img" y aria-label con la acción que se lanzará al pulsar el enlace.

<a href="#!">
<svg role="img" aria-label="Descargar archivo" >
<use xlink:href="#..." aria-hidden="true"></use>
</svg>
</a>

SVG dentro de botón

Si el botón incluye texto, únicamente añadiremos el atributo aria-hidden="true"

<button>
<svg aria-hidden="true"><!--...--></svg>
Buscar
</button>

<button>
<svg aria-hidden="true"><!--...--></svg>
<span class="oculto">Buscar</span>
</button>

Si el botón no tiene texto, añadiremos al botón el atributo aria-label con la acción.

<button aria-label="Buscar">
<svg aria-hidden="true"><!--...--></svg>
</button>