El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Accesibilidad del Teclado

Siguiente ►
►

La accesibilidad del teclado es un aspecto crucial del diseño web accesible. Muchas personas con discapacidades dependen del teclado o de dispositivos similares para navegar por la web. Asegurarse de que un sitio web sea completamente navegable mediante el teclado es esencial para proporcionar una experiencia inclusiva.

Conceptos Clave

  1. Navegación por Tabulación:

    • La tecla "Tab" permite a los usuarios moverse entre elementos interactivos (enlaces, botones, campos de formulario) en una página web.
    • El orden de tabulación debe ser lógico y seguir el flujo natural de la página.

  2. Foco del Teclado:

    • El foco del teclado indica el elemento actualmente seleccionado. Debe ser visible y claramente distinguible.
    • Utiliza CSS para personalizar el estilo del foco, asegurando que sea accesible para personas con discapacidades visuales.

  3. Accesibilidad de los Controles Personalizados:

    • Los controles personalizados (como menús desplegables o pestañas) deben ser accesibles mediante el teclado.
    • Implementa eventos de teclado para permitir la interacción con estos elementos.

  4. Evitar Trampas de Teclado:

    • Asegúrate de que los usuarios puedan salir de cualquier componente interactivo usando el teclado.
    • Las trampas de teclado ocurren cuando un usuario no puede navegar fuera de un elemento usando la tecla "Tab".

Ejemplo Práctico

A continuación, se muestra un ejemplo de cómo hacer un menú desplegable accesible mediante el teclado:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú Desplegable Accesible</title>
    <style>
        .focus-visible {
            outline: 2px solid blue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Inicio</a></li>
            <li>
                <button aria-haspopup="true" aria-expanded="false" id="menuButton">Servicios</button>
                <ul id="submenu" hidden>
                    <li><a href="#web">Desarrollo Web</a></li>
                    <li><a href="#design">Diseño Gráfico</a></li>
                </ul>
            </li>
            <li><a href="#contact">Contacto</a></li>
        </ul>
    </nav>

    <script>
        const menuButton = document.getElementById('menuButton');
        const submenu = document.getElementById('submenu');

        menuButton.addEventListener('click', () => {
            const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
            menuButton.setAttribute('aria-expanded', !isExpanded);
            submenu.hidden = isExpanded;
        });

        menuButton.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowDown') {
                submenu.hidden = false;
                submenu.querySelector('a').focus();
            }
        });

        submenu.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                submenu.hidden = true;
                menuButton.focus();
            }
        });
    </script>
</body>
</html>

Explicación del Código

  • HTML: Se utiliza un botón con aria-haspopup y aria-expanded para indicar que controla un menú desplegable.
  • CSS: Se define un estilo para el foco visible.
  • JavaScript:
    • Se maneja el evento click para alternar la visibilidad del menú.
    • Se maneja el evento keydown para permitir la navegación con las teclas de flecha y cerrar el menú con "Escape".

Ejercicios Prácticos

Ejercicio 1: Crear un Formulario Accesible

Tarea: Crea un formulario de contacto que sea completamente navegable mediante el teclado. Asegúrate de que el orden de tabulación sea lógico y que el foco sea claramente visible.

Solución:

  • Utiliza elementos de formulario estándar (<input>, <textarea>, <button>) y asegúrate de que el orden de tabulación siga el flujo visual del formulario.
  • Aplica estilos CSS para resaltar el foco del teclado.

Ejercicio 2: Mejorar un Control Personalizado

Tarea: Toma un control personalizado (como un carrusel de imágenes) y hazlo accesible mediante el teclado. Asegúrate de que los usuarios puedan navegar entre las imágenes usando las teclas de flecha.

Solución:

  • Implementa eventos de teclado para manejar las teclas de flecha izquierda y derecha.
  • Asegúrate de que el foco se mueva correctamente entre los elementos interactivos del carrusel.

Conclusión

La accesibilidad del teclado es fundamental para garantizar que todos los usuarios puedan interactuar con un sitio web de manera efectiva. Al implementar prácticas de accesibilidad del teclado, no solo cumples con los estándares de accesibilidad, sino que también mejoras la experiencia de usuario para todos. En el siguiente tema, exploraremos cómo hacer que el contenido de video y audio sea accesible.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados