Saltar al contenido principal
LibreTexts Español

4.6: Interacción con el teclado

  • Page ID
    152655
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    El acceso por teclado es quizás la característica de accesibilidad más importante que puede acceder a un sitio web, un widget o una aplicación web. Sin embargo, a menudo es pasado por alto por los desarrolladores, que suelen ser usuarios de mouse y pueden no tener usabilidad del teclado como parte de su régimen de prueba. Las personas ciegas suelen ser incapaces de usar un mouse, por lo que cualquier característica que dependa de un mouse solo para funcionar probablemente será inaccesible para ellos. Afortunadamente, es relativamente fácil incluir el acceso por teclado. Es más una cuestión de recordar agregarlo cuando se agrega el acceso del mouse.

    El siguiente es un ejemplo simple de incluir eventos de mouse y teclado al definir la interacción para un widget o aplicación web. Examine el JavaScript para ver cómo se manejan los eventos de mouse y teclado, luego en la pestaña Resultado, intente operar el botón con un teclado y un mouse mientras usa ChromeVox. La forma de implementar tanto el mouse como el teclado realmente no importa, siempre y cuando sea posible interactuar con ambos.

    Puede notar algunas inconsistencias en el soporte de ChromeVox para la región en vivo utilizada para presentar los mensajes en el ejemplo, más específicamente el atributo aria-atomic. Las regiones vivas serán cubiertas más a fondo más adelante en esta dependencia.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Previsibilidad, consistencia y convención

    Aquí presentaremos los conceptos básicos de la interacción con el teclado, y entraremos en mayor detalle cuando empecemos a mirar más de cerca los widgets particulares y patrones de diseño a medida que se introducen en las unidades que siguen.

    Como sugiere el encabezado de esta sección, la interacción del teclado debe ser predecible, consistente y debe seguir la convención. Es decir, los usuarios deben tener una buena idea del camino que seguirá el foco (predecible). Al navegar con la tecla Tab, esa ruta debe ser la misma en toda una aplicación o sitio web (consistente). Por último, debería ser como es en otras aplicaciones, sitios web, o sistemas operativos (convención).

    Lectura sugerida: Desarrollo de una interfaz de teclado

    Tomemos por ejemplo un cuadro combinado (también conocido como, un menú selecto). Independientemente del sistema operativo que se utilice, los cuadros combinados funcionan de la misma manera. Si estás desarrollando un widget a partir de divs que funcione como un cuadro combinado, debería funcionar como un cuadro combinado HTML estándar.

    Interacción de teclado convencional para un cuadro combinado:

    • Pestaña para navegar en el cuadro combinado
    • Mientras está enfocado, pestaña para navegar más allá del cuadro combinado
    • Mientras está enfocado, Mayús+Tab para navegar antes del cuadro combinado
    • Mientras está enfocado, Flecha abajo para mostrar la siguiente opción
    • Mientras está enfocado, Flecha arriba para mostrar la opción anterior
    • Mientras está enfocado, Alt + Flecha abajo para mostrar la lista de opciones
    • Mientras la lista de opciones está abierta, Alt + Flecha arriba para cerrar la lista de opciones
    • Mientras la lista de opciones está abierta, Esc para cerrar la lista de opciones y volver al estado predeterminado
    • Mientras una opción está enfocada, Enter para seleccionar esa opción

    Al desarrollar un cuadro combinado personalizado (normalmente, un cuadro de texto y una lista de opciones), una cuadrícula, un árbol o un diálogo se combinan en una unidad funcional que debería funcionar como un menú de selección HTML estándar. Funcionalidad además de la descrita anteriormente se puede agregar al combobox personalizado, por ejemplo, para agregar autocompletado. A medida que el usuario escribe letras en el cuadro de texto, las opciones que comienzan con el tipo de cadena se muestran a continuación como una lista o la primera opción con esas letras se muestra en línea en el cuadro de texto.

    Prueba esto: Usando tu teclado, prueba las interacciones del teclado descritas anteriormente para confirmar si el combobox funciona o no de manera convencional. Pruébalo con algunos navegadores diferentes y observa cualquier variación en la forma en que los diferentes navegadores manejan la interacción de combobox.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.
    Lectura sugerida: Para una discusión detallada de los patrones de diseño de cajas combinadas, consulte: WAI-ARIA Authoring Practices 1.1 (Combo Boxes)

    Toolkit: Para obtener una lista de patrones de diseño y convenciones de interacción con el teclado, revise las siguientes prácticas recomendadas de desarrollo de widgets. Escanea por ahora. Serán cubiertos más a fondo en unidades posteriores.


    This page titled 4.6: Interacción con el teclado is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.