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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 12: Línea 12:
|wcag_subgrupo=Idioma_de_partes
|wcag_subgrupo=Idioma_de_partes
|wcag_subcriterio_url=Principio_3/3.1_Legible/3.1.2-A
|wcag_subcriterio_url=Principio_3/3.1_Legible/3.1.2-A
|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>
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad cognitiva]]
|wcag_texto_criterioOAW=
|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.
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=
|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.
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.
|wcag_objetivo=
|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.
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=
|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.
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.
|wcag_referencias=
|wcag_referencias=
<ul>
<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/Understanding/language-of-parts.html Understanding Success Criterion 3.1.2]</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><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://www.w3.org/International/articles/language-tags/ W3C — Language tags & BCP47]</li>
Línea 30: Línea 47:
<ul>
<ul>
<li>Uso de <code>lang="..."</code> en fragmentos</li>
<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>Códigos BCP47 válidos (ej: <code>en</code>, <code>fr-FR</code>, <code>pt-BR</code>)</li>
<li>Validación en lector de pantalla</li>
<li>Validación con lector de pantalla</li>
</ul>
</ul>
|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Semiautomática
Línea 37: Línea 54:
<ol class="paso-list">
<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 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 2.</span> Comprobar que el fragmento incluye atributo <code>lang</code> 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 3.</span> Verificar que el idioma marcado coincide con el texto.</li>
<li><span class="paso-badge">Paso 4.</span> Probar con lector de pantalla para confirmar la pronunciación correcta.</li>
<li><span class="paso-badge">Paso 4.</span> Probar con lector de pantalla.</li>
</ol>
</ol>
|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Los cambios de idioma están marcados correctamente y los agentes de usuario presentan el contenido de acuerdo al idioma correspondiente.
Los cambios de idioma están marcados correctamente y el contenido se presenta con pronunciación adecuada.
|wcag_ejemplo_evaluacion=
|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>
<div class="accessibility-card">
<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>
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: etiqueta en inglés dentro de página en español</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="username">
<p>El concepto de <span lang="en">accessibility by default</span> es clave.</p>
  Nombre de usuario <span lang="en">(username)</span>
<p>En catalán: <span lang="ca">Bon dia</span>,
</label>
en francés: <span lang="fr">Bonjour</span>,
<input id="username" name="username">
en alemán: <span lang="de">Guten Morgen</span>.</p>
</pre>
</pre>
</div>
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Validadores de HTML y BCP47</li>
<li>Validadores HTML + BCP47</li>
<li>Pruebas con NVDA / JAWS / VoiceOver</li>
<li>NVDA / JAWS / VoiceOver</li>
<li>DevTools → panel de accesibilidad</li>
<li>DevTools → panel de accesibilidad</li>
<li>Herramientas de verificación de idioma en contenidos multilingües</li>
</ul>
</ul>
}}
}}

Revisión del 13:16 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.

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

  • Uso de lang="..." en fragmentos
  • Códigos BCP47 válidos (ej: en, fr-FR, pt-BR)
  • Validación con 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 que el fragmento incluye atributo lang válido.
  3. Paso 3. Verificar que el idioma marcado coincide con el texto.
  4. Paso 4. Probar con lector de pantalla.

Resultado esperado

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

Ejemplo ilustrativo

<p>El concepto de <span lang="en">accessibility by default</span> es clave.</p>
<p>En catalán: <span lang="ca">Bon dia</span>,
en francés: <span lang="fr">Bonjour</span>,
en alemán: <span lang="de">Guten Morgen</span>.</p>


Otras herramientas de evaluación

  • Validadores HTML + BCP47
  • NVDA / JAWS / VoiceOver
  • DevTools → panel de accesibilidad










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