Sin resumen de edición |
Sin resumen de edición |
||
| Línea 57: | Línea 57: | ||
==== Descripción resumida ==== | ==== Descripción resumida ==== | ||
Qué exige el criterio de forma simple. | Qué exige el criterio de forma simple. | ||
El idioma predeterminado de cada página web puede ser determinado por software. | |||
==== Objetivo ==== | ==== Objetivo ==== | ||
Qué persigue desde el punto de vista de la accesibilidad. | 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. | |||
==== Ejemplo ==== | ==== Ejemplo ==== | ||
Un caso real o hipotético que ayude a entenderlo. | Un caso real o hipotético que ayude a entenderlo. | ||
==== Importancia ==== | ==== Importancia ==== | ||
Por qué es importante cumplirlo; consecuencias de no hacerlo. | 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. | |||
==== Referencias WCAG / Técnicas ==== | ==== Referencias WCAG / Técnicas ==== | ||
Enlaces a las técnicas (por ejemplo, H57). | Enlaces a las técnicas (por ejemplo, H57). | ||
Se indican las referencias con las pautas 2.1. | |||
* H57: Using the language attribute on the HTML element | |||
==== Recursos de apoyo ==== | ==== Recursos de apoyo ==== | ||
Vídeos, artículos o enlaces explicativos. | Vídeos, artículos o enlaces explicativos. | ||
Video: https://youtu.be/Ed8CNJrkm74?t=4950 | |||
=== Evaluación y aplicación práctica === | === Evaluación y aplicación práctica === | ||
==== Tipo de comprobación ==== | ==== Tipo de comprobación ==== | ||
Manual / Automática / Mixta | Manual / Automática / Mixta | ||
Comprobación manual | |||
==== Procedimiento de evaluación ==== | ==== Procedimiento de evaluación ==== | ||
Pasos específicos para verificar el cumplimiento. | Pasos específicos para verificar el cumplimiento. | ||
*Paso 1. | |||
*Paso 2. | * 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 ==== | ==== Herramientas recomendadas ==== | ||
Bookmarklets, extensiones, validadores, etc. | 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 ==== | ==== Ejemplo accesible ==== | ||
Descripción + código + enlace + video (si aplica). | Descripción + código + enlace + video (si aplica).<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> | |||
</html> | |||
==== Ejemplo no accesible ==== | ==== Ejemplo no accesible ==== | ||
Descripción + código + enlace + video (si aplica). | Descripción + código + enlace + video (si aplica). | ||
<html> | |||
<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><span> </span> | |||
==== Implementación correcta ==== | ==== Implementación correcta ==== | ||
Usuarios afectados
Personas con discapacidad visual total
Usuarios de lector de pantalla
Otros con dificultades de percepción o comprensión textual
Qué exige el criterio de forma simple.
El idioma predeterminado de cada página web puede ser determinado por software.
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.
Un caso real o hipotético que ayude a entenderlo.
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.
Enlaces a las técnicas (por ejemplo, H57).
Se indican las referencias con las pautas 2.1.
Vídeos, artículos o enlaces explicativos.
Video: https://youtu.be/Ed8CNJrkm74?t=4950
Manual / Automática / Mixta
Comprobación manual
Pasos específicos para verificar el cumplimiento.
Mirar si hay:
Bookmarklets, extensiones, validadores, etc
Herramienta de inspección Bookmarklet
Descripción + código + enlace + video (si aplica).
Identificación correcta del idioma: Ingles de Reino unido. “en-GB”
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"
URL página web de SONY (china)
VIDEO video de ejemplo accesible
Descripción + código + enlace + video (si aplica).
El idioma no se identifica de forma adecuada en el atributo alt. Se escribe el idioma "en" y deberia ser "ch"
alt="Se muestra un atributo lang no valido porque no se identifica el idioma de forma adecuada"
URL página web de SONY (inglaterra)
VIDEO video de ejemplo NO accesible
Código HTML/CSS/JS correcto o buenas prácticas.
Lo que se suele hacer mal.
Otros criterios que pueden verse afectados o complementarse.
Fecha y versión de actualización
Quién elaboró la ficha o de dónde se tomó
| Nivel | A |
|---|---|
| Versión | 2.2 |
| Usuarios con los que impacta | Archivo:IconoVisual.jpg Discapacidad visual total Archivo:IconoBajaVision.jpg Personas que escuchan con lector de voz |
| Categoría | Contenido |
| Subcategoría | Texto |
El idioma predeterminado de cada página web puede ser determinado por software.
Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.
Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.
Se indican las referencias con las pautas 2.1.
https://youtu.be/Ed8CNJrkm74?t=4950
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
Tipo: Comprobación manual
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:
Herramienta de inspección Bookmarklet
Identificación correcta del idioma: Ingles de Reino unido. “en-GB”
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"
URL página web de SONY (china)
VIDEO video de ejemplo accesible
El idioma no se identifica de forma adecuada en el atributo alt. Se escribe el idioma "en" y deberia ser "ch"
alt="Se muestra un atributo lang no valido porque no se identifica el idioma de forma adecuada"
URL página web de SONY (inglaterra)
VIDEO video de ejemplo NO accesible
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 <html>elemento en ese idioma. Cuando una página web utiliza varios idiomas, el idioma predeterminado debe ser el más usado.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>documento escrito en español</title>
</head>
<body>
… documento escrito en español …
</body>
</html>
