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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=2.1.1-A. Teclado accesible
|wcag_titulo_criterio=2.1.1-A. Teclado accesible
|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.1_Controlar_desde_teclado
|wcag_pauta=2.1_Teclado_Accesible
|wcag_pauta_url=Principio_2/2.1_Controlar_desde_teclado
|wcag_pauta_url=Principio_2/2.1_Teclado_Accesible
|wcag_grupo=Interaccion
|wcag_grupo=Interaccion
|wcag_subgrupo=Teclado
|wcag_subgrupo=Teclado
Línea 16: Línea 16:
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –  
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<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>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>
Línea 21: Línea 26:
|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad visual total]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
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.
Toda la funcionalidad de la página debe ser operable a través del teclado, excepto cuando dicha funcionalidad sea imposible realizarse con teclado (por ejemplo, un dibujo a mano alzada).


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Toda la funcionalidad debe ser operable usando solo el teclado, sin requerir movimientos del ratón ni acciones rápidas.   
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.   
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.
Los elementos nativos HTML son accesibles por defecto; los elementos personalizados deben implementar soporte para teclado.


Línea 35: Línea 44:
|wcag_importancia=
|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.   
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.
El soporte de teclado es fundamental para accesibilidad universal y compatibilidad con tecnologías de asistencia.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G202: Asegurar control por teclado para todas las funcionalidades</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G202 G202: Ensuring keyboard control for all functionality]</span></li>
<li>H91: Usar controles nativos HTML</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H91 H91: Using HTML form controls and links]</span></li>
<li>SCR35: Usar <code>onclick</code> accesible en enlaces/botones</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G90 G90: Providing keyboard-triggered event handlers]</span></li>
<li>F54: Fallo por usar solo manejadores de eventos de puntero</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR20 SCR20: Using both keyboard and other device-specific functions]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR35 SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR2 SCR2: Using redundant keyboard and mouse event handlers]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F54 F54: Failure due to using only pointing-device-specific event handlers (including gesture) for a function]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F42 F42: Failure when emulating links but not making them keyboard accessible]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<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>Usar elementos <code>button</code>, <code>a</code>, <code>input</code> en lugar de <code>div</code> o <code>span</code></li>
Línea 53: Línea 68:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<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 1.</span>
<li><span class="paso-badge">Paso 2.</span> Activar elementos e interactuar sin usar el ratón.</li>
Utilizar el teclado para operar con las diversas funcionalidades que la página ofrece.
<li><span class="paso-badge">Paso 3.</span> Confirmar que todos los controles e interacciones son accesibles y ejecutables por teclado.</li>
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que se puede operar adecuadamente con todas las funcionalidades utilizando solamente el teclado.
</li>
</ol>
</ol>


Línea 67: Línea 86:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<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>.
El enlace se activa con teclado y la navegación también es posible sin ratón.
</div>
 
<div class="accessibility-card-error">
<strong>Incorrecto:</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<div onclick="comprar()">Comprar</div>
<a href="#info">Ver información</a>
<p id="info">Contenido accesible sin necesidad de ratón.</p>
</pre>
</pre>
El elemento no es accesible con teclado si no se añaden eventos de teclado y atributos semánticos.
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Prueba manual con teclado</li>
<li>'''Navegación por teclado''': recorrer toda la página usando <kbd>Tab</kbd>, <kbd>Shift + Tab</kbd>, flechas y <kbd>Enter</kbd>/<kbd>Espacio</kbd> para comprobar que todos los elementos interactivos son alcanzables y activables.</li>
<li>Herramientas de desarrollo del navegador</li>
<li>'''Inspección del navegador''': verificar que los controles no dependen exclusivamente de interacción con ratón o gestos del puntero (p. ej. eventos solo <code>onmouseover</code> o <code>onclick</code> sin alternativa de teclado).</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que los elementos interactivos son anunciados como operables y que la interacción con teclado se mantiene.</li>
<li>'''Herramientas de accesibilidad''': usar DevTools y extensiones (Accessibility Tree) para revisar que widgets personalizados exponen roles y manejadores de teclado adecuados.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:39 6 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 la funcionalidad de la página debe ser operable a través del teclado, excepto cuando dicha funcionalidad sea imposible realizarse con teclado (por ejemplo, un dibujo a mano alzada).

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

Recursos de apoyo

Consejos
  • 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 mouseover → focus

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Utilizar el teclado para operar con las diversas funcionalidades que la página ofrece.
  2. Paso 2. Verificar que se puede operar adecuadamente con todas las funcionalidades utilizando solamente el teclado.

Resultado esperado

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

Ejemplo

El enlace se activa con teclado y la navegación también es posible sin ratón. 

<a href="#info">Ver información</a>
<p id="info">Contenido accesible sin necesidad de ratón.</p>

Otras herramientas de evaluación

  • Navegación por teclado: recorrer toda la página usando Tab, Shift + Tab, flechas y Enter/Espacio para comprobar que todos los elementos interactivos son alcanzables y activables.
  • Inspección del navegador: verificar que los controles no dependen exclusivamente de interacción con ratón o gestos del puntero (p. ej. eventos solo onmouseover o onclick sin alternativa de teclado).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que los elementos interactivos son anunciados como operables y que la interacción con teclado se mantiene.
  • Herramientas de accesibilidad: usar DevTools y extensiones (Accessibility Tree) para revisar que widgets personalizados exponen roles y manejadores de teclado adecuados.










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




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.1_Teclado_Accesible/2.1.1-A&oldid=3715»