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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 52 ediciones intermedias del mismo usuario)
Línea 17: Línea 17:
       <li>
       <li>
         <span class="label">Versión:</span>
         <span class="label">Versión:</span>
         <span class="value">2.2</span>
         <span class="value">2.0</span>
       </li>
       </li>


Línea 61: Línea 61:
</article>
</article>
</html>
</html>
[[Categoría: Visual total]]
[[Categoría: Baja visión]]
[[Categoría: Cognitiva]]
[[Categoría: Contenido]]
[[Categoría: Nivel-A]]
[[Categoría: Versión-2.0]]


=== Descripción y comprensión del criterio ===
=== Descripción y comprensión del criterio ===
 
<div class="wcag-info-criterio">
Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual.
</div>
==== Descripción resumida ====
==== Descripción resumida ====


Línea 86: Línea 98:
==== Importancia de cumplir el criterio ====
==== Importancia de cumplir el criterio ====


<div class="wcag-info-criterio"> Si una persona no puede ver la página, solo escuchará lo que haya en el código.
<div class="wcag-info-criterio"> Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. </div>
 
Por ejemplo, un botón con un carrito debe decir "Botón Comprar", para que la persona sepa qué hace.  
</div>


==== Referencias WCAG  ====
==== Referencias WCAG  ====


<div class="wcag-info-criterio">  
<div class="wcag-info-criterio">  
* <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements]</span>
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html  Comprender el criterio 1.1.1 (en inglés)]</span>
 
* G95: Providing short text alternatives that provide a brief description of the non-text content
* G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
* G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
* H45: Using longdesc
* F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information


  </div>
  </div>
Línea 112: Línea 115:
** [https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes de tu web].
** [https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes de tu web].


** [https://www.w3.org/WAI/tutorials/images/decision-tree/ An alt Decision Tree].
** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)].




Línea 128: Línea 131:
</html>
</html>


<html>
  <iframe width="640" height="360"
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=4950"
          title="Video de YouTube"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
  </iframe>
</html>


</div>
</div>
Línea 142: Línea 136:
=== Evaluación del criterio ===
=== Evaluación del criterio ===
==== Tipo de comprobación ====
==== Tipo de comprobación ====
<span class="wcag-info-criterio">Comprobación <strong>Semiautomática</strong> </span>
<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 ====
==== Procedimiento de evaluación ====
Línea 151: Línea 149:


<span class="paso-badge>Paso 2.</span>
<span class="paso-badge>Paso 2.</span>
Seleccionar '''Images – Outline images without alt attributes''' y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.
Seleccionar '''Images – Outline images without alt attributes''' y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo <code>alt</code>.


<span class="paso-badge>Paso 3.</span>  
<span class="paso-badge>Paso 3.</span>  
Línea 159: Línea 157:
</div>
</div>


==== Ejemplo ====  
==== Ejemplo Accesible ====  
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
El texto alternativo de la imagen se muestra en el atributo <strong><code><nowiki>alt</nowiki></code> </strong>  
<p>El texto alternativo de la imagen se muestra en el atributo </p>
<div class="accessibility-card">
    <pre class="wcag-codigo-html">
<img src="imagen.jpg" alt="texto de la imagen">
    </pre>
</div>
 
</div>
 
==== Ejemplo NO Accesible ====


<pre class="wcag-codigo-html">
<div class="wcag-info-criterio">
<img src="imagen.jpg" alt="texto de la imagen">
    <p>No hay texto alternativo de la imagen </p>
</pre>
<div class="accessibility-card-error">
    <pre class="wcag-codigo-html">
<img src="imagen.jpg">
    </pre>
</div>


</div>
</div>


==== Herramientas recomendadas ====
==== Otras herramientas de evaluación ====
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
'''Herramienta de inspección con un Bookmarklet'''
'''Herramienta de inspección con un Bookmarklet'''
Existen otras maneras de observar este criterio en un sitio web.


Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
Línea 183: Línea 192:
     <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.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
       Haz clic para ver los textos alternativos de las imágenes
     </a>
     </a>
   </div>
   </div>
</html>
</html>
'''Lector de pantalla'''
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen, es comprensible.


</div>
</div>
=== Lista de ejemplos accesibles y no accesibles de este subcriterio ===
A continuación se listan ejemplos que alumnos de distintas universidades han creado dentro de un proyecto de innovación docente.
{{#ask:
[[Tiene subcriterio::1.1.1-A]]
|?Modification date#F[d/m/Y]=Última modificación
|format=table
}}

Revisión actual - 12:01 8 ene 2026

1.1.1- A. Alternativa textual breve obligatoria

  • Nivel: A
  • Versión: 2.0
  • Principio: 1. Perceptible
  • Pauta: 1.1 Textos alternativos
  • Categoría: Contenido
  • Subcategoría: No-texto

Usuarios más afectados

  • Icono de una persona con discapacidad visual Personas con discapacidad visual total - Barrera grave
  • Icono baja visión Personas con baja visión – Barrera moderada
  • Icono discapacidad cognitiva Personas con discapacidad cognitiva – Barrera leve


Descripción y comprensión del criterio

Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual.

Descripción resumida

Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.
  • Imágenes importantes: poner un texto corto con alt que explique la imagen o su función.
  • Imágenes decorativas: usar alt="" o CSS, para que no molesten al lector de pantalla.
  • Botones y formularios: darles un nombre que explique qué hacen.
  • Diagramas o mapas: hacer un texto largo que explique toda la información y ponerlo cerca del contenido.

Así cualquier persona puede entenderlos, aunque no pueda verlos.

Objetivo

Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual.

Referencias WCAG

Recursos de apoyo

Puedes usar guías y herramientas para escribir textos alternativos:


Se indica un video con un ejemplo del criterio.



Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Seleccionar Images – Outline images without alt attributes y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo alt.

Paso 3. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)


Ejemplo Accesible

El texto alternativo de la imagen se muestra en el atributo 

<img src="imagen.jpg" alt="texto de la imagen">

Ejemplo NO Accesible

No hay texto alternativo de la imagen 

 <img src="imagen.jpg">

Otras herramientas de evaluación

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.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imágenes

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen, es comprensible.

Lista de ejemplos accesibles y no accesibles de este subcriterio

A continuación se listan ejemplos que alumnos de distintas universidades han creado dentro de un proyecto de innovación docente.

 Última modificación"Fecha de modificación <span style="font-size:small;">(Modification date)</span>" es una propiedad predefinida proporcionada por Semantic MediaWiki que corresponde con la fecha de la última modificación de un sujeto.
2025 26 UdL 1.1.1-A6 noviembre 2025 13:11:51
2526UFV1.1.1.-A-00213 noviembre 2025 13:51:16
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=4226»