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

De UX Wiki
← Edición anterior
VisualWikitexto
Afra (discusión | contribs.)
profesores
120 ediciones
Sin resumen de edición
 
(No se muestran 33 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
== '''3.1.1- A. Se debe identificar el idioma principal de la página con los atributos adecuados''' ==
== '''3.1.1- A. Idioma de la página''' ==


gramática usada y con un código de idioma correcto
== DESCRIPCIÓN ==


''' Herramientas de apoyo '''
Nombre de la herramienta: Comprobación manual


Procedimiento de comprobación:
{| class="wikitable" style="width:100%; border:1px solid #ccc; background:#f9f9f9;"
! style="background:#e9ecef; width:20%;" | '''Nivel'''
| A


1. Usando la herramienta de inspección de código del navegador, comprobar que existe el elemento <html> con los atributos lang y/o xml:lang. 2. Verificar que el código de idioma sigue la sintaxis correcta.
|-
! style="background:#e9ecef;" | '''Versión'''
| 2.2
 
|-
! style="background:#e9ecef;" | '''Usuarios con los que impacta'''
| [[Archivo:IconoVisual.jpg|30x30px]] Discapacidad visual total <br>  
[[Archivo:IconoBajaVision.jpg|30x30px]] Personas que escuchan con lector de voz <br>
[[Archivo:UsuarioGenerico.png|30x30px]] Otro tipo de usuario
 
|-
! style="background:#e9ecef;" | '''Categoría'''
| Contenido
 
|-
! style="background:#e9ecef;" | '''Subcategoría'''
| Texto
|}
 
 
 
 
=== Explicación del criterio ===
El idioma predeterminado de cada página web puede ser determinado por software.
 
=== Objetivo del criterio ===
Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.
 
=== Porque es importante cumplir con este criterio ===
Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.
 
=== Referencias relacionadas con las pautas WCAG 2.1 ===
Se indican las referencias con las pautas 2.1.
 
* [https://www.w3.org/WAI/WCAG21/Techniques/html/H57 H57: Using the language attribute on the HTML element]
 
=== Explicación (VIDEO) del criterio ===
https://youtu.be/Ed8CNJrkm74?t=4950


''' Referencia WCAG 2.1 '''
Se indican las referencias con las pautas 2.1
<html>
<html>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57">
  <iframe width="640" height="360"
H57: Using the language attribute on the HTML element</a>
          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>
</html>


=== Descripción: ===
== EVALUACIÓN ==
El idioma predeterminado de cada página web puede ser determinado por software.
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
 
=== Proceso para evaluar este criterio ===
'''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:
* 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)
'''Herramienta de inspección Bookmarklet'''
 
 
* <html>
<div class="highlight-box">
    🔗 <strong>Arrastra este botón a tu barra de marcadores:</strong>


=== Objetivo: ===
    <a class="bookmarklet-button"
Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.
      href="javascript:(function(){alert('Idioma de la página:\n' + document.documentElement.lang);})();">
      📘 Consultar idioma de la página
    </a>
  </div>
</html>


'''A) EJEMPLO ACCESIBLE:'''
=== Ejemplos del criterio ===
  <div class="accessibility-card">
<html>
     <h3>Ejemplo accessible</h3>
<div class="accessibility-card">
     <h3>e) Ejemplo accessible</h3>
     <p>Identificación correcta del idioma: Ingles de Reino unido. “en-GB” </p>
     <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="">
     <img src="https://www.wikiwcag.udl.cat/images/0/0e/3.1.1-A-202425.jpg" alt="">
     <pre>alt="Imagen de ejemplo accesible"</pre>
     <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>
   </div>


'''B) EJEMPLO NO ACCESIBLE:'''
<div class="accessibility-card-error">
  <div class="accessibility-card-error">
     <h3>f) Ejemplo NO accessible</h3>
     <h3>Ejemplo NO accessible</h3>
     <p>El idioma no se identifica de forma adecuada en el atributo alt.
     <p>Aquest exemple es acccesible, el parametre alt de l'etiqueta img esta complert</p>
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="">
     <img src="https://www.wikiwcag.udl.cat/images/b/bc/3.1.1-NA-202425.jpg" alt="">
     <pre>alt="Imagen de ejemplo NO accesible"</pre>
     <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>
   </div>
</html>
== IMPLEMENTACIÓN ==
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 <code><nowiki><html></nowiki></code>elemento en ese idioma. Cuando una página web utiliza varios idiomas, el idioma predeterminado debe ser el más usado.
=== Ejemplo de código correcto ===
<div class="highlight-box">
<code><!doctype html></code>
<code><nowiki><html lang="es"> </nowiki></code>
<code><head></code>
   
<code><meta charset="utf-8"></code>
     
<code><title>documento escrito en español</title></code>
   
<code></head></code>
   
<code><body>
… documento escrito en español …
<nowiki></body></nowiki></code>
<code><nowiki></html></nowiki></code>

Revisión actual - 09:16 4 jul 2025

3.1.1- A. Idioma de la página

DESCRIPCIÓN

Nivel A
Versión 2.2
Usuarios con los que impacta Discapacidad visual total

Personas que escuchan con lector de voz
Otro tipo de usuario

Categoría Contenido
Subcategoría Texto



Explicación del criterio

El idioma predeterminado de cada página web puede ser determinado por software.

Objetivo del criterio

Proporcionar la información necesaria para que los agentes de usuario puedan presentar el texto y otro contenido lingüístico de forma correcta.

Porque es importante cumplir con este criterio

Para que los usuarios que utilizan un lector de pantalla puedan comprender el texto leido por la herramienta.

Referencias relacionadas con las pautas WCAG 2.1

Se indican las referencias con las pautas 2.1.

Explicación (VIDEO) del criterio

https://youtu.be/Ed8CNJrkm74?t=4950

EVALUACIÓN

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

Proceso para evaluar este criterio

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:

  • Los atributos lang y/o xml:lang y se adaptan al idioma de la pàgina.

Herramienta de inspección Bookmarklet


Ejemplos del criterio

e) Ejemplo accessible

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

f) Ejemplo NO accessible

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

IMPLEMENTACIÓN

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.

Ejemplo de código correcto

<!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>

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