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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 1: Línea 1:
== '''1.1.1-I. Alternativa breve para contenido sensorial ''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-I -->
|id_wcag_subcriterio=1.1.1-I
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-I. Alternativa breve para contenido sensorial
  <section class="wcag-info">
|wcag_nivel=A
    <ul>
|wcag_version=2.0
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_principio=1_Perceptible
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
|wcag_principio_url=Principio_1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_pauta=1.1_Textos_alternativos
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
|wcag_grupo=Contenido
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
|wcag_subgrupo=No-texto
    </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>
</html>
[[Categoría: Visual total]]
 
[[Categoría: Contenido]]
[[Categoría: Nivel-A]]
[[Categoría: Versión-2.0]]


|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>


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


<html>
|wcag_texto_criterioOAW=
<!--
El contenido sensorial o multimedia que no puede representarse completamente mediante texto debe incluir al menos una breve alternativa textual que identifique su naturaleza o propósito.
Análisis: 1.1.1-I
- Discapacidad: Personas con discapacidad visual total
- Problema: Contenido multimedia, sensorial o ejercicios sin alternativa textual impide la comprensión y acceso.
- Gravedad: Grave
-->
</html>
 
=== Descripción y comprensión del criterio ===
<div class="wcag-info-criterio">
El contenido multimedia, sensorial o difícil de representar en texto debe incluir al menos una alternativa breve que identifique su contenido.
</div>
==== Descripción resumida ====
 
<div class="wcag-info-criterio">
Si el contenido no puede describirse completamente (una obra musical o un vídeo artístico), debe incluir al menos una breve etiqueta textual que indique de qué trata.  
</div>


==== Objetivo ====
|wcag_descripcion_resumida=
Si un contenido genera una experiencia sensorial (como música, vídeo artístico o actividades auditivas/visuales interactivas) y no es posible describirlo completamente, debe incluirse una breve etiqueta que indique de qué trata y el objetivo del contenido.


<div class="wcag-info-criterio">
Ejemplo: 
Permitir que el usuario sepa qué tipo de contenido hay, incluso si no puede experimentarlo.
<code>alt="Ejercicio musical: identificar notas"</code>
</div>


==== Importancia de cumplir el criterio ====
|wcag_objetivo=
Permitir que las personas que no pueden percibir contenido sensorial sepan qué tipo de contenido es, para decidir si desean interactuar con él o buscar alternativas accesibles.


<div class="wcag-info-criterio">
|wcag_importancia=
Garantiza que el usuario pueda decidir si quiere consumir el contenido o buscar una alternativa accesible.  
Sin una alternativa breve, el usuario no sabe qué hay allí (ej. un vídeo, un ejercicio auditivo, un contenido artístico) y no puede comprender ni decidir si desea interactuar o buscar acceso alternativo.
</div>


==== 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>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Technique G100 – Providing a short text alternative]</span></li>
</ul>


<div class="wcag-info-criterio">
|wcag_recursos=
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html  Comprender el criterio 1.1.1 (en inglés)]</span>
No hay
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Técnica G100 – Alternativa textual corta (en inglés)]</span>
</div>


=== Evaluación del criterio ===
|wcag_tipo_evaluacion=Manual
==== 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.
|wcag_pasos_evaluacion=
</div>
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Abrir la página y localizar contenido sensorial (audio, vídeo, ejercicios auditivos, contenido visual artístico complejo).</li>
<li><span class="paso-badge">Paso 2.</span> Usar Web Developer Toolbar → Images → Display alt attributes.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que existe una alternativa textual breve identificando el contenido.</li>
</ol>


==== Procedimiento de evaluación ====
|wcag_resultado_evaluacion=
<div class="wcag-info-criterio">
El contenido sensorial cuenta con un texto alternativo breve que describe su propósito y permite a los usuarios comprender de qué trata y decidir si desean interactuar con él.
<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>
|wcag_ejemplo_evaluacion=
Seleccionar '''Images – Display alt attributes'''.
Ejemplo accesible:


<span class="paso-badge>Paso 3.</span>  
<pre class="wcag-codigo-html">
Verificar que los contenidos de esta categoría (audio, vídeo, multimedia, tests o ejercicios que podrían ser inválidos si se muestran como texto, o contenido cuya función principal es producir una experiencia sensorial específica) disponen de una alternativa textual adecuada (una etiqueta descriptiva breve)
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
</pre>


</div>
|wcag_otras_herramientas_evaluacion=
 
<strong>Bookmarklet para ver ALT:</strong><br>
==== Ejemplo ====
<div class="wcag-info-criterio">  
Se incluye el texto alternativo de una imagen que representa musica.
<div class="accessibility-card">
 
<pre class="wcag-codigo-html">
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
</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 corresponde a la imagen.


<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.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);     }); })();">
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);});})();">
      Haz clic para ver los textos alternativos de las imágenes
Ver ALT de imágenes
    </a>
</a>
  </div>
</div>
</html>
</html>


'''Lector de pantalla'''
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver — verificar comprensión básica del contenido sensorial
 
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a un codigo ASCII, u de otro tipo.


'''Inspector del navegador'''
<strong>Inspector del navegador:</strong> comprobar atributo <code>alt</code> en imágenes que presenten contenido sensorial


Puedes usar la herramienta de inspección del navegador para comprobar el texto alternativo de imagenes sensoriales </code>.
}}
 
</div>

Revisión del 11:28 4 nov 2025

1.1.1-I. Alternativa breve para contenido sensorial

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)

  • El contenido sensorial o multimedia que no puede representarse completamente mediante texto debe incluir al menos una breve alternativa textual que identifique su naturaleza o propósito.

Comprensión del criterio

Descripción resumida

Si un contenido genera una experiencia sensorial (como música, vídeo artístico o actividades auditivas/visuales interactivas) y no es posible describirlo completamente, debe incluirse una breve etiqueta que indique de qué trata y el objetivo del contenido.

Ejemplo:

alt="Ejercicio musical: identificar notas"

Objetivo

Permitir que las personas que no pueden percibir contenido sensorial sepan qué tipo de contenido es, para decidir si desean interactuar con él o buscar alternativas accesibles.

Importancia de cumplir el criterio

Sin una alternativa breve, el usuario no sabe qué hay allí (ej. un vídeo, un ejercicio auditivo, un contenido artístico) y no puede comprender ni decidir si desea interactuar o buscar acceso alternativo.

Referencias WCAG

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Abrir la página y localizar contenido sensorial (audio, vídeo, ejercicios auditivos, contenido visual artístico complejo).
  2. Paso 2. Usar Web Developer Toolbar → Images → Display alt attributes.
  3. Paso 3. Verificar que existe una alternativa textual breve identificando el contenido.

Resultado esperado

El contenido sensorial cuenta con un texto alternativo breve que describe su propósito y permite a los usuarios comprender de qué trata y decidir si desean interactuar con él.

Ejemplo

Ejemplo accesible: 
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">

Otras herramientas de evaluación

Bookmarklet para ver 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

Lector de pantalla: JAWS, NVDA, VoiceOver — verificar comprensión básica del contenido sensorial

Inspector del navegador: comprobar atributo alt en imágenes que presenten contenido sensorial










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-I. Alternativa breve para contenido sensorial

Loading comments...




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