Tanquem el Mòdul 2 demostrant que les errades reals d'accessibilitat s'agrupen en quatre famílies: coses que l'usuari no percep, coses que no pot operar, coses que no comprèn i coses que no són robustes. Aquestes quatre famílies són, exactament, els principis POUR de WCAG. En aquest mòdul els recorrem un a un per entendre què exigeix cadascun. Comencem pel primer i més bàsic: Perceptible. Si la Marta (cega, NVDA), la Sofía (baixa visió, zoom al 300 %) o en Diego (sord) no poden percebre la informació, tota la resta sobra: no hi ha res a operar ni a comprendre. Perceptible vol dir que la informació i els components de la interfície s'han de presentar de manera que les persones els puguin percebre, i que cap informació depengui d'un únic sentit.

1. Què exigeix el principi Perceptible
2. Pauta 1.1: Alternatives textuals
3. Pauta 1.2: Mitjans tempodependents
4. Pauta 1.3: Adaptable
5. Pauta 1.4: Distingible
6. Taula resum de criteris
7. Errors comuns i consells
8. Exercicis
9. Conclusió

La idea central és la redundància sensorial: qualsevol informació transmesa per un canal (una imatge, un so, un color, una posició a la pantalla) ha d'estar disponible també per un altre canal que l'usuari sí que pugui fer servir. Un lector de pantalla converteix text en veu o braille, però no pot "veure" una foto ni "sentir" un vídeo per tu. El principi Perceptible s'organitza en quatre pautes.

Proporciona alternatives textuals per a tot contingut no textual, de manera que es pugui transformar en altres formats (veu, braille, símbols, lletra gran).

• 1.1.1 Contingut no textual (Nivell A): tota imatge, icona, gràfic, botó gràfic o control no textual necessita una alternativa en text que compleixi el seu propòsit. Les imatges decoratives s'han de marcar com a tals perquè el lector les ignori.

A Cursalia, cada targeta del catàleg porta una imatge de portada del curs. Si aquesta imatge no té alternativa textual, la Marta sent "imatge" o el nom del fitxer, i no sap quin curs és. L'alternativa ha de descriure la funció, no adornar: per a una portada sol n'hi ha prou amb el títol del curs que ja és a l'enllaç. Una icona de "cadenat" que indica un curs bloquejat necessita alternativa ("Curs bloquejat"), mentre que un adorn de fons es marca com a decoratiu.

El com escriure bones alternatives (text alternatiu útil, alt buit, imatges complexes) es desenvolupa al Mòdul 5: Alternatives de text per a imatges. Aquí només fixem el requisit.

Cobreix el contingut basat en temps: àudio i vídeo. El reproductor de videolliçó de Cursalia entra de ple aquí. Els criteris escalen per nivell:

• 1.2.1 Només àudio i només vídeo (pregravat) (A): una transcripció per a l'àudio; una alternativa textual o pista d'àudio per al vídeo sense so.
• 1.2.2 Subtítols (pregravat) (A): els vídeos amb veu necessiten subtítols sincronitzats. Sense ells, en Diego no accedeix a la lliçó.
• 1.2.3 Audiodescripció o alternativa (pregravat) (A): descriure la informació visual important que no se sent.
• 1.2.4 Subtítols (en directe) (AA): subtítols també en emissions en viu (un webinar de Cursalia).
• 1.2.5 Audiodescripció (pregravat) (AA): pista d'àudio que narra allò visual rellevant per a qui no hi veu.

La implementació real de subtítols, transcripcions i audiodescripció al reproductor s'aborda al Mòdul 5: Vídeo i Àudio.

El contingut s'ha de poder presentar de maneres diferents (per exemple, amb un lector de pantalla o amb un full d'estil de l'usuari) sense perdre informació ni estructura.

• 1.3.1 Informació i relacions (A): l'estructura visual (encapçalaments, llistes, taules, grups de camps) ha d'estar al marcatge, no només en l'aspecte. Si un "títol" de secció només és text gran en negreta, la Marta no el detecta com a encapçalament i perd la possibilitat de navegar per estructura (Mòdul 2).
• 1.3.2 Seqüència significativa (A): l'ordre de lectura del codi ha de tenir sentit. Al panell de l'alumne (SPA), si el CSS col·loca la barra de progrés abans del títol però al DOM va després, el lector la llegirà en un ordre confús.
• 1.3.4 Orientació (AA): no forçar només vertical o horitzontal. La Sofía pot fer servir la tauleta fixada en un suport horitzontal.
• 1.3.5 Identificar el propòsit de l'entrada (AA): al formulari de matrícula, camps com nom, correu o telèfon han de declarar el seu propòsit (atribut autocomplete) perquè el navegador i les TA els emplenin o adaptin.

L'HTML semàntic que fa possible 1.3.1/1.3.2 és el Mòdul 4: HTML Semàntic.

Facilitar que els usuaris vegin i sentin el contingut, separant el primer pla del fons.

• 1.4.1 Ús del color (A): el color no pot ser l'únic mitjà per transmetre informació. Al filtre del catàleg, marcar els cursos "nous" només amb un punt verd deixa fora qui no distingeix el color; afegeix una etiqueta o icona.
• 1.4.3 Contrast (mínim) (AA): text i text en imatges amb ràtio mínim 4.5:1 (3:1 per a text gran). Aquí és on la paleta de marca de Cursalia es posa a prova: un gris de marca sobre blanc pot quedar per sota del llindar.
• 1.4.4 Redimensionar text (AA): el text s'ha de poder ampliar fins al 200 % sense perdre contingut ni funcionalitat.
• 1.4.5 Imatges de text (AA): fer servir text real, no imatges de text (llevat de logotips). Un bàner de Cursalia amb el preu "cremat" en una imatge no s'amplia ni es llegeix.
• 1.4.10 Reflux (reflow) (AA): el contingut s'ha de reorganitzar en una sola columna a 320 px (equivalent a zoom 400 %) sense scroll horitzontal. Clau per a la Sofía al 300 %.
• 1.4.11 Contrast no textual (AA): vores de camps, icones d'estat i límits de components també necessiten 3:1. La vora del desplegable del filtre s'ha de distingir del fons.
• 1.4.12 Espaiat del text (AA): si l'usuari augmenta l'interlineat, l'espaiat entre lletres/paraules/paràgrafs, no s'ha de perdre contingut. Ajuda en Hugo (dislèxia).

A Cursalia, la paleta de marca es defineix una vegada i es reutilitza en botons, enllaços i targetes; validar-ne el contrast de manera centralitzada evita repetir l'error a cada superfície.

El càlcul i correcció de contrast i el redimensionament del text s'implementen al Mòdul 4: Contrast i Redimensionament.

• Confondre "sense alt" amb "alt buit". Ometre alt deixa el lector llegint el nom del fitxer; alt="" marca la imatge com a decorativa expressament. Són coses diferents.
• Fiar la informació al color. "Els camps en vermell són obligatoris" incompleix 1.4.1. Afegeix text o un símbol.
• Creure que 1.4.3 (contrast de text) ho cobreix tot. Les vores i icones es regeixen per 1.4.11, amb llindar diferent (3:1). Són criteris separats.
• Posar text en imatges per comoditat de disseny. Trenca 1.4.5 i 1.4.4 alhora; el text real sempre guanya.
• Consell: revisa Perceptible amb dos gestos ràpids: navega amb el lector només per estructura i puja el zoom al 400 %. Si alguna cosa desapareix o es descol·loca, tens una errada perceptible.

Exercici 1. En una targeta del catàleg, els cursos amb places exhaurides es mostren amb la portada tenyida de gris. No hi ha cap altre indicador. Quin criteri s'incompleix i com el corregeixes a nivell de requisit?

Exercici 2. L'equip de marca proposa un text secundari en gris clar #9AA0A6 sobre fons blanc per a les descripcions de les targetes. Quin criteri cal verificar i quin llindar s'hi aplica? Per què és un bon lloc per arreglar-ho una sola vegada?

Exercici 3. Classifica cada element segons el criteri de la Pauta 1.2 que li aplica: (a) una videolliçó pregravada amb narració, (b) un webinar en directe, (c) un podcast d'àudio de Cursalia.

Solució 1. S'incompleix 1.4.1 Ús del color (A): l'estat "exhaurit" es transmet només per color. Requisit de correcció: afegir un senyal no cromàtic, per exemple una etiqueta de text "Places exhaurides" o una icona amb la seva alternativa textual, a més del tint. (La implementació visual es veurà al Mòdul 4.)

Solució 2. Cal verificar 1.4.3 Contrast (mínim), Nivell AA, amb llindar 4.5:1 per ser text normal. #9AA0A6 sobre blanc ronda 2.6:1, de manera que no compleix. Com que la paleta de marca es defineix de manera centralitzada i es reutilitza a totes les targetes, corregir el token de color una vegada propaga l'arreglada a tot el catàleg.

Solució 3. (a) Vídeo pregravat amb narració: 1.2.2 Subtítols (A) i 1.2.5 Audiodescripció (AA). (b) Webinar en directe: 1.2.4 Subtítols en directe (AA). (c) Podcast només àudio: 1.2.1 (A) mitjançant transcripció.

El principi Perceptible garanteix que res no depengui d'un únic sentit: text alternatiu per a allò no textual, subtítols i transcripcions per a allò tempodependent, estructura al marcatge i contrast suficient, escalat i reflux per a allò visual. Hem fixat què exigeix cada criteri i hem remès el com als mòduls 4 i 5. Però percebre el contingut no n'hi ha prou: la Lucía ha de poder operar-lo només amb el teclat, i ningú no ha de quedar atrapat en un menú ni perdre el focus. A la lliçó següent, 03-02 Operable, veurem què exigeix WCAG perquè tota la interfície es pugui manejar sense ratolí i navegar amb ordre i focus visibles.