Sin resumen de edición Etiqueta: Reversión manual |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
== '''3.1.1- A. Idioma de la página''' == | |||
=== Identificación general del criterio === | |||
<html> | |||
<article class="wcag-card"> | |||
<section class="wcag-info"> | |||
<div class="wcag-item"> | |||
<span class="label">Nivel:</span> | |||
<span class="value">A</span> | |||
</div> | |||
<div class="wcag-item"> | |||
<span class="label">Versión:</span> | |||
<span class="value">2.2</span> | |||
</div> | |||
<div class="wcag-item"> | |||
<span class="label">Principio:</span> | |||
<span class="value">3. Perceptible </span> | |||
</div> | |||
<div class="wcag-item"> | |||
<span class="label">Pauta:</span> | |||
<span class="value">3.1 Legible</span> | |||
</div> | |||
<div class="wcag-item"> | |||
<span class="label">Categoría:</span> | |||
<span class="value">Contenido</span> | |||
</div> | |||
<div class="wcag-item"> | |||
<span class="label">Subcategoría:</span> | |||
<span class="value">Texto</span> | |||
</div> | |||
</section> | |||
<section class="wcag-users"> | |||
<p id="usuarios-afectados-titulo">Usuarios afectados</p> | |||
<ul> | |||
<li> | |||
<img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> | |||
<span>Personas con discapacidad visual total</span> | |||
</li> | |||
</ul> | |||
</section> | |||
</article> | |||
</html> | |||
=== Descripción y comprensión del criterio === | |||
==== Descripción resumida ==== | |||
<span class="wcag-info-criterio">El idioma predeterminado de cada página web puede ser determinado por software.</span> | |||
==== Objetivo ==== | |||
<span class="wcag-info-criterio"> | |||
Proporcionar la información necesaria para que los agentes de usuario (lector de pantalla) puedan presentar el texto y otro contenido lingüístico de forma correcta. | |||
</span> | |||
==== Importancia de cumplir el criterio ==== | |||
<span class="wcag-info-criterio"> | |||
Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta. | |||
</span> | |||
==== Referencias WCAG / Técnicas ==== | |||
<div class="wcag-info-criterio"> | |||
Se indican las referencias con las pautas 2.1: | |||
* <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H57|H57: Using the language attribute on the HTML element (en inglés)] </span> | |||
</div> | |||
==== Recursos de apoyo ==== | |||
<div class="wcag-info-criterio"> | |||
Se indica un video con un ejemplo del criterio. | |||
<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> | |||
</div> | |||
=== Evaluación y aplicación práctica === | |||
==== Tipo de comprobación ==== | |||
<span class="wcag-info-criterio">Comprobación <strong>Manual</strong> </span> | |||
==== Procedimiento de evaluación ==== | |||
<div class="wcag-info-criterio"> | |||
<span class="paso-badge>Paso 1.</span> | |||
Usa la herramienta de inspección de código del navegador. | |||
<span class="paso-badge>Paso 2.</span> | |||
Comprueba que existe en el elemento <strong><code><nowiki><html></nowiki></code> </strong> | |||
los atributos <strong><code><nowiki> lang </nowiki></code> </strong> y/o <strong><code><nowiki> xml:lang. </nowiki></code> </strong> | |||
<span class="paso-badge>Paso 3.</span> | |||
Verificar que el código de idioma corresponde a la identificación de idioma correcto. Comprobar los códigos de idioma en los siguientes enlaces: | |||
* Tabla de <span lang="en">[https://www.w3schools.com/tags/ref_language_codes.asp ISO 639-1 Language Codes]</span> (lenguajes genéricos) | |||
* <span lang="en">[https://datatracker.ietf.org/doc/html/rfc5646 Tags for Identifying Languages]</span> (dialectos de lenguajes) | |||
</div> | |||
==== Ejemplo ==== | |||
<div class="wcag-info-criterio"> | |||
El código de esta página está escrito en idioma español y así se indica de forma semántica con la etiqueta <strong>lang=ES (ES:Español)</strong>. | |||
</div> | |||
<pre> | |||
<html lang="ES"> | |||
</pre> | |||
==== Herramientas recomendadas ==== | |||
<div class="wcag-info-criterio"> | |||
'''Herramienta de inspección con un Bookmarklet''' | |||
Existen otras maneras de observar este criterio en un sitio web. | |||
Al mostrar la información con el bookmarklet, comprobar que el código mostrado corresponde al idioma de la página. | |||
La página de la wiki está escrita en <strong> español </strong>, el identificador que ha de mostrar el Bookmarklet ha de ser <strong>ES </strong>. | |||
<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 actual:\n' + document.documentElement.lang);})();"> | |||
Consultar idioma de la página | |||
</a> | |||
</div> | |||
</html> | |||
</div> | |||
<h2 id="titulo" role="heading" aria-level="2" aria-label="Criterio"> | <h2 id="titulo" role="heading" aria-level="2" aria-label="Criterio"> | ||
'''1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual''' | '''1.1.1- A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual''' | ||
Usuarios afectados
Personas con discapacidad visual total
El idioma predeterminado de cada página web puede ser determinado por software.
Proporcionar la información necesaria para que los agentes de usuario (lector de pantalla) 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:
Se indica un video con un ejemplo del criterio.
Comprobación Manual
Paso 1. Usa la herramienta de inspección de código del navegador.
Paso 2.
Comprueba que existe en el elemento <html>
los atributos lang y/o xml:lang.
Paso 3. Verificar que el código de idioma corresponde a la identificación de idioma correcto. Comprobar los códigos de idioma en los siguientes enlaces:
El código de esta página está escrito en idioma español y así se indica de forma semántica con la etiqueta lang=ES (ES:Español).
<html lang="ES">
Herramienta de inspección con un Bookmarklet
Existen otras maneras de observar este criterio en un sitio web.
Al mostrar la información con el bookmarklet, comprobar que el código mostrado corresponde al idioma de la página.
La página de la wiki está escrita en español , el identificador que ha de mostrar el Bookmarklet ha de ser ES .
Nombre de la herramienta: Web Developer Toolbar
1. Seleccionar “Images – Outline images without alt attributes” y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo “alt”.
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.
Se listan diferentes ejemplos
Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido
alt="Atributo alt con un texto descriptivo y adecuado a la imagen"
Exemple NO accesible 1
Falta etiqueta alt en la imagen
alt=""
Exemple NO accesible 2
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen
alt=""
En esta imagen se puede observar como correctamente hay un atributo alt
{{sust:discutido}}
<ref>Plantilla:Cita web</ref>
