Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.2-A»

De WCAG Wiki
VisualWikitexto
Página creada con «== '''2.4.2-A: TÍTULO DESCRIPTIVO MEDIANTE <title>''' == '''A) EJEMPLO ACCESIBLE:''' '''B) EJEMPLO NO ACCESIBLE:'''»
 
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.4.2-A: TÍTULO DESCRIPTIVO MEDIANTE <title>''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=2.4.2
|id_wcag_subcriterio=2.4.2-A
|wcag_titulo_criterio=2.4.2-A. Título descriptivo de página
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Navegación
|wcag_subgrupo=Estructura
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.2-A


'''B) EJEMPLO NO ACCESIBLE:'''
|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:sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</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>
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad motriz]]
 
|wcag_texto_criterioOAW=
La página web debe tener un título descriptivo mediante el elemento <code>&lt;title&gt;</code>.
 
|wcag_descripcion_resumida=
Cada página debe incluir un título claro, conciso y útil que describa su contenido o propósito.
 
|wcag_objetivo=
Ayudar a los usuarios a identificar rápidamente el propósito de la página, facilitar la navegación y la orientación dentro del sitio.
 
|wcag_importancia=
Los títulos permiten diferenciar páginas abiertas, entender su contenido antes de navegar y orientarse al cambiar entre pestañas o ventanas, especialmente con lectores de pantalla.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G88 G88: Providing descriptive titles for Web pages]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H25 H25: Providing a title using the title element]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F25 F25: Failure due to the title of a Web page not identifying the content]</span></li>
</ul>
 
|wcag_recursos= Sin recursos
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Comprobar el texto que se muestra como título de la pestaña activa; este texto se corresponde con el contenido del elemento <code>&lt;title&gt;</code> de la página.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que existe este título (si no, se mostraría la URL) y que describe de manera adecuada el cometido de la página.
</li>
</ol>
 
|wcag_resultado_evaluacion=
La página tiene un título descriptivo, único y relacionado con su contenido.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<head>
  <title>Contacto | Universidad de Ejemplo</title>
</head>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li> <strong>Bookmarklet:</strong><br>
 
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los títulos de otras páginas. <br>
 
<a class="bookmarklet-button"
href="javascript:alert('Título de la ventana: \n' + document.title);">
Ver el titulo de la página
</a>
</div>
</html>
</li>
 
<li>
'''Inspección del navegador''': comprobar en el código que existe un elemento <code>&lt;title&gt;</code> en la sección <code>&lt;head&gt;</code> y que su contenido es descriptivo y único para esa página.</li>
<li>'''Verificación en la pestaña del navegador''': revisar el título mostrado en la barra/pestaña y confirmar que refleja claramente el contenido o propósito de la página.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) iniciar la lectura de la página para confirmar que el título se anuncia correctamente.</li>
<li>'''Validadores''': usar herramientas como W3C HTML Validator o extensiones de accesibilidad para detectar ausencia o duplicación del elemento <code>&lt;title&gt;</code>.</li>
</ul>
 
}}

Revisión actual - 12:44 6 nov 2025

2.4.2-A. Título descriptivo de página

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)

  • La página web debe tener un título descriptivo mediante el elemento <title>.

Comprensión del criterio

Descripción resumida

Cada página debe incluir un título claro, conciso y útil que describa su contenido o propósito.

Objetivo

Ayudar a los usuarios a identificar rápidamente el propósito de la página, facilitar la navegación y la orientación dentro del sitio.

Importancia de cumplir el criterio

Los títulos permiten diferenciar páginas abiertas, entender su contenido antes de navegar y orientarse al cambiar entre pestañas o ventanas, especialmente con lectores de pantalla.

Referencias WCAG

Recursos de apoyo

Sin recursos

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Comprobar el texto que se muestra como título de la pestaña activa; este texto se corresponde con el contenido del elemento <title> de la página.
  2. Paso 2. Verificar que existe este título (si no, se mostraría la URL) y que describe de manera adecuada el cometido de la página.

Resultado esperado

La página tiene un título descriptivo, único y relacionado con su contenido.

Ejemplo

<head>
  <title>Contacto | Universidad de Ejemplo</title>
</head>

Otras herramientas de evaluación

  • Bookmarklet:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los títulos de otras páginas.
    Ver el titulo de la página
  • Inspección del navegador: comprobar en el código que existe un elemento <title> en la sección <head> y que su contenido es descriptivo y único para esa página.
  • Verificación en la pestaña del navegador: revisar el título mostrado en la barra/pestaña y confirmar que refleja claramente el contenido o propósito de la página.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) iniciar la lectura de la página para confirmar que el título se anuncia correctamente.
  • Validadores: usar herramientas como W3C HTML Validator o extensiones de accesibilidad para detectar ausencia o duplicación del elemento <title>.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.2-A. Título descriptivo de página

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.2-A&oldid=3725»