El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Accessibilitat del Teclat

Següent ►
►

L'accessibilitat del teclat és un aspecte fonamental per garantir que les aplicacions web siguin utilitzables per a persones amb discapacitats que no poden utilitzar un ratolí. Aquest tema se centra en com assegurar que tots els elements interactius d'una pàgina web siguin accessibles mitjançant el teclat.

Conceptes Clau

  1. Navegació per Teclat:

    • Assegura't que tots els elements interactius (botons, enllaços, formularis) siguin accessibles mitjançant la tecla Tab.
    • L'ordre de tabulació ha de seguir una seqüència lògica que reflecteixi l'ordre visual de la pàgina.

  2. Focus Visual:

    • Proporciona un indicador visual clar per al focus del teclat. Això ajuda els usuaris a saber quin element està seleccionat actualment.
    • Utilitza CSS per personalitzar l'estil del focus si cal, però assegura't que sigui prou visible.

  3. Gestió d'Esdeveniments del Teclat:

    • Implementa esdeveniments de teclat per a la navegació i l'activació d'elements interactius.
    • Assegura't que les funcions que es poden activar amb el ratolí també es puguin activar amb el teclat.

  4. Evitar Trampes de Focus:

    • Evita situacions on el focus del teclat quedi atrapat en un element o secció de la pàgina, impedint que l'usuari pugui navegar més enllà.

Exemples Pràctics

Exemple 1: Navegació per Teclat Bàsica

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Navegació per Teclat</title>
    <style>
        button:focus {
            outline: 2px solid blue;
        }
    </style>
</head>
<body>
    <h1>Exemple de Navegació per Teclat</h1>
    <button>Botó 1</button>
    <button>Botó 2</button>
    <button>Botó 3</button>
</body>
</html>

Explicació:

  • Aquest exemple mostra tres botons que es poden navegar mitjançant la tecla Tab.
  • L'estil CSS proporciona un contorn blau quan un botó té el focus, fent-lo visible per a l'usuari.

Exemple 2: Gestió d'Esdeveniments del Teclat

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Gestió d'Esdeveniments del Teclat</title>
</head>
<body>
    <button id="myButton">Prem-me</button>

    <script>
        document.getElementById('myButton').addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                alert('Botó activat!');
            }
        });
    </script>
</body>
</html>

Explicació:

  • Aquest codi afegeix un esdeveniment de teclat al botó que activa una alerta quan es prem la tecla Enter o la barra espaiadora.

Exercicis Pràctics

Exercici 1: Crear un Formulari Accessible per Teclat

Instruccions:

  • Crea un formulari amb camps de text, botons de ràdio i un botó d'enviament.
  • Assegura't que tots els elements siguin accessibles mitjançant la tecla Tab i que el focus sigui visible.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Formulari Accessible</title>
    <style>
        input:focus, button:focus {
            outline: 2px solid green;
        }
    </style>
</head>
<body>
    <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name"><br><br>

        <label>Gènere:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Home</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Dona</label><br><br>

        <button type="submit">Enviar</button>
    </form>
</body>
</html>

Errors Comuns i Consells

  • Error Comú: No proporcionar un indicador de focus visible.

    • Consell: Utilitza CSS per assegurar que el focus sigui clarament visible i contrastat amb el fons.

  • Error Comú: Elements interactius que no són accessibles mitjançant el teclat.

    • Consell: Revisa l'ordre de tabulació i assegura't que tots els elements es poden activar amb el teclat.

Conclusió

L'accessibilitat del teclat és essencial per a la inclusió de tots els usuaris, especialment aquells que depenen de tecnologies assistencials. Assegurar-se que els elements de la interfície siguin navegables i activables mitjançant el teclat és un pas fonamental per crear aplicacions web accessibles. En el següent tema, explorarem com fer que el contingut multimèdia sigui accessible per a tots els usuaris.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats