Alternatives textuals, multimèdia i adaptabilitat: 1.1.1, 1.2.x i 1.3.1 a 1.3.5

El principi Perceptible exigeix que la informació pugui arribar a la persona per més d'un sentit i en més d'una presentació. Les seves tres primeres pautes (alternatives textuals, mitjans temporals i adaptabilitat) concentren moltes de les fallades de nivell A de qualsevol lloc. Aquesta lliçó repassa cada criteri amb la mirada de l'auditor: què cal comprovar, quines excepcions s'han d'admetre i quins errors de classificació cal evitar.

1.1.1 Contingut no textual (A)

Tot contingut no textual ha de tenir una alternativa textual que compleixi el mateix propòsit, amb excepcions taxades: controls i inputs (han de tenir nom, no descripció), mitjans temporals (es cobreixen a 1.2), proves o exercicis que no tindrien sentit en text (se'n descriu la naturalesa), experiències sensorials, CAPTCHA (alternativa en una altra modalitat sensorial i descripció del seu propòsit) i decoració (la tecnologia de suport l'ha de poder ignorar).

Com avaluar-lo: inventari d'imatges, icones, SVG, canvas, imatges de fons amb significat i gràfics. Per a cadascun, decideix-ne la funció (informativa, funcional, decorativa, complexa, text) i comprova que l'alternativa hi encaixa. Pregunta clau: si trec la imatge i deixo només l'alt, la pàgina continua dient el mateix?

Fallades típiques: alt que repeteix el nom del fitxer; alt buit en una imatge que aporta informació; decoratives amb alt descriptiu (soroll); icones d'enllaç amb alt genèric («icona»); gràfic complex amb un alt de tres paraules i sense descripció llarga ni taula; SVG inline sense role="img" ni <title> accessible; imatge enllaçada l'alt de la qual descriu la foto i no la destinació.

<!-- Incorrecte: l'alt descriu la imatge, no la funció -->
<a href="/carrito"><img src="cesta.svg" alt="Dibuix d'una cistella"></a>

<!-- Correcte: l'alternativa indica la destinació i l'estat -->
<a href="/carrito"><img src="cesta.svg" alt="Carretó, 3 articles"></a>

<!-- Decorativa: alt buit perquè el lector la ignori -->
<img src="separador.png" alt="">

1.2 Mitjans temporals

• 1.2.1 Només àudio i només vídeo (enregistrat) (A): un pòdcast necessita transcripció; un vídeo sense àudio (animació explicativa) necessita transcripció o una pista d'àudio equivalent.
• 1.2.2 Subtítols (enregistrat) (A): tot vídeo amb àudio necessita subtítols sincronitzats que incloguin el diàleg i els sons rellevants. Els automàtics sense revisar no compleixen si contenen errors que alteren el sentit. Excepció: el vídeo és alternativa d'un text i així s'indica.
• 1.2.3 Audiodescripció o alternativa multimèdia (enregistrat) (A): si el vídeo té informació visual no present a l'àudio, cal audiodescripció o una transcripció descriptiva completa. Si tot el que és visual es diu a l'àudio (una persona parlant a càmera), el criteri es compleix sense afegir-hi res.
• 1.2.4 Subtítols (en directe) (AA): retransmissions (plens municipals, esdeveniments) amb subtítols en temps real.
• 1.2.5 Audiodescripció (enregistrat) (AA): a nivell AA ja no n'hi ha prou amb la transcripció: cal audiodescripció quan hi ha informació visual rellevant.

Com avaluar-lo: reprodueix cada vídeo amb el so apagat i després amb la pantalla apagada. Comprova que els subtítols existeixin, estiguin sincronitzats, siguin correctes i es puguin activar des del reproductor. Els vídeos incrustats de YouTube formen part de la pàgina: si no tenen subtítols, la fallada és de la pàgina.

1.3.1 Informació i relacions (A)

El que es comunica visualment mitjançant l'estructura (encapçalaments, llistes, taules, agrupacions, etiquetes, èmfasi amb significat) ha d'estar disponible programàticament o en text. És el criteri més ampli del nivell A i un dels més incomplerts.

Comprovacions: encapçalaments visuals marcats com a h1-h6 amb una jerarquia coherent; llistes amb ul/ol; taules de dades amb th, scope o headers i caption; camps amb label associat; grups de botons d'opció amb fieldset/legend; text obligatori indicat no només amb un asterisc vermell sinó de manera programàtica o textual; taules de maquetació que no s'anuncien com a taules; text en negreta que fa d'encapçalament sense ser-ho.

Errors de classificació: un encapçalament que salta de nivell no és una fallada si l'estructura és coherent; un camp sense etiqueta és 1.3.1 i 4.1.2 (i 3.3.2 si tampoc no hi ha cap instrucció visible); un missatge d'error només en vermell és 1.4.1 i 3.3.1, no 1.3.1.

1.3.2 Seqüència significativa (A)

Quan l'ordre del contingut n'afecta el significat, l'ordre de lectura programàtic ha de ser correcte. Afecta maquetacions amb CSS order, flex-direction: row-reverse, posicionament absolut i columnes on el DOM no segueix l'ordre visual. Prova: desactiva el CSS o llegeix amb el lector i compara-ho amb l'ordre visual; la llista d'encapçalaments i l'ordre de Tab hi ajuden. No ho confonguis amb 2.4.3, que tracta l'ordre del focus entre elements interactius.

1.3.3 Característiques sensorials (A)

Les instruccions no poden dependre només de la forma, el color, la mida, la posició visual, l'orientació o el so: «premeu el botó verd de la dreta», «quan sentiu el xiulet». Es compleix afegint-hi un referent textual: «premeu Continua (botó verd de la dreta)». Sol aparèixer en ajudes i en formularis amb instruccions gràfiques.

1.3.4 Orientació (AA)

El contingut no s'ha de restringir a vertical o horitzontal tret que sigui essencial (xec bancari, piano). Un avís de «gireu el dispositiu» que bloqueja l'ús incompleix; moltes persones tenen el mòbil fixat a una cadira de rodes en una orientació. Prova: gira el dispositiu amb el bloqueig d'orientació desactivat i comprova que tot continua operatiu.

1.3.5 Identificació del propòsit de l'entrada (AA)

Els camps que recullen informació sobre la persona usuària (nom, correu, telèfon, adreça, targeta…) n'han d'identificar el propòsit programàticament, a la pràctica mitjançant autocomplete amb els valors definits a HTML (given-name, family-name, email, tel, postal-code, cc-number…). Això permet l'emplenament automàtic i que hi hagi extensions que substitueixin les etiquetes per icones familiars. No s'aplica a camps que no són sobre l'usuari (cercador, número d'expedient). Fallades: absència d'autocomplete en formularis de registre, autocomplete="off" en camps de dades personals, valors inventats (autocomplete="nombre").

<label for="email">Correu electrònic</label>
<input id="email" name="correo" type="email" autocomplete="email">

<label for="cp">Codi postal</label>
<input id="cp" name="cp" inputmode="numeric" autocomplete="postal-code">

A la lliçó 8 trobaràs una taula amb les confusions de classificació més freqüents entre aquests criteris i els de la resta del curs.

Resum

• 1.1.1: alternativa segons la funció de la imatge; alt buit per a les decoratives; CAPTCHA amb alternativa en una altra modalitat.
• 1.2.1-1.2.5: transcripció per a només àudio o només vídeo, subtítols exactes i sincronitzats, audiodescripció quan hi ha informació visual no parlada (AA); subtítols en directe a nivell AA.
• 1.3.1: l'estructura visual (encapçalaments, llistes, taules, etiquetes, grups) ha d'existir al codi; 1.3.2: ordre de lectura coherent amb el visual.
• 1.3.3: instruccions que no depenguin només de característiques sensorials; 1.3.4: sense bloqueig d'orientació tret que sigui essencial.
• 1.3.5: autocomplete amb valors estàndard en els camps sobre la persona usuària.