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
Etiqueta: Reversión manual
 
(No se muestran 36 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== 1.1.1- A. Alternativa textual breve obligatoria ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.1.1
  Análisis interno:
|id_wcag_subcriterio=1.1.1-A|wcag_otras_herramientas_evaluacion=
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
<ul>
  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. 
<li>'''Inspección del navegador''': comprobar en el código que existe un elemento <code>&lt;title&gt;</code> en la sección <code>&lt;head&gt;</code> y que su contenido es descriptivo y único para esa página.</li>
-->
<li>'''Verificación en la pestaña del navegador''': revisar el título mostrado en la barra/pestaña y confirmar que refleja claramente el contenido o propósito de la página.</li>
<html>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) iniciar la lectura de la página para confirmar que el título se anuncia correctamente.</li>
<!-- criterio 1.1.1-A -->
<li>'''Validadores''': usar herramientas como W3C HTML Validator o extensiones de accesibilidad para detectar ausencia o duplicación del elemento <code>&lt;title&gt;</code>.</li>
<article class="wcag-card">
</ul>
  <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>
 
      <li>
        <span class="label">Principio:</span>
        <span class="value">1. Perceptible</span>
      </li>
 
      <li>
        <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>
 
  <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>
 
  </section>
 
  <section class="wcag-infocriterio">
    <h3>Enunciado del criterio según pautas WCAG </h3>
<p>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.
</p>
 
</section>
 
</article>
</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]]
 
 
=== Comprensión del criterio ===
==== 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 ====
|wcag_titulo_criterio=1.1.1-A. Alternativa textual breve obligatoria
 
|wcag_nivel=A
<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.
|wcag_version=2.0
</div>
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.1_Textos_alternativos
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
|wcag_grupo=Contenido
|wcag_subgrupo=No-texto


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


==== Referencias WCAG  ====
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


<div class="wcag-info-criterio">  
<li class="discapacidad-item">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html  Comprender el criterio 1.1.1 (en inglés)]</span>
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>


</div>
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]


==== Recursos de apoyo ====
<div class="wcag-info-criterio">


Puedes usar guías y herramientas para escribir textos alternativos:
|wcag_texto_criterioOAW =
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.


* Guías que enseñan a hacer descripciones claras.  
|wcag_descripcion_resumida=
** [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].
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.
* '''Imágenes informativas''': texto alternativo descriptivo con `alt`. 
* '''Imágenes decorativas''': <code>alt="" </code> o presentadas con CSS.
* '''Botones e iconos funcionales''': nombre accesible claro.
* '''Diagramas/mapas''': descripción larga disponible junto al contenido.


** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)].
|wcag_objetivo=
Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.


|wcag_importancia=
Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.


Se indica un video con un ejemplo del criterio.
|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 (W3C)]</span></li>
</ul>


|wcag_recursos=
<ul>
<li>[https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php Mapa de decisión para textos alternativos adecuados]</li>
<li>[https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión W3C para imágenes]</li>
</ul>


Se incluye un video que explica como evaluar este criterio
<html>
<html>
  <iframe width="100%" height="400"
<iframe width="100%" height="400"
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
        src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
          title="Video de YouTube"
        title="Video de ejemplo sobre alternativa textual"
          frameborder="0"
        frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        allowfullscreen>
  </iframe>
</iframe>
</html>
</html>


|wcag_tipo_evaluacion=Semiautomática


</div>
|wcag_pasos_evaluacion=
 
=== 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].'''
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
 
<ol class="paso-list">
<span class="paso-badge>Paso 2.</span>
<li><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 <code>alt</code>.
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>.
 
</li>
<span class="paso-badge>Paso 3.</span>  
<li><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 – Display alt attributes'''. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de  [[#Recursos_de_apoyo|Recursos de apoyo]])
</li>


<li>Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.</li>
</ol>


</div>
|wcag_resultado_evaluacion=
Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.


==== Ejemplo Accesible ====
|wcag_ejemplo_evaluacion=
<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 class="accessibility-card">
Se muestra un código HTML con una imagen y un texto alternativo que la describe.
<pre class="wcag-codigo-html">
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">
</pre>
</div>
</div>


==== Ejemplo NO Accesible ====
<div class="accessibility-card-error">  
 
El código HTML muestra una imagen pero no presenta ninguna etiqueta  texto alternativo <code>alt=""</code> y el usuario no puede saber su contenido
<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>


<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.
|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong>Bookmarklet diagnóstico ALT:</strong><br>


<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>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
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.
</li>
 
</ul>
</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.
 
 
{{#categorytree:1.1.1-A|mode=pages|depth=1}}

Revisión actual - 14:37 6 nov 2025

1.1.1-A. Alternativa textual breve obligatoria

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)

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

Comprensión del criterio

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 informativas: texto alternativo descriptivo con `alt`.
  • Imágenes decorativas: alt="" o presentadas con CSS.
  • Botones e iconos funcionales: nombre accesible claro.
  • Diagramas/mapas: descripción larga disponible junto al contenido.

Objetivo

Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.

Referencias WCAG

Recursos de apoyo

Se incluye un video que explica como evaluar este criterio

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 – 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.
  2. Paso 2. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)
  3. Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.

Resultado esperado

Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.

Ejemplo

Se muestra un código HTML con una imagen y un texto alternativo que la describe. 

<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">

El código HTML muestra una imagen pero no presenta ninguna etiqueta texto alternativo alt="" y el usuario no puede saber su contenido 

<img src="imagen.jpg">

Otras herramientas de evaluación

  • Bookmarklet diagnóstico 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
  • Lectores recomendados: JAWS, NVDA, VoiceOver.










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UFV1.1.1.-A-00213 noviembre 2025 13:51:16
2025 26 UdL 1.1.1-A6 noviembre 2025 13:11:51


Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-A. Alternativa textual breve obligatoria

Loading comments...




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