Diferencia entre revisiones de «Principio 2/2.1 Teclado Accesible/2.1.1-A»

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''2.1.1-A. Teclado accesible''' ==
{{CriterioWCAG
<!-
|id_wcag_criterio=2.1.1
   Análisis interno:
|id_wcag_subcriterio=2.1.1-A
   Este criterio impacta principalmente a: Personas con discapacidad motriz
|wcag_titulo_criterio=2.1.1-A. Teclado accesible
   Problema grave: Si la funcionalidad no es operable mediante teclado, usuarios con movilidad limitada no podrán interactuar con la página, generando barreras graves de accesibilidad.
|wcag_nivel=A
-->
|wcag_version=2.2
<html>
|wcag_principio=2_Operable
<!-- criterio 2.1.1-A -->
|wcag_principio_url=Principio_2
<article class="wcag-card">
|wcag_pauta=2.1_Controlar_desde_teclado
  <section class="wcag-info">
|wcag_pauta_url=Principio_2/2.1_Controlar_desde_teclado
    <ul>
|wcag_grupo=Interaccion
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Teclado
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
 
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
|wcag_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">2.1 Poder controlar funciones desde el teclado</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
      <li><span class="label">Subcategoría:</span><span class="value">Teclado</span></li>
   <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
    </ul>
   <span class="gravedad gravedad-grave">Barrera grave</span>
  </section>
</li>
  <section class="wcag-users">
 
    <p>Usuarios más afectados</p>
|wcag_lista_discapacidades=
    <ul>
[[Categoría:Discapacidad motriz]]
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera grave</span></li>
 
    </ul>
|wcag_texto_criterioOAW=
  </section>
Toda funcionalidad del contenido se puede manejar a través de una interfaz de teclado sin necesidad de alcanzar una determinada velocidad para cada pulsación de tecla.
</article>
 
</html>
|wcag_descripcion_resumida=
Toda la funcionalidad debe ser operable usando solo el teclado, sin requerir movimientos del ratón ni acciones rápidas. 
Esto incluye teclados físicos, en pantalla o dispositivos alternativos que emulan la interacción por teclado. 
Los elementos nativos HTML son accesibles por defecto; los elementos personalizados deben implementar soporte para teclado.
 
|wcag_objetivo=
Garantizar que cualquier persona, incluidas las que no pueden utilizar un ratón, pueda operar y completar todas las funciones de la web exclusivamente mediante el teclado.
 
|wcag_importancia=
Si la interacción depende solo del ratón o gestos, muchas personas —incluidas las que usan pulsadores, navegación por teclado o lectores de pantalla— quedarán excluidas. 
El soporte de teclado es fundamental para accesibilidad universal y compatibilidad con tecnologías de asistencia.
 
|wcag_referencias=
<ul>
<li>G202: Asegurar control por teclado para todas las funcionalidades</li>
<li>H91: Usar controles nativos HTML</li>
<li>SCR35: Usar <code>onclick</code> accesible en enlaces/botones</li>
<li>F54: Fallo por usar solo manejadores de eventos de puntero</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar elementos <code>button</code>, <code>a</code>, <code>input</code> en lugar de <code>div</code> o <code>span</code></li>
<li>Asegurar que todos los componentes personalizados responden a <code>Enter</code> y <code>Space</code></li>
<li>Incluir <code>onkeydown</code> como alternativa a <code>onclick</code></li>
<li>Implementar equivalentes para <code>mouseover</code> <code>focus</code></li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Navegar la página únicamente con teclado (Tab, Shift+Tab, Enter, Space).</li>
<li><span class="paso-badge">Paso 2.</span> Activar elementos e interactuar sin usar el ratón.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que todos los controles e interacciones son accesibles y ejecutables por teclado.</li>
</ol>
 
|wcag_resultado_evaluacion=
Toda la funcionalidad puede operarse mediante teclado, salvo funciones intrínsecamente dependientes del puntero (p.ej. dibujo libre).
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>Correcto:</strong> Botón implementado con <code>&lt;button&gt;</code> o <code>&lt;a&gt;</code> con <code>href</code>.
</div>
 
<div class="accessibility-card-error">
<strong>Incorrecto:</strong>
<pre class="wcag-codigo-html">
<div onclick="comprar()">Comprar</div>
</pre>
El elemento no es accesible con teclado si no se añaden eventos de teclado y atributos semánticos.
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Prueba manual con teclado</li>
<li>Herramientas de desarrollo del navegador</li>
</ul>
}}

Revisión del 19:15 4 nov 2025

2.1.1-A. Teclado accesible

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)

  • Toda funcionalidad del contenido se puede manejar a través de una interfaz de teclado sin necesidad de alcanzar una determinada velocidad para cada pulsación de tecla.

Comprensión del criterio

Descripción resumida

Toda la funcionalidad debe ser operable usando solo el teclado, sin requerir movimientos del ratón ni acciones rápidas.

Esto incluye teclados físicos, en pantalla o dispositivos alternativos que emulan la interacción por teclado.

Los elementos nativos HTML son accesibles por defecto; los elementos personalizados deben implementar soporte para teclado.

Objetivo

Garantizar que cualquier persona, incluidas las que no pueden utilizar un ratón, pueda operar y completar todas las funciones de la web exclusivamente mediante el teclado.

Importancia de cumplir el criterio

Si la interacción depende solo del ratón o gestos, muchas personas —incluidas las que usan pulsadores, navegación por teclado o lectores de pantalla— quedarán excluidas. El soporte de teclado es fundamental para accesibilidad universal y compatibilidad con tecnologías de asistencia.

Referencias WCAG

  • G202: Asegurar control por teclado para todas las funcionalidades
  • H91: Usar controles nativos HTML
  • SCR35: Usar onclick accesible en enlaces/botones
  • F54: Fallo por usar solo manejadores de eventos de puntero

Recursos de apoyo

  • Usar elementos button, a, input en lugar de div o span
  • Asegurar que todos los componentes personalizados responden a Enter y Space
  • Incluir onkeydown como alternativa a onclick
  • Implementar equivalentes para mouseoverfocus

Evaluación del criterio

Tipo de evaluación

Procedimiento de evaluación

  1. Paso 1. Navegar la página únicamente con teclado (Tab, Shift+Tab, Enter, Space).
  2. Paso 2. Activar elementos e interactuar sin usar el ratón.
  3. Paso 3. Confirmar que todos los controles e interacciones son accesibles y ejecutables por teclado.

Resultado esperado

Toda la funcionalidad puede operarse mediante teclado, salvo funciones intrínsecamente dependientes del puntero (p.ej. dibujo libre).

Ejemplo

Correcto: Botón implementado con <button> o <a> con href.

Incorrecto:

<div onclick="comprar()">Comprar</div>

El elemento no es accesible con teclado si no se añaden eventos de teclado y atributos semánticos.

Otras herramientas de evaluación

  • Prueba manual con teclado
  • Herramientas de desarrollo del navegador










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.1.1-A. Teclado accesible

Loading comments...