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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Afra (discusión | contribs.)
profesores
120 ediciones
Sin resumen de edición
 
(No se muestran 6 ediciones intermedias de 3 usuarios)
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


== EVALUACIÓN ==
|wcag_discapacidades=
'''Nombre de la herramienta''': Comprobación manual
<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>


'''Procedimiento de comprobación:'''
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad cognitiva]]


1. Localizar dónde se producen cambios e idioma en el texto de la página
|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.


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.
|wcag_descripcion_resumida=
Cuando aparece contenido en un idioma distinto al idioma principal de la página, ese cambio debe marcarse correctamente para asegurar su correcta pronunciación y procesamiento.


3. Verificar que el código de idioma sigue la sintaxis correcta.
|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.


== REFERENCIA WCAG 2.1 ==
|wcag_importancia=
Las personas usuarias de lectores de pantalla dependen de la marca del idioma para recibir pronunciación correcta. También beneficia a personas con dificultades cognitivas o lectura en segundas lenguas.


* H58: Using language attributes to identify changes in the human language.
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H58 H58: Using language attributes to identify changes in the human language]</span></li>
</ul>


== LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ==
Se listan diferentes ejemplos
<html>
<collapse>
'''Título del acordeón'''
Contenido del acordeón que se mostrará al hacer clic.
</collapse>
</html>
=== EJEMPLOS ACCESIBLES ===
<html>
<details class="acordeon-estilizado">
  <summary> AÑO0 - UNIVERSIDAD </summary>
  <p>


<div class="custom-post-item">
|wcag_recursos=
    <h3>e) Ejemplo accessible</h3>
<ul>
    <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#language-of-parts WCAG Quick Reference – 3.1.2]</span></li>
    <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
</ul>
    <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>
|wcag_tipo_evaluacion=Manual
</details>


|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar dónde se producen cambios de idioma en el texto de la página.
</li>


<details class="acordeon-estilizado">
<li><span class="paso-badge">Paso 2.</span>
  <summary> AÑO1 - UNIVERSIDAD </summary>
Usando la herramienta de inspección de código del navegador, comprobar que se indica este cambio de idioma mediante los atributos <code>lang</code> y/o <code>xml:lang</code>.
  <p>
</li>


<div class="custom-post-item">
<li><span class="paso-badge">Paso 3.</span>
    <h3>e) Ejemplo accessible</h3>
Verificar que el código de idioma sigue la sintaxis correcta.
    <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
</li>
    <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
</ol>
    <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>
|wcag_resultado_evaluacion=
</details>
Los cambios de idioma están marcados correctamente y el contenido se presenta con pronunciación adecuada.


|wcag_ejemplo_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar dónde se producen cambios de idioma en el texto de la página.
</li>


<details class="acordeon-estilizado">
<li><span class="paso-badge">Paso 2.</span>
  <summary> AÑO2 - UNIVERSIDAD </summary>
Usando la herramienta de inspección de código del navegador, comprobar que se indica este cambio de idioma mediante los atributos <code>lang</code> y/o <code>xml:lang</code>.
  <p>
</li>


<div class="custom-post-item">
<li><span class="paso-badge">Paso 3.</span>
    <h3>e) Ejemplo accessible</h3>
Verificar que el código de idioma sigue la sintaxis correcta.
    <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
</li>
    <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
</ol>
    <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_otras_herramientas_evaluacion=
 
<ul>
</p>
<li>'''Inspección del código''': comprobar que los fragmentos de texto en un idioma diferente al principal usan el atributo <code>lang</code> adecuado (p. ej., <code>lang="en"</code> para una frase en inglés dentro de una página en español).</li>
</details>
<li>'''Validadores HTML''': usar el validador W3C u otras herramientas para detectar la ausencia de atributos <code>lang</code> o códigos incorrectos en cambios de idioma.</li>
 
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) leer el contenido con cambios de idioma para confirmar que el lector cambia correctamente la pronunciación.</li>
 
<li>'''Herramientas del navegador''': revisar el árbol accesible para confirmar que los nodos donde cambia el idioma exponen el código de idioma correcto.</li>
</html>
</ul>
 
}}
=== EJEMPLOS NO ACCESIBLES ===
<HTML>
<details class="acordeon-estilizado">
  <summary> AÑO1 - UNIVERSIDAD
</summary>
  <p>
<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>
 
 
 
 
</p>
</details>
 
 
<details class="acordeon-estilizado">
  <summary> AÑO1 - UNIVERSIDAD
</summary>
  <p>
<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>
 
 
 
 
</p>
</details>
 
 
</html>

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

Comprensión del criterio

Descripción resumida

Cuando aparece contenido en un idioma distinto al idioma 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 recibir pronunciación correcta. También beneficia a personas con dificultades cognitivas o lectura en segundas lenguas.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar dónde se producen cambios de idioma en el texto de la página.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que se indica este cambio de idioma mediante los atributos lang y/o xml:lang.
  3. Paso 3. Verificar que el código de idioma sigue la sintaxis correcta.

Resultado esperado

Los cambios de idioma están marcados correctamente y el contenido se presenta con pronunciación adecuada.

Ejemplo ilustrativo

  1. Paso 1. Localizar dónde se producen cambios de idioma en el texto de la página.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que se indica este cambio de idioma mediante los atributos lang y/o xml:lang.
  3. Paso 3. Verificar que el código de idioma sigue la sintaxis correcta.


Otras herramientas de evaluación

  • Inspección del código: comprobar que los fragmentos de texto en un idioma diferente al principal usan el atributo lang adecuado (p. ej., lang="en" para una frase en inglés dentro de una página en español).
  • Validadores HTML: usar el validador W3C u otras herramientas para detectar la ausencia de atributos lang o códigos incorrectos en cambios de idioma.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) leer el contenido con cambios de idioma para confirmar que el lector cambia correctamente la pronunciación.
  • Herramientas del navegador: revisar el árbol accesible para confirmar que los nodos donde cambia el idioma exponen el código de idioma correcto.










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

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