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
Sin resumen de edición
 
(No se muestran 154 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 class="wcag-card">
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad cognitiva]]


    <dl class="wcag-info">
|wcag_texto_criterioOAW=
      <div>
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.
        <dt>Nivel</dt>
        <dd>A</dd>
      </div>
      <div>
        <dt>Versión</dt>
        <dd>2.2</dd>
      </div>
      <div>
        <dt>Principio</dt>
        <dd>Comprensible</dd>
      </div>
      <div>
        <dt>Pauta</dt>
        <dd>3.1 Legible</dd>
      </div>
      <div>
        <dt>Categoría</dt>
        <dd>Contenido</dd>
      </div>
      <div>
        <dt>Subcategoría</dt>
        <dd>Texto</dd>
      </div>
    </dl>


    <section class="wcag-users" aria-labelledby="usuarios-afectados-titulo">
|wcag_descripcion_resumida=
      <p id="usuarios-afectados-titulo">Usuarios afectados</p>
El idioma principal de la página debe declararse correctamente para que los agentes de usuario puedan pronunciar y procesar el contenido sin errores.
      <ul>
        <li>
          <img src="https://www.wikiwcag.udl.cat/images/0/08/IconoVisual.jpg" alt="Icono de una persona con discapacidad visual" />
          <span>Personas con discapacidad visual total</span>
        </li>
        <li>
          <img src="https://www.wikiwcag.udl.cat/images/2/2d/IconoBajaVision.jpg" alt="Icono de lector de pantalla" />
          <span>Usuarios de lector de pantalla</span>
        </li>
        <li>
          <img src="https://www.wikiwcag.udl.cat/images/1/19/UsuarioGenerico.png" alt="Icono de persona genérica" />
          <span>Otros con dificultades de percepción o comprensión textual</span>
        </li>
      </ul>
    </section>
  </article>
</html>


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


=== Descripción y comprensión del criterio ===
|wcag_importancia=
==== Descripción resumida ====
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.
Qué exige el criterio de forma simple.


El idioma predeterminado de cada página web puede ser determinado por software.
|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>


==== Objetivo ====
|wcag_recursos=
Qué persigue desde el punto de vista de la accesibilidad.


Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.
<ul>
<li>Atributos <code>lang</code> y <code>xml:lang</code></li>
<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]


==== Ejemplo ====
Un caso real o hipotético que ayude a entenderlo.
==== Importancia ====
Por qué es importante cumplirlo; consecuencias de no hacerlo.


Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.
|wcag_tipo_evaluacion=Manual


==== Referencias WCAG / Técnicas ====
|wcag_pasos_evaluacion=
Enlaces a las técnicas (por ejemplo, H57).
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</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>


Se indican las referencias con las pautas 2.1.
<li><span class="paso-badge">Paso 2.</span>
 
Verificar que el código de idioma sigue la sintaxis correcta.
* H57: Using the language attribute on the HTML element
</li>
 
</ol>
==== Recursos de apoyo ====
Vídeos, artículos o enlaces explicativos.
 
Video:  https://youtu.be/Ed8CNJrkm74?t=4950
 
=== Evaluación y aplicación práctica ===
==== Tipo de comprobación ====
Manual / Automática / Mixta
 
Comprobación manual
 
==== Procedimiento de evaluación ====
Pasos específicos para verificar el cumplimiento.
 
* Paso 1. Usando la herramienta de inspección de código del navegador, comprobar que existe el elemento con los atributos lang y/o xml:lang.
* Paso 2. Verificar que el código de idioma sigue la sintaxis correcta.
 
Mirar si hay:
 
* Los atributos lang y/o xml:lang y se adaptan al idioma de la pàgina.
 
* Revisar el elemento y comprovar si tiene la etiqueta adecuada según:
** Tabla de [https://www.w3schools.com/tags/ref_language_codes.asp ISO 639-1 Language Codes] (lenguajes genéricos)
** [https://datatracker.ietf.org/doc/html/rfc5646 Tags for Identifying Languages] (dialectos de lenguajes)
 
==== Herramientas recomendadas ====
Bookmarklets, extensiones, validadores, etc
 
'''Herramienta de inspección Bookmarklet'''
 
* <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:\n' + document.documentElement.lang);})();">
      📘 Consultar idioma de la página
    </a>
  </div>
</html>


==== Ejemplo accesible ====  
|wcag_resultado_evaluacion=
Descripción + código + enlace + video (si aplica).<html>
El idioma principal de la página está identificado y coincide con el idioma del contenido.
<div class="accessibility-card">
    <h3>e) Ejemplo accessible</h3>
    <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
    <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
    <pre>Explicación del ejemplo "El código HTML tiene atributo alt="en-GB" que es el idioma (inglés) en el que está escrito el contenido de la página"</pre>
    <pre> URL  <a href="https://www.sony.com.cn/">página web de SONY  (china)</a> </pre>
    <pre> VIDEO  <a href="https://youtu.be/Ed8CNJrkm74?t=5086">video de ejemplo accesible</a></pre>


   </div>
|wcag_ejemplo_evaluacion=
<pre class="wcag-codigo-html">
<html lang="es">
<body>
   <h1>Bienvenido</h1>
</body>
</html>
</html>
==== Ejemplo no accesible ====
</pre>
Descripción + código + enlace + video (si aplica).
 


|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong>Bookmarklet:</strong><br>
<html>
<html>
<div class="highlight-box">
Clica o arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver el idoma de otras páginas. <br>


<div class="accessibility-card-error">
<a class="bookmarklet-button"  
    <h3>f) Ejemplo NO accessible</h3>
  href="javascript:(function(){alert('Idioma de la página: \n ' + document.documentElement.lang);})();">
    <p>El idioma no se identifica de forma adecuada en el atributo alt.
  Ver el idioma de la página  
Se escribe el idioma "en" y deberia ser "ch" </p>
</a>
    <img src="https://www.wikiwcag.udl.cat/images/b/bc/3.1.1-NA-202425.jpg" alt="">
</div>
    <pre>alt="Se muestra un atributo lang no valido porque no se identifica el idioma de forma adecuada"</pre>
    <pre> URL <a href="https://www.sony.co.uk/">página web de SONY  (inglaterra)</a></pre>
    <pre> VIDEO  <a href="https://youtu.be/Ed8CNJrkm74?t=5042">video de ejemplo NO accesible</a></pre>
  </div>
</html><span> </span>
 
 
==== Implementación correcta ====
Código HTML/CSS/JS correcto o buenas prácticas.
 
==== Errores comunes ====
Lo que se suele hacer mal.
 
==== Criterios relacionados ====
Otros criterios que pueden verse afectados o complementarse.
 
 
 
=== Metadatos complementarios ===
==== Versión del documento / ficha ====
Fecha y versión de actualización
==== Autor / fuente de referencia ====
Quién elaboró la ficha o de dónde se tomó
 
 
== DESCRIPCIÓN ==
 
 
{| class="wikitable" style="width:100%; border:1px solid #ccc; background:#f9f9f9;"
! style="background:#e9ecef; width:20%;" | '''Nivel'''
| A
 
|-
! style="background:#e9ecef;" | '''Versión'''
| 2.2
 
|-
! style="background:#e9ecef;" | '''Usuarios con los que impacta'''
| [[Archivo:IconoVisual.jpg|30x30px]] Discapacidad visual total <br>
[[Archivo:IconoBajaVision.jpg|30x30px]] Personas que escuchan con lector de voz <br>
[[Archivo:UsuarioGenerico.png|30x30px]] Otro tipo de usuario
 
|-
! style="background:#e9ecef;" | '''Categoría'''
| Contenido
 
|-
! style="background:#e9ecef;" | '''Subcategoría'''
| Texto
|}
 
 
 
 
=== Explicación del criterio ===
El idioma predeterminado de cada página web puede ser determinado por software.
 
=== Objetivo del criterio ===
Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.
 
=== Porque es importante cumplir con este criterio ===
Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.
 
=== Referencias relacionadas con las pautas WCAG 2.1 ===
Se indican las referencias con las pautas 2.1.
 
* [https://www.w3.org/WAI/WCAG21/Techniques/html/H57 H57: Using the language attribute on the HTML element]
 
=== Explicación (VIDEO) del criterio ===
https://youtu.be/Ed8CNJrkm74?t=4950
 
<html>
  <iframe width="640" height="360"
          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>
</html>
</li>


== EVALUACIÓN ==
<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>
Esta sección muestra como puede evaluarse el criterio. Se incluyen ejemplos visuales y en formato video del criterio cuando es accesible y no accesible
<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>
=== Proceso para evaluar este criterio ===
<li>'''Herramientas del navegador''': revisar el árbol accesible (Accessibility panel en DevTools) para confirmar que el idioma está reconocido correctamente.</li>
'''Tipo''': Comprobación manual
</ul>
 
'''Procedimiento de comprobación:'''
 
1. Usando la herramienta de inspección de código del navegador, comprobar que existe el elemento con los atributos lang y/o xml:lang. 2. Verificar que el código de idioma sigue la sintaxis correcta.
 
'''Alternativa'''
 
Mirar si hay:
* Los atributos lang y/o xml:lang y se adaptan al idioma de la pàgina.
 
* Revisar el elemento y comprovar si tiene la etiqueta adecuada según:
** Tabla de [https://www.w3schools.com/tags/ref_language_codes.asp ISO 639-1 Language Codes ](lenguajes genéricos)
** [https://datatracker.ietf.org/doc/html/rfc5646 Tags for Identifying Languages] (dialectos de lenguajes)
'''Herramienta de inspección Bookmarklet'''
 
 
* <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:\n' + document.documentElement.lang);})();">
      📘 Consultar idioma de la página
    </a>
  </div>
</html>
 
=== Ejemplos del criterio ===
<html>
<div class="accessibility-card">
    <h3>e) Ejemplo accessible</h3>
    <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
    <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
    <pre>Explicación del ejemplo "El código HTML tiene atributo alt="en-GB" que es el idioma (inglés) en el que está escrito el contenido de la página"</pre>
    <pre> URL  <a href="https://www.sony.com.cn/">página web de SONY  (china)</a> </pre>
    <pre> VIDEO  <a href="https://youtu.be/Ed8CNJrkm74?t=5086">video de ejemplo accesible</a></pre>
 
  </div>
 
<div class="accessibility-card-error">
    <h3>f) Ejemplo NO accessible</h3>
    <p>El idioma no se identifica de forma adecuada en el atributo alt.
Se escribe el idioma "en" y deberia ser "ch" </p>
    <img src="https://www.wikiwcag.udl.cat/images/b/bc/3.1.1-NA-202425.jpg" alt="">
    <pre>alt="Se muestra un atributo lang no valido porque no se identifica el idioma de forma adecuada"</pre>
    <pre> URL <a href="https://www.sony.co.uk/">página web de SONY  (inglaterra)</a></pre>
    <pre> VIDEO  <a href="https://youtu.be/Ed8CNJrkm74?t=5042">video de ejemplo NO accesible</a></pre>
  </div>
</html>
 
== IMPLEMENTACIÓN ==
Se explica como puede implementarse bien el criterio
 
Identifique el idioma predeterminado o principal de una página web y, a continuación, configure el atributo de idioma del <code><nowiki><html></nowiki></code>elemento en ese idioma. Cuando una página web utiliza varios idiomas, el idioma predeterminado debe ser el más usado.
 
=== Ejemplo de código correcto ===
 
<div class="highlight-box">
<code><!doctype html></code>
 
<code><nowiki><html lang="es"> </nowiki></code>
 
<code><head></code>
   
<code><meta charset="utf-8"></code>
     
<code><title>documento escrito en español</title></code>
   
<code></head></code>
   
<code><body>
… documento escrito en español …
<nowiki></body></nowiki></code>


<code><nowiki></html></nowiki></code>
}}

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»