Els quatre principis: perceptible, operable, comprensible i robust

Tota l'estructura de les WCAG penja de quatre principis, coneguts per les sigles en anglès POUR: Perceivable, Operable, Understandable, Robust. Són la resposta a una pregunta senzilla: què ha de passar perquè una persona pugui fer servir un contingut? L'ha de percebre, l'ha de poder manejar, l'ha d'entendre i la tecnologia que fa servir l'ha de ser capaç d'interpretar. Si falla qualsevol dels quatre, la persona en queda fora. En aquesta lliçó veuràs cada principi amb les seves pautes i exemples reals.

Principi 1: Perceptible

La informació i els components de la interfície s'han de presentar de manera que les persones els puguin percebre amb algun dels sentits. No n'hi ha prou que la informació «hi sigui»: ha de poder arribar a la persona per un canal que ella pugui fer servir. Les seves quatre pautes són:

• 1.1 Alternatives textuals: tot contingut no textual té una alternativa en text, perquè el text es pot convertir en veu, braille, mida gran o qualsevol altre format.
• 1.2 Mitjans temporals: àudio i vídeo amb subtítols, transcripcions i audiodescripció.
• 1.3 Adaptable: el contingut es pot presentar de diferents maneres (per exemple, amb una altra maquetació) sense perdre informació ni estructura. Aquí hi ha l'1.3.1 Informació i relacions, el criteri de la semàntica.
• 1.4 Distingible: facilitar que el contingut es vegi i se senti: contrast, color, mida del text, espaiat, control de l'àudio.

Principi 2: Operable

Els components de la interfície i la navegació s'han de poder manejar. Percebre un botó no serveix de res si no es pot prémer. Aquest principi s'ocupa de com interactua la persona:

• 2.1 Accessible amb teclat: tota la funcionalitat disponible des del teclat, sense paranys, sense dreceres que interfereixin.
• 2.2 Temps suficient: límits de temps ajustables, possibilitat de posar en pausa allò que es mou.
• 2.3 Convulsions i reaccions físiques: res que parpellegi més de tres vegades per segon; animacions evitables.
• 2.4 Navegable: saltar blocs, títols de pàgina, ordre del focus, propòsit dels enllaços, diverses maneres d'arribar-hi, encapçalaments, focus visible i no ocult.
• 2.5 Modalitats d'entrada: gestos, cancel·lació del punter, etiqueta en el nom, moviment, arrossegament i mida de l'objectiu.

Principi 3: Comprensible

La informació i el maneig de la interfície han de ser comprensibles. Una persona pot percebre un text i fer funcionar un formulari i, tot i així, no entendre què diu ni què se li demana. Les seves pautes són:

• 3.1 Llegible: idioma de la pàgina i de les parts en un altre idioma declarat al codi (perquè el lector de pantalla pronunciï bé); en AAA, paraules inusuals, abreviatures i nivell de lectura.
• 3.2 Predictible: res no canvia de context en rebre el focus o en introduir dades sense avís; navegació i identificació coherents; mecanismes d'ajuda en el mateix ordre relatiu a les pàgines on es repeteixen (3.2.6, nou a la 2.2).
• 3.3 Assistència a l'entrada de dades: errors identificats i descrits en text, etiquetes i instruccions, suggeriments per corregir, prevenció d'errors en operacions legals o financeres, entrada redundant i autenticació accessible (3.3.7 i 3.3.8, nous a la 2.2).

<!-- Incorrecte: el lector de pantalla llegirà el francès amb fonètica catalana -->
<html lang="ca">
  <p>Com diuen a París: <em>c'est la vie</em>.</p>

<!-- Correcte: 3.1.2 Idioma de les parts -->
<html lang="ca">
  <p>Com diuen a París: <em lang="fr">c'est la vie</em>.</p>

Principi 4: Robust

El contingut ha de ser prou robust perquè l'interpretin de manera fiable una àmplia varietat d'agents d'usuari, incloses les tecnologies de suport. És el principi «tècnic»: si el codi és incorrecte o ambigu, el navegador i el lector de pantalla no sabran què és cada cosa, encara que visualment sembli perfecte. La seva única pauta, 4.1 Compatible, conté:

• 4.1.2 Nom, funció, valor: tot component d'interfície exposa a les tecnologies de suport el seu nom, la seva funció (botó, casella, pestanya) i el seu estat o valor (marcat, desplegat, 50 %). És el criteri que falla quan es construeixen controls amb <div> i <span> sense ARIA.
• 4.1.3 Missatges d'estat: els missatges que apareixen sense moure el focus («3 resultats trobats», «Afegit al carretó») s'anuncien a les tecnologies de suport mitjançant rols o propietats adequats.

El 4.1.1 Processament, que exigia HTML ben format, es va retirar a WCAG 2.2 perquè els navegadors actuals reparen el codi i els problemes reals que causava ja es capturen a l'1.3.1 i al 4.1.2.

Un mateix component, quatre mirades

Aplicar els quatre principis a un sol element ajuda a interioritzar-los. Prenguem el botó «Afegeix al carretó» d'una botiga:

Resum

• Perceptible: la informació arriba per algun sentit (alternatives textuals, subtítols, estructura, contrast).
• Operable: es pot manejar (teclat, temps, sense centelleigs, navegable, modalitats d'entrada).
• Comprensible: s'entén (idioma, predictibilitat, ajuda als formularis).
• Robust: la tecnologia l'interpreta (nom, funció, valor; missatges d'estat).
• Els principis són acumulatius; cada barrera remet a un d'ells.