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


<div class="wcag-info-criterio"> Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.  
<div class="wcag-info-criterio"> 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 <code>alt</code> que explique la imagen o su función.
* '''Imágenes decorativas:''' usar <code>alt=""</code> 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.  
Así cualquier persona puede entenderlos, aunque no pueda verlos.  
Línea 78: 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
</div>
* 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>
==== Recursos de apoyo ====
<div class="wcag-info-criterio">  
 
Puedes usar guías y herramientas para escribir textos alternativos:


==== Cómo hacerlo ====
* Guías que enseñan a hacer descripciones claras.
<div class="wcag-info-criterio">
** [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].
* '''Imágenes importantes:''' poner un texto corto con <code>alt</code> que explique la imagen o su función.  


* '''Imágenes decorativas:''' usar <code>alt=""</code> o CSS, para que no molesten al lector de pantalla.  
** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)].


* '''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.
Se indica un video con un ejemplo del criterio.
</div>


==== Recursos de apoyo ====
<div class="wcag-info-criterio"> Puedes usar guías y herramientas para escribir textos alternativos:


* Guías que enseñan a hacer descripciones claras.
<html>
** [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].
  <iframe width="100%" height="400"
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
          title="Video de YouTube"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
  </iframe>
</html>


** [https://www.w3.org/WAI/tutorials/images/decision-tree/ An alt Decision Tree].


* Herramientas como ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' ayudan a ver si faltan textos alternativos o si las imágenes de fondo son solo decorativas.
</div>
</div>


=== Evaluación y aplicación práctica ===
=== 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 ====


<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
<span class="paso-badge>Paso 1.</span>
<span class="paso-badge>Paso 1.</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”.
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


<span class="paso-badge>Paso 2.</span>  
<span class="paso-badge>Paso 2.</span>
Seleccionar “Images – Display alt attributes”. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de  [[#Recursos_de_apoyo|Recursos de apoyo]])
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>
Seleccionar '''Images – Display alt attributes'''. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de  [[#Recursos_de_apoyo|Recursos de apoyo]])




</div>
</div>


==== Ejemplo ====  
==== Ejemplo Accesible ====  
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
El código de esta página está escrito en idioma español y así se indica de forma semántica con la etiqueta <strong>lang=ES (ES:Español)</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">
<html lang="ES">
    <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 código mostrado corresponde al idioma de la página.
 
La página de la wiki está escrita en <strong> español </strong>, el identificador que ha de mostrar el Bookmarklet ha de ser <strong>ES </strong>.


<html>
<html>
Línea 159: Línea 191:


     <a class="bookmarklet-button"
     <a class="bookmarklet-button"
       href="javascript:(function(){alert('Idioma de la página actual:\n' + document.documentElement.lang);})();">
       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 saber el idioma de esta página
       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»