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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Afra (discusión | contribs.)
profesores
120 ediciones
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''3.1.2-A. Se debe identificar los cambios de idioma respecto al idioma principal con los atributos adecuados según la gramática usada y con un código de idioma correcto.''' ==
{{CriterioWCAG
|id_wcag_criterio=3.1.2
|id_wcag_subcriterio=3.1.2-A
|wcag_titulo_criterio=3.1.2-A. Idioma de las partes
|wcag_nivel=AA
|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_de_partes
|wcag_subcriterio_url=Principio_3/3.1_Legible/3.1.2-A
|wcag_texto_criterioOAW=
Se deben identificar los cambios de idioma respecto al idioma principal con los atributos adecuados según la gramática usada y con un código de idioma correcto.
|wcag_descripcion_resumida=
Cuando aparece contenido en un idioma distinto al principal de la página, ese cambio debe marcarse correctamente para asegurar su correcta pronunciación y procesamiento.
|wcag_objetivo=
Asegurar que los agentes de usuario y productos de apoyo presentan correctamente el contenido en múltiples idiomas, garantizando comprensión y correcta pronunciación.
|wcag_importancia=
Las personas usuarias de lectores de pantalla dependen de la marca del idioma para que el contenido se lea con la pronunciación adecuada. También beneficia a personas con dificultades cognitivas o lectura en segundas lenguas.
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html Understanding Success Criterion 3.1.2: Language of Parts]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#language-of-parts WCAG Quick Reference – 3.1.2]</span></li>
<li>[https://www.w3.org/International/articles/language-tags/ W3C — Language tags & BCP47]</li>
<li>[https://webaim.org/techniques/screenreader/#language WebAIM — Screen Readers & Language]</li>
</ul>
|wcag_recursos=
<ul>
<li>Uso de <code>lang="..."</code> en fragmentos</li>
<li>Códigos BCP47 válidos (p. ej. <code>en</code>, <code>fr-FR</code>, <code>de</code>, <code>pt-BR</code>)</li>
<li>Validación en lector de pantalla</li>
</ul>
|wcag_tipo_evaluacion=Semiautomática
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar texto en un idioma distinto al idioma principal de la página.</li>
<li><span class="paso-badge">Paso 2.</span> Comprobar si el fragmento incluye atributo <code>lang</code> con un código válido.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que el idioma marcado coincide con el contenido real.</li>
<li><span class="paso-badge">Paso 4.</span> Probar con lector de pantalla para confirmar la pronunciación correcta.</li>
</ol>
|wcag_resultado_evaluacion=
Los cambios de idioma están marcados correctamente y los agentes de usuario presentan el contenido de acuerdo al idioma correspondiente.
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: texto principal en español con cita en inglés</strong>
<pre class="wcag-codigo-html">
<p>El concepto de <span lang="en">accessibility by default</span> es fundamental.</p>
</pre>
</div>


=== EVALUACIÓN ===
<div class="accessibility-card">
'''Nombre de la herramienta''': Comprobación manual
<strong>✅ Ejemplo accesible: partes en distintos idiomas</strong>
<pre class="wcag-codigo-html">
<p>En catalán se dice <span lang="ca">Bon dia</span>,
en francés <span lang="fr">Bonjour</span>
y en alemán <span lang="de">Guten Morgen</span>.</p>
</pre>
</div>


'''Procedimiento de comprobación:'''
<div class="accessibility-card">
 
<strong>✅ Ejemplo accesible: etiqueta en inglés dentro de página en español</strong>
1. Localizar dónde se producen cambios e idioma en el texto de la página
<pre class="wcag-codigo-html">
 
<label for="username">
2. Usando la herramienta de inspección de código del navegador, comprobar que se indica este cambio de idioma con los atributos lang y/o xml:lang.
  Nombre de usuario <span lang="en">(username)</span>
 
</label>
3. Verificar que el código de idioma sigue la sintaxis correcta.
<input id="username" name="username">
 
</pre>
=== REFERENCIA WCAG 2.1 ===
</div>
 
|wcag_otras_herramientas_evaluacion=
* H58: Using language attributes to identify changes in the human language.
<ul>
 
<li>Validadores de HTML y BCP47</li>
===LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ===
<li>Pruebas con NVDA / JAWS / VoiceOver</li>
Se listan diferentes ejemplos
<li>DevTools → panel de accesibilidad</li>
 
<li>Herramientas de verificación de idioma en contenidos multilingües</li>
==== EJEMPLOS ACCESIBLES ====
</ul>
<html>
}}
<details class="acordeon-estilizado">
  <summary> AÑO0 - UNIVERSIDAD </summary>
  <p>
 
<div class="custom-post-item">
    <h4>e) Ejemplo accessible</h4>
    <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>
 
</p>
</details>
 
 
<details class="acordeon-estilizado">
  <summary> AÑO1 - UNIVERSIDAD </summary>
  <p>
 
<div class="custom-post-item">
    <h4>e) Ejemplo accessible</h4>
    <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>
 
</p>
</details>
 
 
<details class="acordeon-estilizado">
  <summary> AÑO2 - UNIVERSIDAD </summary>
  <p>
 
<div class="custom-post-item">
    <h4>e) Ejemplo accessible</h4>
    <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>
 
</p>
</details>
 
 
</html>
 
==== EJEMPLOS NO ACCESIBLES ====
<HTML>
<details class="acordeon-estilizado">
  <summary> AÑO1 - UNIVERSIDAD
</summary>
  <p>
<div class="accessibility-card-error">
    <h4>f) Ejemplo NO accessible</h4>
    <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>
 
 
 
 
</p>
</details>
 
 
<details class="acordeon-estilizado">
  <summary> AÑO1 - UNIVERSIDAD
</summary>
  <p>
<div class="accessibility-card-error">
    <h4>f) Ejemplo NO accessible</h4>
    <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>
 
 
 
 
</p>
</details>
 
 
</html>

Revisión del 13:11 5 nov 2025

3.1.2-A. Idioma de las partes

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 deben identificar los cambios de idioma respecto al idioma principal con los atributos adecuados según la gramática usada y con un código de idioma correcto.

{{{wcag_lista_discapacidades}}}

Comprensión del criterio

Descripción resumida

Cuando aparece contenido en un idioma distinto al principal de la página, ese cambio debe marcarse correctamente para asegurar su correcta pronunciación y procesamiento.

Objetivo

Asegurar que los agentes de usuario y productos de apoyo presentan correctamente el contenido en múltiples idiomas, garantizando comprensión y correcta pronunciación.

Importancia de cumplir el criterio

Las personas usuarias de lectores de pantalla dependen de la marca del idioma para que el contenido se lea con la pronunciación adecuada. También beneficia a personas con dificultades cognitivas o lectura en segundas lenguas.

Referencias WCAG

Recursos de apoyo

  • Uso de lang="..." en fragmentos
  • Códigos BCP47 válidos (p. ej. en, fr-FR, de, pt-BR)
  • Validación en lector de pantalla

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Identificar texto en un idioma distinto al idioma principal de la página.
  2. Paso 2. Comprobar si el fragmento incluye atributo lang con un código válido.
  3. Paso 3. Verificar que el idioma marcado coincide con el contenido real.
  4. Paso 4. Probar con lector de pantalla para confirmar la pronunciación correcta.

Resultado esperado

Los cambios de idioma están marcados correctamente y los agentes de usuario presentan el contenido de acuerdo al idioma correspondiente.

Ejemplo

✅ Ejemplo accesible: texto principal en español con cita en inglés 

<p>El concepto de <span lang="en">accessibility by default</span> es fundamental.</p>

✅ Ejemplo accesible: partes en distintos idiomas 

<p>En catalán se dice <span lang="ca">Bon dia</span>, 
en francés <span lang="fr">Bonjour</span> 
y en alemán <span lang="de">Guten Morgen</span>.</p>

✅ Ejemplo accesible: etiqueta en inglés dentro de página en español 

<label for="username">
  Nombre de usuario <span lang="en">(username)</span>
</label>
<input id="username" name="username">

Otras herramientas de evaluación

  • Validadores de HTML y BCP47
  • Pruebas con NVDA / JAWS / VoiceOver
  • DevTools → panel de accesibilidad
  • Herramientas de verificación de idioma en contenidos multilingües










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.1.2-A. Idioma de las partes

Loading comments...




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