Los elementos svg con un rol img deben tener un texto alternativo

Garantiza que los elementos SVG con los roles img, graphics-document o graphics-symbol tengan un texto alternativo que sea accesible.

Para hacer accesible la información proporcionada por material no textual (incluidos los gráficos SVG), el Criterio de Éxito 1.1.1 requiere el uso de un texto alternativo. Dado que pueden presentarse a través de cualquier modalidad sensorial (por ejemplo, visual, auditiva o táctil) para satisfacer las necesidades del usuario, los textos alternativos son un método fundamental para hacer la información accesible. Al incluir textos alternativos, una gama más amplia de agentes de usuario puede presentar el contenido de diferentes maneras.

Por ejemplo, una persona ciega puede solicitar que el equivalente textual de una imagen sea leído mediante síntesis de voz. El texto alternativo de un archivo de audio puede presentarse para personas que no pueden oírlo, permitiéndoles leerlo. Los textos alternativos eventualmente facilitarán la traducción de la información a lenguaje de señas o a una versión más simple del mismo idioma.

Qué verifica esta regla de accesibilidad

El algoritmo para esta regla devuelve:

• True si el elemento tiene un hijo <title>

<svg id="target"><title>Time II: Party</title></svg>

• True si el hijo <title> tiene texto anidado en otro elemento.

<svg id="target"><title><g>Time II: Party</g></title></svg>

• False si el elemento no tiene un hijo <title>.

<svg id="target"></svg>

• False si el hijo <title> está vacío.

<svg id="target"><title></title></svg>

• False si el <title> es un nieto.

<svg id="target"><circle><title>Time II: Party</title></circle></svg>

• False si el hijo <title> tiene solo espacios en blanco.

<svg id="target"><title> \t\r\n </title></svg>

• False si hay múltiples títulos y el primero está vacío.

<svg id="target"><title></title><title>Time II: Party</title></svg>

Learn more:

Deque Reference

Deque University - How To Fix

→

Deque Reference

Deque Blog - Creating Accessible SVGs

→

W3C Reference

WCAG 2.1 - Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

→