Procesos creativos prácticos
Logotipo SVG accesible: nombra el elemento correcto
La taza de una cafetería puede identificar por sí sola al negocio, decorar un nombre visible o aparecer dentro de un enlace de inicio. Dar el mismo título a todas las copias puede hacer la interfaz repetitiva sin aclarar la función del control.
El ejemplo ficticio Cedar Cup usa el mismo trazado en tres contextos HTML reales. Ciyo creó el código y el render; después abrimos el archivo conservado y comprobamos los nombres de imagen y enlace expuestos. Es una prueba concreta de nombres, no una certificación con lectores de pantalla.
Decide la función del logotipo en su contexto
Empieza por la página que lo rodea. ¿La marca es el único identificador del negocio? ¿Hay texto que ya dice su nombre? ¿Toda la zona es un enlace? Las respuestas determinan qué elemento debe comunicar la información.
Preparamos un trazado de taza con viewBox 0 0 120 100 y relleno #7A4A2A. Los tres ejemplos conservan la geometría. Los cambios afectan al nombre, el contenido decorativo oculto y el texto del enlace, sin alterar el dibujo.
Conserva este trazado SVG. Crea HTML real con un logotipo informativo independiente llamado Cedar Cup, una copia decorativa junto al texto visible Cedar Cup y un enlace llamado Cedar Cup home con icono decorativo. Usa title, role y ARIA apropiados. Renderiza e inspecciona la página, comprueba los nombres expuestos y el foco de teclado y devuelve el HTML exacto.Nombra la marca informativa independiente
El ejemplo independiente usa role="img" y aria-labelledby, que referencia un elemento title situado como primer hijo. Ese título dice Cedar Cup. El navegador expone una imagen con ese nombre, identificando el negocio sin describir la forma decorativa de la taza.
Usa un ID de título único para cada instancia en línea que lo necesite. Repetir IDs en componentes puede asociar el nombre al elemento equivocado. La demostración conserva una sola copia informativa y un ID explícito.
Oculta la copia decorativa repetida
Cuando el texto visible ya dice Cedar Cup, la taza de al lado resulta redundante en este ejemplo. Usa aria-hidden="true" y focusable="false". El texto aporta la identidad y la marca sigue visible.
No ocultes así una marca que aporte información ausente en el resto de la página. Parecerse a un ejemplo decorativo no justifica eliminar datos que el lector necesita.
| Contexto | Origen del nombre | Tratamiento del SVG |
|---|---|---|
| Marca independiente | Título referenciado: Cedar Cup | role="img" |
| Marca junto al nombre | Texto visible Cedar Cup | aria-hidden="true" |
| Enlace de inicio | Texto visible Cedar Cup home | SVG decorativo dentro del enlace |
Da un nombre útil al enlace de inicio
El texto visible del enlace dice Cedar Cup home. El SVG es decorativo y el nombre del control procede del texto. La página guardada apunta a #home como demostración local; una web real debe usar su destino de inicio.
Pulsamos Tab en la demostración abierta de forma independiente. El foco llegó al enlace de inicio y el navegador expuso Cedar Cup home como nombre. El SVG decorativo no añadió otra entrada de imagen. Es un resultado específico y observable de esta página.
Comprueba los nombres en la página publicada
Abre el HTML guardado e inspecciona el árbol de accesibilidad, el orden de teclado y la etiqueta visible. Revisa la implementación tras insertarla en la cabecera: un botón, otro texto de marca o un enlace adicional pueden cambiar lo que encuentra el usuario.
El título SVG no sustituye un texto de control con significado. El elemento funcional debe aclarar su propósito. En otro contexto, elige una etiqueta visible igualmente clara o un nombre accesible comprobado, en vez de copiar el código sin considerar su uso.
Incluye el contexto en la entrega
Entrega el SVG original, el ejemplo de tres contextos y una nota que identifique las instancias informativas y decorativas. Pide una revisión de la página final con las tecnologías de asistencia que utiliza tu audiencia.
Revisa por separado color y nombres. Un logotipo bien nombrado puede desaparecer en un fondo oscuro; uno visible puede tener un nombre de enlace poco útil.
Preguntas prácticas
¿Todo logotipo SVG debe tener título?
Depende del contexto. Esta demostración titula el identificador independiente y oculta copias decorativas redundantes.
¿Basta el título SVG para nombrar un enlace?
Nombra claramente el elemento funcional. Aquí el texto visible Cedar Cup home da nombre al enlace.
¿Se probó con todos los lectores de pantalla?
No. Verificamos los nombres expuestos por el navegador y el foco de teclado. Revisa la interfaz final con tecnologías de asistencia apropiadas.
Revisa un logotipo en su contexto real
Pide a Ciyo ejemplos informativos, decorativos y enlazados, y lleva el código pertinente a una implementación del sitio que hayas comprobado.