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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=2.4.2-A. Título descriptivo de página
|wcag_titulo_criterio=2.4.2-A. Título descriptivo de página
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegacion_clara
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegacion_clara
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Navegación
|wcag_grupo=Navegación
|wcag_subgrupo=Estructura
|wcag_subgrupo=Estructura
Línea 20: Línea 20:
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   [[Archivo:sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
  –
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>
<li class="discapacidad-item">
<li class="discapacidad-item">
Línea 34: Línea 35:
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
<li class="discapacidad-item">
 
  [[Archivo:Auditiva.png|20px|class=icon-discapacidad|alt=Discapacidad auditiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad auditiva|Auditiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad auditiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Línea 61: Línea 57:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html Understanding SC 2.4.2: Page Titled]</span></li>
<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/WCAG22/quickref/#page-titled WCAG Quick Reference – 2.4.2]</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>
</ul>


|wcag_recursos=
|wcag_recursos= Sin recursos
<ul>
<li>[https://webaim.org/techniques/screenreader/ WebAIM – Screen Reader Basics]</li>
<li>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title MDN – HTML &lt;title&gt;]</li>
</ul>


|wcag_tipo_evaluacion=Automática_y_manual
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Confirmar que la página incluye <code>&lt;title&gt;</code> en <code>&lt;head&gt;</code>.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Verificar que el título describe adecuadamente el contenido o propósito.</li>
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>Comprobar que los títulos son únicos entre páginas similares.</li>
</li>
<li>Validar lectura correcta del título con lector de pantalla.</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>
</ol>


Línea 86: Línea 82:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Correcto</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<head>
<head>
Línea 94: Línea 89:
</div>
</div>


<div class="accessibility-card">
|wcag_otras_herramientas_evaluacion=
<strong>❌ Incorrecto</strong>
<ul>
<pre class="wcag-codigo-html">
<li> <strong>Bookmarklet:</strong><br>
<head>
 
  <title>Página web</title>
<html>
</head>
<div class="highlight-box">
</pre>
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>
</div>
</html>
</li>


|wcag_otras_herramientas_evaluacion=
<li>
<ul>
'''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>Validadores HTML</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>AXE, WAVE, Accessibility Insights</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>NVDA, JAWS, VoiceOver</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>
<li>Inspección visual en pestañas del navegador</li>
</ul>
</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»