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
 
(No se muestran 31 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1- B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual.''' ==
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_subcriterio=1.1.1-B
|wcag_titulo_criterio=1.1.1-B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual
|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


<html>
|wcag_discapacidades=
<!-- criterio 1.1.1-B -->
<li class="discapacidad-item">
<article class="wcag-card">
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   <section class="wcag-info">
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
    <ul>
   <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
</li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
    </ul>
  </section>
   <section class="wcag-users">
    <p>Usuarios más afectados</p>
    <ul>
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
      <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span></li>
        <li>
          <img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" />
          Personas con baja visión – <span class="gravedad">Barrera leve</span>
        </li>
    </ul>
  </section>
</article>
 
<!--
Análisis:
- Discapacidad más afectada: Personas con discapacidad visual total
- Problema: Si las alternativas textuales no se actualizan cuando cambia el contenido, la información puede ser incorrecta o confusa.
- Gravedad: Grave
-->
</html>
 
 
=== Descripción y comprensión del criterio ===
 
==== Descripción resumida ====


<div class="wcag-info-criterio"> Si una imagen, un icono o cualquier elemento visual cambia en su significado o apariencia, su descripción de texto (la alternativa textual) debe actualizarse automáticamente para reflejar el nuevo contenido y propósito. </div>


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


<div class="wcag-info-criterio"> El objetivo es garantizar que la información que se transmite a través del texto alternativo sea siempre '''precisa y coherente''' con lo que está sucediendo en la pantalla en ese momento.


Esto evita que los usuarios, especialmente aquellos que utilizan lectores de pantalla, reciban información desactualizada, incorrecta o confusa, manteniendo así la robustez y la accesibilidad del contenido.  
|wcag_texto_criterioOAW=
</div>
Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad.


==== Importancia de cumplir el criterio ====


<div class="wcag-info-criterio">
|wcag_descripcion_resumida=
Cuando el contenido visual cambia, como un icono de error que se convierte en marca de verificación, la alternativa textual debe actualizarse automáticamente.  
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.


Si no lo hace, las personas que usan lectores de pantalla recibirán información incorrecta, haciendo inaccesible la página.  
|wcag_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.


Cumplir este criterio requiere que diseñadores y desarrolladores gestionen correctamente los cambios dinámicos.
|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.


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


==== Referencias WCAG ====
|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>
</ul>


|wcag_recursos=
No hay


<div class="wcag-info-criterio">
|wcag_tipo_evaluacion=Semiautomática
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span>


</div>
|wcag_pasos_evaluacion=
 
==== Recursos de apoyo ====
 
<div class="wcag-info-criterio"> Para la revisión manual de este aspecto en el código, se puede utilizar la **Web Developer Toolbar**, inspeccionando la opción “Images – Display alt attributes” y verificando que el texto se adapta a los cambios en el contenido no textual.
 
La necesidad de actualizar las alternativas textuales está íntimamente ligada al concepto de hacer que los componentes dinámicos sean robustos y compatibles con los productos de apoyo (Criterio 4.1.2).
 
<html> <iframe width="640" height="360" src="https://www.youtube.com/embed/Ed8CNJrkm74?start=4950" title="Ejemplo de texto alternativo en imágenes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> </html> </div>
 
 
=== Evaluación del criterio ===
==== Tipo de comprobación ====
<span class="wcag-info-criterio">Comprobación <strong>Manual</strong> </span>
 
==== Procedimiento de evaluación ====
 
<div class="wcag-info-criterio">
<span class="paso-badge>Paso 1.</span>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


<span class="paso-badge>Paso 2.</span>  
<ol class="paso-list">
Comprueba que existe una imagen que cambia dinamicamente.
<li><span class="paso-badge">Paso 1.</span>Seleccionar '''Images – Display alt attributes'''.</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>
<span class="paso-badge>Paso 3.</span>
</ol>
Mostrar el texto alternativos de las iamgenes con '''Images – Display alt attributes'''
 
<span class="paso-badge>Paso 4.</span>
Verificar que el texto se adapta a los cambios en el contenido no textual.
 
Se debe revisar manualmente si el texto del atributo <code>alt</code> (o el nombre accesible dado por otras propiedades) se adapta a los cambios en el contenido no textual.
 
Los desarrolladores deben asegurarse de que, si utilizan programación (scripts/JavaScript) para crear componentes dinámicos, el nombre, la función, los estados y los valores se actualicen correctamente y se expongan a la API de accesibilidad (Criterio 4.1.2).
 
</div>


==== Ejemplo ====
|wcag_resultado_evaluacion=
<div class="wcag-info-criterio">
El texto alternativo cambia automáticamente cuando cambia el estado visual del contenido, proporcionando información precisa y actualizada para tecnologías de apoyo.
Un icono se actualiza cuando se rellena el formulario correctamente.


Primero el usuario introduce datos erroneos y se muestra un icono de alerta:
|wcag_ejemplo_evaluacion=
<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>
Luego la imagen del icono ha cambiado y ha de cambiar también el texto alternativo:
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>
</div>


==== Herramientas recomendadas ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">
<ul>
'''Herramienta de inspección con un Bookmarklet'''
<li>
 
<strong>Bookmarklet diagnóstico ALT:</strong><br/>
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen que ha cambiado corresponde a la imagen actual.
 
<html>
<html>
<div class="highlight-box">
<div class="highlight-box">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
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.color = 'black';        label.style.padding = '5px';         label.style.border = '1px solid black';        label.style.fontSize = '12px';         label.style.zIndex = '1000';        label.style.whiteSpace = 'nowrap';          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
      Haz clic para ver los textos alternativos de las imagenes
</a>
    </a>
</div>
  </div>
</html>
</html>
 
</li>
</div>
<li>
<strong>Lectores de pantalla recomendados:</strong> JAWS, NVDA, VoiceOver 
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»