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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 13 ediciones intermedias del mismo usuario)
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.2</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>
|wcag_discapacidades=
   <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span>
      <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>
  <span class="gravedad gravedad-grave">Barrera grave</span>
    </ul>
</li>
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span>
   –
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>


<!--
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 ===
|wcag_lista_discapacidades=
El contenido multimedia, sensorial o difícil de representar en texto debe incluir al menos una alternativa breve que identifique su contenido.
[[Categoría:Discapacidad visual total]]
==== Descripción resumida ====
[[Categoría:Discapacidad sordoceguera]]


<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_texto_criterioOAW=
El contenido multimedia, sensorial o difícil de representar en texto debe incluir al menos una alternativa breve que identifique su contenido.


<div class="wcag-info-criterio">
|wcag_descripcion_resumida=
Permitir que el usuario sepa qué tipo de contenido hay, incluso si no puede experimentarlo.  
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>


==== Importancia de cumplir el criterio ====
Ejemplo: 
<code>alt="Ejercicio musical: identificar notas"</code>


<div class="wcag-info-criterio">
|wcag_objetivo=
Garantiza que el usuario pueda decidir si quiere consumir el contenido o buscar una alternativa accesible.  
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>


==== Referencias WCAG ====
|wcag_importancia=
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 class="wcag-info-criterio">  
|wcag_referencias=
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span>
<ul>
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Técnica G100 – Alternativa textual corta]</span>  
<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>
</div>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Technique G100 – Providing a short text alternative]</span></li>
</ul>


=== Evaluación del criterio ===
|wcag_recursos=
==== Tipo de comprobación ====
No hay
<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_tipo_evaluacion=Semiautomática
</div>


==== Procedimiento de evaluación ====
|wcag_pasos_evaluacion=
<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].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Seleccionar '''Images – Display alt attributes'''.</li>
<li><span class="paso-badge">Paso 2.</span> Verificar que los contenidos de esta categoría disponen de una alternativa textual adecuada.</li>
</ol>


<span class="paso-badge>Paso 2.</span>
|wcag_resultado_evaluacion=
Seleccionar '''Images – Display alt attributes'''.
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 3.</span>
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)


|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se explica que contiene la imagen.
<pre class="wcag-codigo-html">
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
</pre>
</div>
</div>


==== Ejemplo ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">  
<ul>
<pre class="wcag-codigo-html">  
<li>
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
<strong>Bookmarklet para ver ALT:</strong><br>
</pre> </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>
 
</li>
'''Lector de pantalla'''
<li>
 
<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.
</li>
 
<li>
'''Inspector del navegador'''
<strong>Inspector del navegador:</strong> comprobar atributo <code>alt</code> en imágenes que presenten contenido sensorial
 
</li>
Puedes usar la herramienta de inspección del navegador para comprobar el texto alternativo de imagenes sensoriales </code>.
</ul>
 
}}
</div>

Revisión actual - 17:55 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 multimedia, sensorial o difícil de representar en texto debe incluir al menos una alternativa breve que identifique su contenido.

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 Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Display alt attributes.
  2. Paso 2. Verificar que los contenidos de esta categoría disponen de una alternativa textual adecuada.

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

Se explica que contiene la imagen. 

<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=3302»