Aprendre en el flux de treball: laboratoris, revisions i microformació

El que s'aprèn en un taller es perd en poques setmanes si no es practica en la feina diària. La formació més eficaç en accessibilitat no passa només a l'aula: passa en la revisió d'un pull request, en el missatge d'un linter, en un laboratori amb barreres preparades o en una jornada en què un equip dedica la tarda a corregir. En aquesta lliçó veuràs com convertir el mateix flux de treball en un entorn d'aprenentatge. La integració tècnica de les proves en el cicle de vida (axe-core, Playwright, criteris d'acceptació) la tens al curs N7-C2; aquí la mirem amb ulls de formador: com fer que cadascun d'aquests punts ensenyi.

Laboratoris amb barreres sembrades

Un laboratori és un entorn de pràctica (una pàgina, una petita aplicació o una còpia d'un procés real) en què s'han introduït expressament barreres conegudes. L'alumnat les busca, les diagnostica, n'anomena el criteri i les corregeix; la persona formadora té el mapa de solucions. Funciona perquè reprodueix la feina real en un entorn segur, sense por de trencar producció.

Com construir-lo

• Parteix de components propis: el laboratori més útil és una còpia del procés d'alta, del cercador d'oficines o del formulari de cita prèvia de l'organització, no un web genèric.
• Sembra entre 10 i 15 barreres de tipus variats: algunes que detecta una eina automàtica i d'altres que només es troben amb teclat o lector de pantalla.
• Gradua la dificultat: nivell 1 (alt absent, contrast), nivell 2 (etiquetes, noms de botons, ordre del focus), nivell 3 (gestió del focus en un diàleg, missatges d'estat, components ARIA).
• Documenta la solució de cada barrera: criteri WCAG, impacte en les persones usuàries, correcció i com comprovar-la.
• Versiona el laboratori per poder-lo reutilitzar i actualitzar quan canviï el design system.

<!-- Fragment de laboratori: quatre barreres sembrades -->
<img src="tarifas-2026.png">
<input type="text" placeholder="Cerca una oficina">
<a href="/condiciones">Premeu aquí</a>
<span class="icono-cerrar" onclick="cerrar()"></span>

<!-- Mapa de solucions (només per a la persona formadora) -->
<!-- 1.1.1: taula de tarifes com a taula HTML, no com a imatge -->
<label for="buscar">Cerca una oficina</label>
<input id="buscar" type="search" autocomplete="off">
<a href="/condiciones">Condicions del Compte Nòmina</a>
<button type="button" aria-label="Tanca l'avís">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Les quatre barreres cobreixen 1.1.1 Contingut no textual (la imatge amb dades), 3.3.2 Etiquetes o instruccions i 1.3.1 Informació i relacions (el placeholder no és una etiqueta), 2.4.4 Propòsit dels enllaços (en context) i 2.1.1 Teclat amb 4.1.2 Nom, funció i valor (la icona que només respon al ratolí i no té nom). Només la imatge sense alt la marcarà amb seguretat qualsevol eina automàtica; el camp amb només placeholder l'assenyalen unes eines i d'altres no (axe-core, per exemple, accepta el placeholder com a nom accessible), i les altres dues barreres obliguen a provar.

Si vols un recurs públic per començar, la Before and After Demonstration (BAD) del W3C ofereix un lloc d'exemple en versió inaccessible i corregida, amb les barreres documentades.

La revisió com a formació

Cada revisió de codi o de disseny és una microsessió de formació individual. La diferència entre un comentari que ensenya i un que només bloqueja és enorme:

Un comentari que ensenya té quatre parts: què falla i quin criteri incompleix, a qui afecta i com, proposta de correcció i enllaç a la guia interna. Al principi costa més escriure'l; al cap de pocs mesos l'equip deixa de cometre aquell error i ja no cal. Per donar-hi suport:

• Una plantilla de pull request amb tres o quatre preguntes d'accessibilitat («ho has provat amb el teclat?», «els controls nous tenen nom accessible?»).
• Revisió entre iguals en parella mixta (una persona amb més experiència en accessibilitat i una altra amb menys) durant els primers mesos després de la formació.
• En disseny, revisions d'anotacions (ordre del focus, noms, encapçalaments) abans de passar a desenvolupament, amb el mateix format de comentari.

Eines que ensenyen

Els linters, els comprovadors i les eines de prova també són material formatiu, perquè parlen amb la persona just quan comet l'error:

• Linters de codi: eslint-plugin-jsx-a11y avisa a l'editor amb regles com jsx-a11y/alt-text, jsx-a11y/label-has-associated-control o jsx-a11y/click-events-have-key-events. Activa poques regles al principi i explica-les a la formació, perquè l'avís s'entengui.
• Resultats d'axe-core: cada incidència porta una descripció i un enllaç d'ajuda; als informes de les proves automàtiques afegeix-hi un enllaç a l'entrada corresponent de la vostra guia interna, en la vostra llengua i amb exemples propis.
• Comprovadors ofimàtics: el comprovador d'accessibilitat de Word o PowerPoint explica cada problema i com resoldre'l; ensenyar a fer-lo servir a cada publicació forma el personal de continguts de manera contínua.

Microformació just a temps

La microformació són peces de 3 a 5 minuts que es consumeixen just quan es necessiten: abans de publicar el primer PDF, en fer servir per primera vegada el component de pestanyes, en preparar la primera publicació amb vídeo. Funcionen si estan enllaçades des del lloc on sorgeix la necessitat (la guia de components, el gestor de continguts, la plantilla de pull request) i si cadascuna resol una sola tasca. Formats que funcionen: un vídeo curt amb subtítols i la locució descrivint el que es fa, una fitxa d'una pàgina, un exemple de codi copiable. Les hores de consulta de l'oficina (vegeu la lliçó de comunitat interna) completen la microformació per als dubtes que no caben en una fitxa.

Jornades de correcció intensiva

Una jornada de correcció (en anglès bug bash) reuneix un equip durant mitja jornada o una jornada per buscar i corregir barreres en el seu producte, amb el suport de l'oficina i, si és possible, de persones usuàries que validen les correccions. És formació aplicada amb un resultat visible el mateix dia. Perquè funcioni:

• Abast acotat: un procés concret (contractar, demanar cita, pagar), no «tot el web».
• Equips mixtos de disseny, desenvolupament i continguts, amb el protocol de prova i la plantilla de registre de la lliçó de dinàmiques.
• Classificació per severitat (bloquejant, greu, moderada, lleu) abans de corregir, per començar pel que impedeix completar la tasca.
• Reconeixement per impacte validat, no per nombre d'incidències: si es premia la quantitat, apareixen duplicats i barreres trivials.
• Tancament amb el que s'ha après: quins patrons s'han repetit i quina entrada de la guia o quin mòdul cal reforçar.

Resum

• Els laboratoris amb 10-15 barreres sembrades, basats en components propis i amb mapa de solucions, permeten practicar el diagnòstic i la correcció sense risc.
• Un comentari de revisió que ensenya diu què falla i quin criteri incompleix, a qui afecta, com corregir-ho i on ampliar-ho.
• Els linters, els resultats d'axe i els comprovadors ofimàtics ensenyen en el moment de l'error si s'introdueixen per tandes i enllacen a la guia interna.
• La microformació just a temps i les jornades de correcció amb abast acotat i reconeixement per impacte mantenen la pràctica entre sessions.