Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Etiqueta: Reversión manual
 
(No se muestran 21 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
{{CriterioWCAG
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_criterio=1.1.1
|id_wcag_subcriterio=1.1.1-A
|id_wcag_subcriterio=1.1.1-A|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección del navegador''': comprobar en el código que existe un elemento <code>&lt;title&gt;</code> en la sección <code>&lt;head&gt;</code> y que su contenido es descriptivo y único para esa página.</li>
<li>'''Verificación en la pestaña del navegador''': revisar el título mostrado en la barra/pestaña y confirmar que refleja claramente el contenido o propósito de la página.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) iniciar la lectura de la página para confirmar que el título se anuncia correctamente.</li>
<li>'''Validadores''': usar herramientas como W3C HTML Validator o extensiones de accesibilidad para detectar ausencia o duplicación del elemento <code>&lt;title&gt;</code>.</li>
</ul>
 
|wcag_titulo_criterio=1.1.1-A. Alternativa textual breve obligatoria
|wcag_titulo_criterio=1.1.1-A. Alternativa textual breve obligatoria
|wcag_nivel=A
|wcag_nivel=A
Línea 11: Línea 18:
|wcag_grupo=Contenido
|wcag_grupo=Contenido
|wcag_subgrupo=No-texto
|wcag_subgrupo=No-texto


|wcag_discapacidades=
|wcag_discapacidades=
Línea 32: Línea 40:


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Cognitiva]]
[[Categoría:Discapacidad cognitiva]]
 


|wcag_texto_criterioOAW =
|wcag_texto_criterioOAW =
Línea 41: Línea 50:
|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.   
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.   
- Imágenes informativas: texto alternativo descriptivo con `alt`.   
* '''Imágenes informativas''': texto alternativo descriptivo con `alt`.   
- Imágenes decorativas: `alt=""` o presentadas con CSS.   
* '''Imágenes decorativas''': <code>alt="" </code> o presentadas con CSS.   
- Botones e iconos funcionales: nombre accesible claro.   
* '''Botones e iconos funcionales''': nombre accesible claro.   
- Diagramas/mapas: descripción larga disponible junto al contenido.   
* '''Diagramas/mapas''': descripción larga disponible junto al contenido.   


|wcag_objetivo=
|wcag_objetivo=
Línea 63: Línea 72:
</ul>
</ul>


Se incluye un video que explica como evaluar este criterio
<html>
<html>
<iframe width="100%" height="400"
<iframe width="100%" height="400"
Línea 73: Línea 83:
</html>
</html>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Abrir la página web.</li>
<li><span class="paso-badge">Paso 1.</span>  
<li><span class="paso-badge">Paso 2.</span> Activar extensión Web Developer > Images > Outline images without alt attributes.</li>
Seleccionar '''Images – Outline images without alt attributes''' y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo <code>alt</code>.
<li><span class="paso-badge">Paso 3.</span> Activar Images > Display alt attributes y verificar contenido del alt.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.</li>
<li><span class="paso-badge">Paso 2.</span>  
Seleccionar '''Images – Display alt attributes'''. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de  [[#Recursos_de_apoyo|Recursos de apoyo]])
</li>
 
<li>Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.</li>
</ol>
</ol>


Línea 87: Línea 102:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible y no accesible comparado mediante código HTML.
 
<div class="accessibility-card">
Se muestra un código HTML con una imagen y un texto alternativo que la describe.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">
</pre>
</pre>
</div>
<div class="accessibility-card-error">
El código HTML muestra una imagen pero no presenta ninguna etiqueta  texto alternativo <code>alt=""</code> y el usuario no puede saber su contenido


<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<img src="imagen.jpg">
<img src="imagen.jpg">
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
 
<ul>
<li>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<strong>Bookmarklet diagnóstico ALT:</strong><br>


Línea 110: Línea 134:
</div>
</div>
</html>
</html>
 
</li>
 
<li>
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
 
</li>
</ul>
}}
}}

Revisión actual - 14:37 6 nov 2025

1.1.1-A. Alternativa textual breve obligatoria

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual.

Comprensión del criterio

Descripción resumida

Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.
  • Imágenes informativas: texto alternativo descriptivo con `alt`.
  • Imágenes decorativas: alt="" o presentadas con CSS.
  • Botones e iconos funcionales: nombre accesible claro.
  • Diagramas/mapas: descripción larga disponible junto al contenido.

Objetivo

Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.

Referencias WCAG

Recursos de apoyo

Se incluye un video que explica como evaluar este criterio

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Outline images without alt attributes y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo alt.
  2. Paso 2. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)
  3. Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.

Resultado esperado

Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.

Ejemplo

Se muestra un código HTML con una imagen y un texto alternativo que la describe. 

<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">

El código HTML muestra una imagen pero no presenta ninguna etiqueta texto alternativo alt="" y el usuario no puede saber su contenido 

<img src="imagen.jpg">

Otras herramientas de evaluación

  • Bookmarklet diagnóstico ALT:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
    Ver ALT de imágenes
  • Lectores recomendados: JAWS, NVDA, VoiceOver.










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UFV1.1.1.-A-00213 noviembre 2025 13:51:16
2025 26 UdL 1.1.1-A6 noviembre 2025 13:11:51


Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-A. Alternativa textual breve obligatoria

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-A&oldid=3773»