|
|
| Línea 1: |
Línea 1: |
| | {{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 |
|
| |
|
| | |wcag_discapacidades= |
| | <li class="discapacidad-item"> |
| | [[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> |
|
| |
|
| == '''1.1.1- B. Las alternativas textuales se deben actualizar cuando cambia el contenido no textual.''' == | | |wcag_lista_discapacidades= |
| | [[Categoría:Visual total]] |
|
| |
|
| <html>
| | |wcag_texto_criterioOAW= |
| <!-- criterio 1.1.1-B -->
| | 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. |
| <article class="wcag-card">
| |
| <section class="wcag-info">
| |
| <ul>
| |
| <li><span class="label">Nivel:</span><span class="value">A</span></li>
| |
| <li><span class="label">Versión:</span><span class="value">2.0</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>
| |
| </ul>
| |
| </section>
| |
| </article>
| |
|
| |
|
| <!--
| | |wcag_descripcion_resumida= |
| Análisis:
| | 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. |
| - 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>
| |
|
| |
|
| [[Categoría: Visual total]]
| | |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. |
|
| |
|
| [[Categoría: Contenido]]
| | |wcag_importancia= |
| [[Categoría: Nivel-A]]
| | 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. |
| [[Categoría: Versión-2.0]]
| | Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente. |
|
| |
|
| | |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> |
|
| |
|
| === Descripción y comprensión del criterio === | | |wcag_recursos= |
| <div class="wcag-info-criterio">
| |
| Las alternativas textuales se deben actualizar cuando cambia el contenido no textual para mantener la coherencia y accesibilidad.
| |
| </div>
| |
| ==== 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 ====
| |
| | |
| <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.
| |
| </div>
| |
| | |
| ==== Importancia de cumplir el criterio ====
| |
| | |
| <div class="wcag-info-criterio">
| |
| 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.
| |
| | |
| Si no lo hace, las personas que usan lectores de pantalla recibirán información incorrecta, haciendo inaccesible la página.
| |
| | |
| Cumplir este criterio requiere que diseñadores y desarrolladores gestionen correctamente los cambios dinámicos.
| |
| | |
| </div>
| |
| | |
| ==== Referencias WCAG ====
| |
| | |
| | |
| <div class="wcag-info-criterio">
| |
| * <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.htm Comprender el criterio 1.1.1 (en inglés)]</span>
| |
| | |
| </div>
| |
| | |
| ==== Recursos de apoyo ====
| |
| <div class="wcag-info-criterio">
| |
| | |
| No hay | | No hay |
| </div>
| |
|
| |
| === Evaluación del criterio ===
| |
| ==== Tipo de comprobación ====
| |
| <div class="wcag-info-criterio">
| |
| Comprobación <strong>Manual</strong>
| |
|
| |
| Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
| |
| </div>
| |
|
| |
| ==== 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].'''
| |
|
| |
| <span class="paso-badge>Paso 2.</span>
| |
| Comprueba que existe una imagen que cambia dinámicamente.
| |
|
| |
| <span class="paso-badge>Paso 3.</span>
| |
| Mostrar el texto alternativos de las imágenes 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 ====
| |
| <div class="wcag-info-criterio">
| |
| Un icono se actualiza cuando se rellena el formulario correctamente.
| |
|
| |
| Primero el usuario introduce datos erroneos y se muestra un icono de alerta:
| |
| <div class="accessibility-card">
| |
| <pre class="wcag-codigo-html">
| |
| <img src="iconoAlerta.jpg" alt="icono de alerta">
| |
| </pre>
| |
| </div>
| |
| Luego la imagen del icono ha cambiado y ha de cambiar también el texto alternativo:
| |
| <div class="accessibility-card">
| |
| <pre class="wcag-codigo-html">
| |
| <img src="iconoInfo.jpg" alt="icono de información">
| |
| </pre>
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| ==== Otras herramientas de evaluación ====
| |
| <div class="wcag-info-criterio">
| |
| '''Herramienta de inspección con un Bookmarklet'''
| |
|
| |
| Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen que ha cambiado corresponde a la imagen actual.
| |
|
| |
| <html>
| |
| <div class="highlight-box">
| |
| <strong>Arrastra este botón a tu barra de marcadores:</strong>
| |
|
| |
| <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.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); }); })();">
| |
| Haz clic para ver los textos alternativos de las imagenes
| |
| </a>
| |
| </div>
| |
| </html>
| |
|
| |
|
| '''Lector de pantalla'''
| | |wcag_tipo_evaluacion=Manual |
|
| |
|
| Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la imagen que se ha cambiado dinamicamente, también ha cambiado su texto descriptivo.
| | |wcag_pasos_evaluacion= |
| | <ol class="paso-list"> |
| | <li><span class="paso-badge">Paso 1.</span> Abrir la página web.</li> |
| | <li><span class="paso-badge">Paso 2.</span> Identificar contenido gráfico que cambie dinámicamente.</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> |
|
| |
|
| </div>
| | |wcag_resultado_evaluacion= |
| | El texto alternativo cambia autom |
{{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
|wcag_discapacidades=
Visual total –
Barrera grave
|wcag_lista_discapacidades=
|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.
|wcag_descripcion_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.
|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.
|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.
Por ello, diseñadores y desarrolladores deben asegurarse de actualizar el texto alternativo cuando el contenido visual cambia dinámicamente.
|wcag_referencias=
|wcag_recursos=
No hay
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=
- Paso 1. Abrir la página web.
- Paso 2. Identificar contenido gráfico que cambie dinámicamente.
- Paso 3. Con Web Developer Toolbar: Images → Display alt attributes.
- Paso 4. Confirmar que el atributo
alt (o nombre accesible) se actualiza con el cambio visual.
- Paso 5. Verificar mediante lector de pantalla que la información recibida coincide con el contenido actual.
|wcag_resultado_evaluacion=
El texto alternativo cambia autom
Visual total –
Barrera grave
