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

Creació de Ginys JavaScript Accessibles

Següent ►
►

En aquest tema, aprendrem com crear ginys JavaScript que siguin accessibles per a tots els usuaris, incloent aquells que utilitzen tecnologies assistencials. Els ginys JavaScript poden millorar significativament la interactivitat d'un lloc web, però si no es dissenyen correctament, poden crear barreres d'accessibilitat.

Conceptes Clau

  1. Accessibilitat del Teclat: Assegura't que els ginys siguin accessibles mitjançant el teclat, ja que molts usuaris amb discapacitats no poden utilitzar un ratolí.
  2. Ús d'ARIA (Accessible Rich Internet Applications): Utilitza atributs ARIA per proporcionar informació addicional sobre els elements de la interfície d'usuari.
  3. Gestió del Foc (Focus Management): Controla el focus del teclat per assegurar que els usuaris sempre sàpiguen on es troben dins de la pàgina.
  4. Retroalimentació Visual i Auditiva: Proporciona retroalimentació clara quan es realitzen accions, com ara canvis d'estat o errors.

Exemples Pràctics

Exemple 1: Botó Accessible

<button id="accessibleButton">Fes clic aquí</button>

<script>
  document.getElementById('accessibleButton').addEventListener('click', function() {
    alert('Botó clicat!');
  });
</script>

Explicació:

  • Aquest botó és accessible perquè es pot activar amb el teclat (mitjançant la tecla "Enter" o "Espai").
  • Utilitza un element <button>, que és semànticament correcte i reconegut per les tecnologies assistencials.

Exemple 2: Ús d'ARIA per a Ginys Complexos

<div role="tablist" aria-label="Exemple de pestanyes">
  <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">Pestanya 1</button>
  <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">Pestanya 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  Contingut de la Pestanya 1
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
  Contingut de la Pestanya 2
</div>

Explicació:

  • Utilitza role="tablist", role="tab", i role="tabpanel" per definir la relació entre les pestanyes i els seus panells de contingut.
  • Els atributs aria-selected i aria-controls ajuden a indicar quina pestanya està activa i quin panell controla.

Exercicis Pràctics

Exercici 1: Crear un Botó Accessible

Crea un botó que, quan es clica, canviï el text d'un paràgraf a "Hola, món!". Assegura't que el botó sigui accessible mitjançant el teclat.

Solució:

<button id="changeTextButton">Canvia el text</button>
<p id="textParagraph">Text original</p>

<script>
  document.getElementById('changeTextButton').addEventListener('click', function() {
    document.getElementById('textParagraph').textContent = 'Hola, món!';
  });
</script>

Exercici 2: Implementar un Giny de Pestanyes Accessible

Crea un giny de pestanyes amb dues pestanyes i contingut associat. Utilitza ARIA per assegurar que sigui accessible.

Solució:

<div role="tablist" aria-label="Pestanyes d'exemple">
  <button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">Pestanya 1</button>
  <button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">Pestanya 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  Contingut de la Pestanya 1
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
  Contingut de la Pestanya 2
</div>

<script>
  const tabs = document.querySelectorAll('[role="tab"]');
  const panels = document.querySelectorAll('[role="tabpanel"]');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
      panels.forEach(p => p.hidden = true);

      tab.setAttribute('aria-selected', 'true');
      document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
    });
  });
</script>

Errors Comuns i Consells

  • No oblidis el suport per al teclat: Assegura't que tots els elements interactius es puguin accedir i controlar amb el teclat.
  • Evita l'ús excessiu de JavaScript per a tasques que es poden fer amb HTML i CSS: Això pot complicar l'accessibilitat.
  • Prova amb tecnologies assistencials: Utilitza lectors de pantalla i altres eines per verificar que els teus ginys són realment accessibles.

Conclusió

Crear ginys JavaScript accessibles requereix una comprensió dels principis d'accessibilitat i l'ús adequat d'HTML, CSS i ARIA. Amb pràctica i atenció als detalls, pots assegurar-te que els teus ginys siguin útils i accessibles per a tots els usuaris. En el següent tema, explorarem com assegurar l'accessibilitat del teclat en més profunditat.

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