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

De WCAG Wiki
← Edición anterior
VisualWikitexto
AlumneAlexTest (discusión | contribs.)
alumnos
5 ediciones
Sin resumen de edición
 
(No se muestran 141 ediciones intermedias de 3 usuarios)
Línea 1: Línea 1:
== 1.1.1- A. Alternativa textual breve obligatoria ==
<!-- 
  Análisis interno:
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
  Problema grave: Si no se proporciona texto alternativo para contenido visual o elementos no textuales, un lector de pantalla no podrá interpretar lo que esos elementos comunican. El usuario queda “ciego” ante la información, lo que impide acceder a contenido esencial o funcional. 
-->
<html>
<!-- criterio 1.1.1-A -->
<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>


'''1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual'''
      <li>
        <span class="label">Principio:</span>
        <span class="value">1. Perceptible</span>
      </li>


=== Ejemplo Accesible. ===
      <li>
[[Archivo:Atributo-alt.png|izquierda|miniaturadeimagen]]
        <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>


Etiqueta alt en img
  <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>
        <li>
          <img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" />
          Personas con baja visión – <span class="gravedad">Barrera moderada</span>
        </li>
        <li>
          <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
          Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span>
        </li>


__________________________
    </ul>


<html>
   </section>
   <div class="accessibility-card">
</article>
    <h3>Exemple accessible</h3>
    <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
    <img src="https://juanramonescritor.es/wiki/images/thumb/0/07/Alex_%281%29.jpg/600px-Alex_%281%29.jpg" alt="image123">
    <pre>alt="imatge d'exemple accesible"</pre>
  </div>
</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 ===
<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 ====
<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.
</div>
==== Objetivo ====
<div class="wcag-info-criterio"> Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos.
</div>
==== Importancia de cumplir el criterio ====
<div class="wcag-info-criterio"> Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. </div>
==== Referencias WCAG  ====
<div class="wcag-info-criterio">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html  Comprender el criterio 1.1.1 (en inglés)]</span>
</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.
** [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/ Árbol de decisión de W3C (en inglés)].
Se indica un video con un ejemplo del criterio.


<html>
<html>
   <div class="accessibility-card">
   <iframe width="100%" height="400"
    <h3>Exemple accessible</h3>
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
    <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
          title="Video de YouTube"
    <img src="https://juanramonescritor.es/wiki/images/0/04/Videocall.png?20250222162919" alt="image123">
          frameborder="0"
    <pre>alt="imatge d'exemple accesible"</pre>
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  </div>
          allowfullscreen>
   </iframe>
  <div class="accessibility-card-error">
    <h3>Exemple NO accesible</h3>
    <p>Falta etiqueta alt en la imatge</p>
    <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
    <pre>alt=""</pre>
   </div>
</html>
</html>
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
En esta imagen se puede observar como correctamente hay un atributo alt




=== '''C) HERRAMIENTAS DE APOYO''' ===
</div>
'''Nombre de la herramienta''': Web Developer Toolbar
 
=== 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>
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>
 
==== Ejemplo Accesible ====
<div class="wcag-info-criterio">
<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 ====
 
<div class="wcag-info-criterio">
    <p>No hay texto alternativo de la imagen </p>
<div class="accessibility-card-error">
    <pre class="wcag-codigo-html">
<img src="imagen.jpg">
    </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.


'''Procedimiento de comprobación:'''
<html>
<div class="highlight-box">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>


1. 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”.
    <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 imágenes
    </a>
  </div>
</html>


2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.
'''Lector de pantalla'''


=== '''D) REFERENCIA WCAG 2.1''' ===
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.


* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
</div>


{{sust:discutido}}
=== 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.


<ref>{{Cita web |url=http://www.ejemplo.com |título=Ejemplo de título |autor=Nombre del autor |fecha=Fecha de publicación |editor=Nombre del editor }}</ref>


{{ORDENAR:Principio 1/1.1 Texto Alternativo/1.1.1- A2}}
{{#categorytree:1.1.1-A|mode=pages|depth=1}}

Revisión actual - 06:57 26 oct 2025

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.


1.1.1-A
sin páginas ni subcategorías
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=2196»