Diferencia entre revisiones de «Principio 3/3.1 Leíble/3.1.1-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 1: Línea 1:
== '''3.1.1- A. Idioma de la página''' ==
{{CriterioWCAG
|id_wcag_criterio=3.1.1
|id_wcag_subcriterio=3.1.1-A
|wcag_titulo_criterio=3.1.1-A. Idioma de la página
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=3_Comprensible
|wcag_principio_url=Principio_3
|wcag_pauta=3.1_Legible
|wcag_pauta_url=Principio_3/3.1_Legible
|wcag_grupo=Lenguaje
|wcag_subgrupo=Idioma_principal
|wcag_subcriterio_url=Principio_3/3.1_Legible/3.1.1-A


=== Identificación general del criterio ===
|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>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


<html>
|wcag_lista_discapacidades=
<!-- criterio 3.1.1-A -->
[[Categoría:Discapacidad visual total]]
<article class="wcag-card">
[[Categoría:Discapacidad cognitiva]]
<section class="wcag-info">
 
|wcag_texto_criterioOAW=
Se debe identificar el idioma principal de la página con los atributos adecuados según la gramática usada y con un código de idioma correcto.
|wcag_descripcion_resumida=
El idioma principal de la página debe declararse correctamente para que los agentes de usuario puedan pronunciar y procesar el contenido sin errores.
|wcag_objetivo=
Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta, especialmente lectores de pantalla.
|wcag_importancia=
Las personas usuarias de lectores de pantalla dependen de la identificación correcta del idioma para recibir pronunciación adecuada. Un marcado incorrecto genera errores de comprensión y dificulta el acceso al contenido.
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html Understanding SC 3.1.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#language-of-page WCAG Quick Reference – 3.1.1]</span></li>
<li>[https://www.w3.org/International/articles/language-tags/ W3C — Language tags]</li>
<li>[https://webaim.org/techniques/screenreader/#language WebAIM — Screen Readers & Language]</li>
</ul>
|wcag_recursos=
<ul>
<ul>
  <li>
<li>Atributos <code>lang</code> y <code>xml:lang</code></li>
    <span class="label">Nivel:</span>
<li>Códigos BCP47 (ej: <code>es</code>, <code>en-US</code>, <code>ca</code>)</li>
    <span class="value">A</span>
<li>Validadores HTML W3C</li>
  </li>
 
  <li>
      <span class="label">Versión:</span>
      <span class="value">2.2</span>
  </li>
 
  <li>
      <span class="label">Principio:</span>
      <span class="value">3. Comprensible</span>
  </li>
 
  <li>
      <span class="label">Pauta:</span>
      <span class="value">3.1 Legible</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">Texto</span>
  </li>
</ul>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
</section>
|wcag_pasos_evaluacion=
 
<ol class="paso-list">
    <section class="wcag-users">
<li><span class="paso-badge">Paso 1.</span> Revisar el código fuente y localizar atributo <code>&lt;html lang="..."&gt;</code>.</li>
      <p>Usuarios afectados</p>
<li><span class="paso-badge">Paso 2.</span> Comprobar que el código de idioma es válido (BCP47).</li>
      <ul>
<li><span class="paso-badge">Paso 3.</span> Confirmar que coincide con el idioma real del contenido.</li>
        <li>
<li><span class="paso-badge">Paso 4.</span> Probar con lector de pantalla.</li>
          <img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
</ol>
          <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span>
|wcag_resultado_evaluacion=
        </li>
El idioma principal de la página está identificado y coincide con el contenido.
      </ul>
|wcag_ejemplo_evaluacion=
    </section>
<pre class="wcag-codigo-html">
  </article>
<html lang="es">
<body>
  <h1>Bienvenido</h1>
</body>
</html>
</html>
=== Descripción y comprensión del criterio ===
Se debe identificar el idioma principal de la página con los atributos adecuados según la gramática usada y con un código de idioma correcto
==== 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 ====
<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.
<html>
  <iframe width="100%" height="400"
          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>
=== Evaluación del criterio ===
==== 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>.
<pre class="wcag-codigo-html">
<html lang="ES">
</pre>
</pre>
 
|wcag_otras_herramientas_evaluacion=
</div>
<ul>
 
<li>Validador HTML W3C</li>
==== Otras herramientas de evaluación ====
<li>Axe / Lighthouse</li>
<div class="wcag-info-criterio">
<li>Navegación con NVDA / JAWS / VoiceOver</li>
'''Herramienta de inspección con un Bookmarklet'''
</ul>
 
}}
Existen otras maneras de observar este criterio en un sitio web.
 
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>
<div class="highlight-box">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
 
    <a class="bookmarklet-button"
      href="javascript:(function(){alert('Idioma de la página actual:\n' + document.documentElement.lang);})();">
      Haz clic para saber el idioma de esta página
    </a>
  </div>
</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 pagina se leer en el idioma correspondiente.
 
Por ejemplo: texto de la página web en español, el lector de pantalla ha de leer la información en idioma español.
 
</div>

Revisión del 13:14 5 nov 2025

3.1.1-A. Idioma de la página

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)

  • Se debe identificar el idioma principal de la página con los atributos adecuados según la gramática usada y con un código de idioma correcto.

Comprensión del criterio

Descripción resumida

El idioma principal de la página debe declararse correctamente para que los agentes de usuario puedan pronunciar y procesar el contenido sin errores.

Objetivo

Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta, especialmente lectores de pantalla.

Importancia de cumplir el criterio

Las personas usuarias de lectores de pantalla dependen de la identificación correcta del idioma para recibir pronunciación adecuada. Un marcado incorrecto genera errores de comprensión y dificulta el acceso al contenido.

Referencias WCAG

Recursos de apoyo

  • Atributos lang y xml:lang
  • Códigos BCP47 (ej: es, en-US, ca)
  • Validadores HTML W3C

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Revisar el código fuente y localizar atributo <html lang="...">.
  2. Paso 2. Comprobar que el código de idioma es válido (BCP47).
  3. Paso 3. Confirmar que coincide con el idioma real del contenido.
  4. Paso 4. Probar con lector de pantalla.

Resultado esperado

El idioma principal de la página está identificado y coincide con el contenido.

Ejemplo

<html lang="es">
<body>
  <h1>Bienvenido</h1>
</body>
</html>

Otras herramientas de evaluación

  • Validador HTML W3C
  • Axe / Lighthouse
  • Navegación con NVDA / JAWS / VoiceOver










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.1.1-A. Idioma de la página

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.1_Leíble/3.1.1-A&oldid=3501»