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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 32 ediciones intermedias del mismo usuario)
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=
<article>
[[Categoría:Discapacidad visual total]]
<section class="wcag-info">
[[Categoría:Discapacidad cognitiva]]
 
  <div class="wcag-item">
    <span class="label">Nivel:</span>
    <span class="value">A</span>
  </div>
 
  <div class="wcag-item">
      <span class="label">Versión:</span>
      <span class="value">2.2</span>
  </div>


  <div class="wcag-item">
|wcag_texto_criterioOAW=
      <span class="label">Principio:</span>
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.
      <span class="value">3. Comprensible</span>
  </div>


  <div class="wcag-item">
|wcag_descripcion_resumida=
      <span class="label">Pauta:</span>
El idioma principal de la página debe declararse correctamente para que los agentes de usuario puedan pronunciar y procesar el contenido sin errores.
      <span class="value">3.1 Legible</span>
  </div>


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


  <div class="wcag-item">
|wcag_importancia=
      <span class="label">Subcategoría:</span>
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.
      <span class="value">Texto</span>
  </div>


</section>
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H57 H57: Using the language attribute on the HTML element]</span></li>


    <section class="wcag-users">
|wcag_recursos=
      <p id="usuarios-afectados-titulo">Usuarios 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>
        </li>
      </ul>
    </section>
  </article>
</html>


=== Descripción y comprensión del criterio ===
<ul>
==== Descripción resumida ====
<li>Atributos <code>lang</code> y <code>xml:lang</code></li>
<span class="wcag-info-criterio">El idioma predeterminado de cada página web puede ser determinado por software.</span>
<li>Códigos BCP47 (ej: <code>es</code>, <code>en-US</code>, <code>ca</code>)</li>
<li>[https://www.w3.org/International/articles/language-tags Language tags in HTML and XML]


==== 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 ====
|wcag_tipo_evaluacion=Manual
<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 ====
|wcag_pasos_evaluacion=
<div class="wcag-info-criterio">
<ol class="paso-list">
Se indican las referencias con las pautas 2.1:
<li><span class="paso-badge">Paso 1.</span>
* <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>
Usando la herramienta de inspección de código del navegador, comprobar que existe el elemento <code>&lt;html&gt;</code> con los atributos <code>lang</code> y/o <code>xml:lang</code>.
</li>


</div>
<li><span class="paso-badge">Paso 2.</span>
Verificar que el código de idioma sigue la sintaxis correcta.
</li>
</ol>


==== Recursos de apoyo ====
|wcag_resultado_evaluacion=
<div class="wcag-info-criterio">
El idioma principal de la página está identificado y coincide con el idioma del contenido.
Se indica un video con un ejemplo del criterio.


<html>
|wcag_ejemplo_evaluacion=
  <iframe width="640" height="360"
<pre class="wcag-codigo-html">
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=4950"
<html lang="es">
          title="Video de YouTube"
<body>
          frameborder="0"
  <h1>Bienvenido</h1>
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
</body>
          allowfullscreen>
  </iframe>
</html>
</html>
</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>
</pre>


==== Herramientas recomendadas ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">
<ul>
'''Herramienta de inspección con un Bookmarklet'''
<li>
 
<strong>Bookmarklet:</strong><br>
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>
<html>
<div class="highlight-box">
<div class="highlight-box">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
Clica o arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver el idoma de otras páginas. <br>


    <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(){alert('Idioma de la página: \n ' + document.documentElement.lang);})();">
      Consultar idioma de la página
  Ver el idioma de la página  
    </a>
</a>
  </div>
</div>
</html>
</html>
</li>


</div>
<li>'''Inspección del código''': comprobar que el idioma principal de la página está indicado usando el atributo <code>lang</code> en la etiqueta <code>&lt;html&gt;</code> con un código de idioma válido (p. ej., <code>lang="es"</code>, <code>lang="en"</code>).</li>
<li>'''Validadores HTML''': usar el validador del W3C u otras herramientas automáticas para detectar la ausencia del atributo <code>lang</code> o códigos incorrectos.</li>
<li>'''Prueba con lectores de pantalla''': (NVDA, JAWS, VoiceOver) cargar la página desde el inicio y comprobar que el lector anuncia el idioma correcto.</li>
<li>'''Herramientas del navegador''': revisar el árbol accesible (Accessibility panel en DevTools) para confirmar que el idioma está reconocido correctamente.</li>
</ul>
 
}}

Revisión actual - 06:09 6 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

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Usando la herramienta de inspección de código del navegador, comprobar que existe el elemento <html> con los atributos lang y/o xml:lang.
  2. Paso 2. Verificar que el código de idioma sigue la sintaxis correcta.

Resultado esperado

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

Ejemplo

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

Otras herramientas de evaluación

  • Bookmarklet:
    Clica o arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver el idoma de otras páginas.
    Ver el idioma de la página
  • Inspección del código: comprobar que el idioma principal de la página está indicado usando el atributo lang en la etiqueta <html> con un código de idioma válido (p. ej., lang="es", lang="en").
  • Validadores HTML: usar el validador del W3C u otras herramientas automáticas para detectar la ausencia del atributo lang o códigos incorrectos.
  • Prueba con lectores de pantalla: (NVDA, JAWS, VoiceOver) cargar la página desde el inicio y comprobar que el lector anuncia el idioma correcto.
  • Herramientas del navegador: revisar el árbol accesible (Accessibility panel en DevTools) para confirmar que el idioma está reconocido correctamente.










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