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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''3.1.1- A.  Idioma de la página''' ==
=== Identificación general del criterio ===


<!-- 
  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>
<html>
<!-- criterio 1.1.1-A -->
<article class="wcag-card">
<article class="wcag-card">
<section class="wcag-info">
  <section class="wcag-info">
 
    <ul>
  <div class="wcag-item">
      <li>
    <span class="label">Nivel:</span>
        <span class="label">Nivel:</span>
    <span class="value">A</span>
        <span class="value">A</span>
  </div>
       </li>
 
  <div class="wcag-item">
       <span class="label">Versión:</span>
      <span class="value">2.2</span>
  </div>


  <div class="wcag-item">
      <li>
      <span class="label">Principio:</span>
        <span class="label">Versión:</span>
      <span class="value">3. Perceptible </span>
        <span class="value">2.2</span>
  </div>
      </li>


  <div class="wcag-item">
      <li>
      <span class="label">Pauta:</span>
        <span class="label">Principio:</span>
      <span class="value">3.1 Legible</span>
        <span class="value">1. Perceptible</span>
  </div>
      </li>


  <div class="wcag-item">
      <li>
      <span class="label">Categoría:</span>
        <span class="label">Pauta:</span>
      <span class="value">Contenido</span>
        <span class="value">1.1 Textos alternativos</span>
  </div>
      </li>


  <div class="wcag-item">
      <li>
      <span class="label">Subcategoría:</span>
        <span class="label">Categoría:</span>
      <span class="value">Texto</span>
        <span class="value">Contenido</span>
  </div>
      </li>


</section>
      <li>
        <span class="label">Subcategoría:</span>
        <span class="value">No-texto</span>
      </li>
    </ul>
  </section>


    <section class="wcag-users">
  <section class="wcag-users">
      <p id="usuarios-afectados-titulo">Usuarios afectados</p>
    <p>Usuarios afectados</p>
      <ul>
    <ul>
        <li>
      <li>
          <img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
        <img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
          <span>Personas con discapacidad visual total</span>
        <span>Personas con discapacidad visual total</span>
        </li>
      </li>
      </ul>
    </ul>
    </section>
  </section>
  </article>
</article>
</html>
</html>


=== Descripción y comprensión del criterio ===
==== Descripción resumida ====
<span class="wcag-info-criterio">El idioma predeterminado de cada página web puede ser determinado por software.</span>
==== Objetivo ====
<span class="wcag-info-criterio">
Proporcionar la información necesaria para que los agentes de usuario (lector de pantalla) puedan presentar el texto y otro contenido lingüístico de forma correcta.
</span>
==== Importancia de cumplir el criterio ====
<span class="wcag-info-criterio">
Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.
</span>
==== Referencias WCAG / Técnicas ====
<div class="wcag-info-criterio">
Se indican las referencias con las pautas 2.1:
* <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H57|H57: Using the language attribute on the HTML element (en inglés)] </span>
</div>
==== Recursos de apoyo ====
<div class="wcag-info-criterio">
Se indica un video con un ejemplo del criterio.


<!-- 
  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>
<html>
  <iframe width="640" height="360"
<!-- criterio 1.1.1-A -->
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=4950"
<article class="wcag-card">
          title="Video de YouTube"
  <section class="wcag-info">
          frameborder="0"
    <ul>
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      <li>
          allowfullscreen>
        <span class="label">Nivel:</span>
  </iframe>
        <span class="value">A</span>
</html>
      </li>
 
</div>
 
=== Evaluación y aplicación práctica ===
==== Tipo de comprobación ====
<span class="wcag-info-criterio">Comprobación <strong>Manual</strong> </span>
 
==== Procedimiento de evaluación ====
 
<div class="wcag-info-criterio">
<span class="paso-badge>Paso 1.</span>  
Usa la herramienta de inspección de código del navegador.
 
<span class="paso-badge>Paso 2.</span>  
Comprueba que existe en el elemento <strong><code><nowiki><html></nowiki></code> </strong>
los atributos <strong><code><nowiki> lang </nowiki></code> </strong> y/o <strong><code><nowiki> xml:lang. </nowiki></code> </strong>
 
<span class="paso-badge>Paso 3.</span> 
Verificar que el código de idioma corresponde a la identificación de idioma correcto. Comprobar los códigos de idioma en los siguientes enlaces:
* Tabla de <span lang="en">[https://www.w3schools.com/tags/ref_language_codes.asp ISO 639-1 Language Codes]</span> (lenguajes genéricos)
* <span lang="en">[https://datatracker.ietf.org/doc/html/rfc5646 Tags for Identifying Languages]</span> (dialectos de lenguajes)
</div>
 
==== Ejemplo ====
<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>.
</div>
 
<pre>
<html lang="ES">
</pre>


==== Herramientas recomendadas ====
      <li>
<div class="wcag-info-criterio">
        <span class="label">Versión:</span>
'''Herramienta de inspección con un Bookmarklet'''
        <span class="value">2.2</span>
      </li>


Existen otras maneras de observar este criterio en un sitio web.
      <li>
        <span class="label">Principio:</span>
        <span class="value">1. Perceptible</span>
      </li>


Al mostrar la información con el bookmarklet, comprobar que el código mostrado corresponde al idioma de la página.
      <li>
        <span class="label">Pauta:</span>
        <span class="value">1.1 Textos alternativos</span>
      </li>


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>.
      <li>
        <span class="label">Categoría:</span>
        <span class="value">Contenido</span>
      </li>


<html>
      <li>
<div class="highlight-box">
        <span class="label">Subcategoría:</span>
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
        <span class="value">No-texto</span>
      </li>
    </ul>
  </section>


    <a class="bookmarklet-button"
  <section class="wcag-users">
      href="javascript:(function(){alert('Idioma de la página actual:\n' + document.documentElement.lang);})();">
    <p>Usuarios afectados</p>
      Consultar idioma de la página
    <ul>
     </a>
      <li>
   </div>
        <img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
        <span>Personas con discapacidad visual total</span>
      </li>
     </ul>
   </section>
</article>
</html>
</html>
</div>




Revisión del 21:58 21 oct 2025

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

Usuarios afectados

  • Icono de una persona con discapacidad visual Personas con discapacidad visual total


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

Usuarios afectados

  • Icono de una persona con discapacidad visual Personas con discapacidad visual total



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





EVALUACIÓN

HERRAMIENTAS DE APOYO

Nombre de la herramienta: Web Developer Toolbar

PROCEDIMIENTO DE COMPROBACIÓN

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. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.


REFERENCIA WCAG 2.1

  • G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
  • H35: Providing text alternatives on applet elements
  • H37: Using alt attributes on img elements
  • H53: Using the body of the object element
  • F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
  • F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
  • F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"


LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES

Se listan diferentes ejemplos

EJEMPLO ACCESIBLE

Ejemplo accesible 1

Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido

image123 
alt="Atributo alt con un texto descriptivo y adecuado a la imagen"


EJEMPLO NO ACCESIBLE

  

    
Exemple NO accesible 1

    
Falta etiqueta alt en la imagen

    image123
    
alt=""

  



  

    
Exemple NO accesible 2

    
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen

    image123
    
alt=""


imagen accesible
En esta imagen se puede observar como correctamente hay un atributo alt


{{sust:discutido}}

<ref>Plantilla:Cita web</ref>


Cambios recientes

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