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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 10 ediciones intermedias del mismo usuario)
Línea 18: Línea 18:
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Visual total]]
[[Categoría:Discapacidad visual total]]
 


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad. Si un icono, imagen o cualquier elemento visual cambia en su significado o apariencia, la alternativa textual debe actualizarse para reflejar esa nueva información.
Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad.
 


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 32: Línea 35:


|wcag_importancia=
|wcag_importancia=
Si una imagen cambia pero su texto alternativo no, los usuarios que utilizan lectores de pantalla recibirán información incorrecta. Esto puede generar errores, confusión y barreras graves de acceso.   
Si una imagen cambia pero su texto alternativo no, los usuarios que utilizan lectores de pantalla recibirán información incorrecta.  
Esto puede generar errores, confusión y barreras graves de acceso.   
 
Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente.
Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente.


Línea 43: Línea 48:
No hay
No hay


|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>Seleccionar '''Images – Display alt attributes'''.</li>
<li><span class="paso-badge">Paso 2.</span> Identificar contenido gráfico que cambie dinámicamente.</li>
<li><span class="paso-badge">Paso 2.</span> Comprobar la página valorando si el texto de dicho atributo se adapta a los cambios en el contenido no textual.</li>
<li><span class="paso-badge">Paso 3.</span> Con Web Developer Toolbar: Images → Display alt attributes.</li>
<li><span class="paso-badge">Paso 4.</span> Confirmar que el atributo <code>alt</code> (o nombre accesible) se actualiza con el cambio visual.</li>
<li><span class="paso-badge">Paso 5.</span> Verificar mediante lector de pantalla que la información recibida coincide con el contenido actual.</li>
</ol>
</ol>


Línea 58: Línea 62:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Un icono cambia según el estado de un formulario: 
<div class="accessibility-card">
Un icono cambia según el estado del tiempo, y su texto alternativo también.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<img src="iconoAlerta.jpg" alt="icono de alerta">
<img src="iconoSol.jpg" alt="icono de un sol, informa del buen tiempo">
</pre>
</pre>
Tras corregir los datos del formulario:
Al actualizar la página, el icono ha cambiado y el texto alternativo también.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<img src="iconoInfo.jpg" alt="icono de información">
<img src="iconoLluvia.jpg" alt="icono de lluvia, indica que lloverá">
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
 
<ul>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<li>
<strong>Bookmarklet diagnóstico ALT:</strong><br/>
<html>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
<a class="bookmarklet-button"
<a class="bookmarklet-button"
href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();">
href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();">
Ver ALT de imágenes dinámicas
Ver ALT de imágenes dinámicas
</a>
</a>
</div>
</html>
</html>
 
</li>
<li>
<strong>Lectores de pantalla recomendados:</strong> JAWS, NVDA, VoiceOver   
<strong>Lectores de pantalla recomendados:</strong> JAWS, NVDA, VoiceOver   
Validar que la descripción cambia cuando lo hace la imagen.
Validar que la descripción cambia cuando lo hace la imagen.
 
</li>
</ul>
}}
}}

Revisión actual - 17:48 4 nov 2025

1.1.1-B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual

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)

  • Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad.

Comprensión del criterio

Descripción resumida

Cuando un contenido visual cambia dinámicamente (por ejemplo, un icono de error que se convierte en icono de éxito tras completar un formulario), la alternativa textual también debe actualizarse para mantener la precisión y evitar confusión a usuarios que utilizan tecnologías de apoyo.

Objetivo

Garantizar que los usuarios que dependen de lectores de pantalla reciban información siempre precisa, actualizada y coherente con el estado visual de la interfaz, especialmente en contenidos dinámicos o interactivos.

Importancia de cumplir el criterio

Si una imagen cambia pero su texto alternativo no, los usuarios que utilizan lectores de pantalla recibirán información incorrecta.

Esto puede generar errores, confusión y barreras graves de acceso.

Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente.

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.
  1. Paso 1.Seleccionar Images – Display alt attributes.
  2. Paso 2. Comprobar la página valorando si el texto de dicho atributo se adapta a los cambios en el contenido no textual.

Resultado esperado

El texto alternativo cambia automáticamente cuando cambia el estado visual del contenido, proporcionando información precisa y actualizada para tecnologías de apoyo.

Ejemplo

Un icono cambia según el estado del tiempo, y su texto alternativo también. 

<img src="iconoSol.jpg" alt="icono de un sol, informa del buen tiempo">

Al actualizar la página, el icono ha cambiado y el texto alternativo también. 

<img src="iconoLluvia.jpg" alt="icono de lluvia, indica que lloverá">

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 dinámicas
  • Lectores de pantalla recomendados: JAWS, NVDA, VoiceOver Validar que la descripción cambia cuando lo hace la imagen.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual

Loading comments...




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