Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-E»
De WCAG Wiki
Sin resumen de edición |
|||
| (No se muestran 26 ediciones intermedias de otro usuario) | |||
| Línea 1: | Línea 1: | ||
== | {{CriterioWCAG | ||
|id_wcag_criterio=1.1.1 | |||
|id_wcag_subcriterio=1.1.1-E | |||
|wcag_titulo_criterio=1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak | |||
|wcag_nivel=A | |||
|wcag_version=2.0 | |||
|wcag_principio=1_Perceptible | |||
|wcag_principio_url=Principio_1 | |||
|wcag_pauta=1.1_Textos_alternativos | |||
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo | |||
|wcag_grupo=Contenido | |||
|wcag_subgrupo=No-texto | |||
< | |wcag_discapacidades= | ||
<li class="discapacidad-item"> | |||
- Discapacidad | [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | ||
- | <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | ||
- | <span class="gravedad gravedad-grave">Barrera grave</span> | ||
- | </li> | ||
</ | <li class="discapacidad-item"> | ||
[[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> – | |||
<span class="gravedad gravedad-leve">Barrera leve</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad visual total]] | |||
= | |wcag_texto_criterioOAW= | ||
El arte ASCII, emoticonos y leetspeak deben tener alternativas textuales cercanas que transmitan la misma información. | |||
= | |wcag_descripcion_resumida= | ||
Cuando se emplean caracteres ASCII para crear dibujos, emoticonos o escritura no convencional como leetspeak (ej.: "H0L4"), es necesario incluir una explicación textual al lado para que los lectores de pantalla y usuarios con dificultades cognitivas puedan comprender el contenido. | |||
Ejemplos de contenido: | |||
- Arte ASCII | |||
@@@@ | @@@@ | ||
@....@ | @....@ | ||
@.@@.@ | @.@@.@ | ||
@....@ | @....@ | ||
@@@@ | @@@@ | ||
- Emoticono: `:D` | |||
- Leetspeak: `H0L4` | |||
|wcag_objetivo= | |||
Garantizar que contenido expresado de forma no estándar mediante símbolos o caracteres especiales sea comprensible para todas las personas, incluyendo usuarios de lectores de pantalla o personas con dificultades cognitivas. | |||
|wcag_importancia= | |||
Los lectores de pantalla pueden leer incorrectamente arte ASCII, emoticonos o texto leetspeak, produciendo mensajes incompletos o confusos. | |||
Una explicación textual evita malentendidos y asegura acceso equitativo a la información. | |||
|wcag_referencias= | |||
<ul> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1: Non-text Content]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H86 Technique H86 – Providing text alternatives for ASCII art, emoticons, and leetspeak]</span></li> | |||
</ul> | |||
|wcag_recursos= | |||
No hay | |||
|wcag_tipo_evaluacion=Semiautomática | |||
|wcag_pasos_evaluacion= | |||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Seleccionar '''Images – Display alt attributes'''.</li> | |||
<li><span class="paso-badge">Paso 2.</span> Localizar arte ASCII, emoticonos o leetspeak.</li> | |||
<li><span class="paso-badge">Paso 3.</span> Verificar que se proporciona un texto alternativo adecuado inmediatamente antes o después.</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
Los emoticonos, arte ASCII y texto leetspeak cuentan con una descripción accesible cercana que explica su significado para usuarios con lectores de pantalla o dificultades cognitivas. | |||
== | |wcag_ejemplo_evaluacion= | ||
<div class="accessibility-card"> | |||
Ejemplo accesible de emoticono y leetspeak: | |||
< | <pre class="wcag-codigo-html"> | ||
<span role="img" aria-label="Emoticono de cara feliz, indica satisfacción">😀</span> | |||
<span aria-label="HOLA">H0L4</span> | |||
</pre> | |||
</div> | |||
< | |wcag_otras_herramientas_evaluacion= | ||
<ul> | |||
<li> | |||
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver | |||
Verificar que la información transmitida es comprensible. | |||
</li> | |||
<li> | |||
<strong>Inspector del navegador:</strong> | |||
Comprobar que las descripciones alternativas están presentes y son correctas. | |||
</li> | |||
</ul> | |||
}} | |||
= 1. SUBCRITERIO 1.1.1-E: Contenido no textual = | |||
'''ID del Criterio:''' 1.1.1-E Contenido no textual (Nivel A) | |||
1.1. Ejemplo No Accesible (NOA) | |||
'''URL de origen:''' <nowiki>https://www.lingscars.com</nowiki> | |||
'''Explicación:''' | |||
En la página principal de LingsCars se muestran múltiples imágenes promocionales que transmiten información visual relevante. Sin embargo, algunas imágenes no contienen el atributo <code>alt</code> o este es inexistente. Al no incluir una alternativa textual descriptiva, el contenido visual no puede ser interpretado por tecnologías asistivas. | |||
< | |||
</ | |||
El criterio 1.1.1 establece que toda imagen informativa debe disponer de un texto alternativo que describa su función o contenido. En este caso, al no existir ese atributo, se incumple el nivel A de las WCAG. | |||
'''Impacto:''' | |||
Este problema afecta gravemente a personas ciegas o con discapacidad visual que utilizan lectores de pantalla, ya que no pueden acceder al contenido informativo que transmite la imagen. También perjudica a usuarios con imágenes desactivadas o con conexiones lentas. | |||
----1.2. Ejemplo Accesible (ACC) | |||
'''URL de origen:''' <nowiki>https://www.apple.com</nowiki> | |||
'''Explicación:''' | |||
En las páginas de producto de Apple, las imágenes incluyen atributos <code>alt</code> descriptivos que permiten identificar el modelo y características del producto. Esto garantiza que la información visual esté disponible también en formato textual. | |||
'''Impacto:''' | |||
Permite que usuarios con lector de pantalla comprendan el contenido visual, asegurando igualdad de acceso a la información y cumplimiento del nivel A. | |||
Revisión actual - 18:58 16 feb 2026
1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.1_Textos_alternativos
- Grupo: Contenido
- Subgrupo: No-texto
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Cognitiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- El arte ASCII, emoticonos y leetspeak deben tener alternativas textuales cercanas que transmitan la misma información.
Comprensión del criterio
Descripción resumida
Cuando se emplean caracteres ASCII para crear dibujos, emoticonos o escritura no convencional como leetspeak (ej.: "H0L4"), es necesario incluir una explicación textual al lado para que los lectores de pantalla y usuarios con dificultades cognitivas puedan comprender el contenido.
Ejemplos de contenido: - Arte ASCII
@@@@ @....@ @.@@.@ @....@ @@@@
- Emoticono: `:D`
- Leetspeak: `H0L4`Objetivo
Garantizar que contenido expresado de forma no estándar mediante símbolos o caracteres especiales sea comprensible para todas las personas, incluyendo usuarios de lectores de pantalla o personas con dificultades cognitivas.
Importancia de cumplir el criterio
Los lectores de pantalla pueden leer incorrectamente arte ASCII, emoticonos o texto leetspeak, produciendo mensajes incompletos o confusos.
Una explicación textual evita malentendidos y asegura acceso equitativo a la información.
Referencias WCAG
Recursos de apoyo
No hay
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
Usa la herramienta de Web Developer Toolbar.
- Paso 1. Seleccionar Images – Display alt attributes.
- Paso 2. Localizar arte ASCII, emoticonos o leetspeak.
- Paso 3. Verificar que se proporciona un texto alternativo adecuado inmediatamente antes o después.
Resultado esperado
Los emoticonos, arte ASCII y texto leetspeak cuentan con una descripción accesible cercana que explica su significado para usuarios con lectores de pantalla o dificultades cognitivas.
Ejemplo ilustrativo
Ejemplo accesible de emoticono y leetspeak:
<span role="img" aria-label="Emoticono de cara feliz, indica satisfacción">😀</span> <span aria-label="HOLA">H0L4</span>
Otras herramientas de evaluación
- Lector de pantalla: JAWS, NVDA, VoiceOver Verificar que la información transmitida es comprensible.
- Inspector del navegador: Comprobar que las descripciones alternativas están presentes y son correctas.
Ejemplos accesibles y no accesibles creados por alumnos
| Última modificación | |
|---|---|
| 2526UPSA1.1.1-E-000 | 21 diciembre 2025 09:15:59 |
Comentarios
A continuación se muestran comentarios sobre el criterio 1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak
Loading comments...
1. SUBCRITERIO 1.1.1-E: Contenido no textual
ID del Criterio: 1.1.1-E Contenido no textual (Nivel A)
1.1. Ejemplo No Accesible (NOA)
URL de origen: https://www.lingscars.com
Explicación:
En la página principal de LingsCars se muestran múltiples imágenes promocionales que transmiten información visual relevante. Sin embargo, algunas imágenes no contienen el atributo alt o este es inexistente. Al no incluir una alternativa textual descriptiva, el contenido visual no puede ser interpretado por tecnologías asistivas.
El criterio 1.1.1 establece que toda imagen informativa debe disponer de un texto alternativo que describa su función o contenido. En este caso, al no existir ese atributo, se incumple el nivel A de las WCAG.
Impacto:
Este problema afecta gravemente a personas ciegas o con discapacidad visual que utilizan lectores de pantalla, ya que no pueden acceder al contenido informativo que transmite la imagen. También perjudica a usuarios con imágenes desactivadas o con conexiones lentas.
1.2. Ejemplo Accesible (ACC)
URL de origen: https://www.apple.com
Explicación:
En las páginas de producto de Apple, las imágenes incluyen atributos alt descriptivos que permiten identificar el modelo y características del producto. Esto garantiza que la información visual esté disponible también en formato textual.
Impacto:
Permite que usuarios con lector de pantalla comprendan el contenido visual, asegurando igualdad de acceso a la información y cumplimiento del nivel A.
