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

Comprensible: Informació i Operació

Següent ►
►

Ja sabem que el contingut s'ha de percebre (03-01) i que la interfície s'ha d'operar (03-02). Però una web pot ser perceptible i operable i tot i així resultar incomprensible: idioma no declarat, comportaments que canvien sense avisar, o un formulari de matrícula que rebutja les dades sense explicar per què. El tercer principi POUR, Comprensible, exigeix que la informació i el maneig de la interfície es puguin entendre. És el principi que més ajuda en Hugo (dislèxia/TDAH), a qui un text predictible i uns errors ben explicats li marquen la diferència entre acabar la matrícula o abandonar; però també beneficia la Marta, el lector de la qual necessita saber l'idioma per pronunciar bé.

Contingut

  1. Què exigeix el principi Comprensible
  2. Pauta 3.1: Llegible
  3. Pauta 3.2: Predictible
  4. Pauta 3.3: Assistència a l'entrada
  5. Taula resum de criteris
  6. Errors comuns i consells
  7. Exercicis
  8. Conclusió

Què exigeix el principi Comprensible

Comprensible vol dir que l'usuari pugui entendre la informació i entendre com funciona la interfície: sense sorpreses, amb ajuda quan la necessita i amb la possibilitat de detectar i corregir els seus errors. Tres pautes l'estructuren.

graph TD
    C[3. Comprensible] --> A[3.1 Llegible]
    C --> B[3.2 Predictible]
    C --> D[3.3 Assistència a l'entrada]

Pauta 3.1: Llegible

Fer que el contingut de text sigui llegible i comprensible, començant per dir-li a la màquina en quin idioma està.

  • 3.1.1 Idioma de la pàgina (A): declarar l'idioma principal (<html lang="ca">). Sense ell, el lector de la Marta pot llegir el català amb fonètica anglesa, i resulta inintel·ligible.
  • 3.1.2 Idioma de les parts (AA): els fragments en un altre idioma es marquen (lang). Si una lliçó de Cursalia cita un terme en anglès, aquest fragment s'etiqueta perquè es pronunciï correctament.
<!-- Il·lustratiu: idioma de pàgina i d'un fragment -->
<html lang="ca">
  ...
  <p>El principi es diu <span lang="en">Robust</span> a l'original.</p>

Els criteris més avançats de llegibilitat i traducció (i18n) es reprenen al Mòdul 7: i18n.

Pauta 3.2: Predictible

Fer que les pàgines apareguin i funcionin de manera previsible. Res no ha de canviar de context de manera inesperada.

  • 3.2.1 En rebre el focus (A): que un element rebi el focus no ha de provocar un canvi de context (obrir una finestra, enviar un formulari). Si en tabular fins al selector d'idioma del filtre la pàgina es recarrega sola, la Lucía es perd.
  • 3.2.2 En rebre entrades (A): canviar el valor d'un control (triar una opció del desplegable) no ha de, per si sol, canviar el context sense avisar. Hi ha d'haver un botó "Aplicar", o advertir del comportament.
  • 3.2.3 Navegació coherent (AA): els elements de navegació que es repeteixen apareixen en el mateix ordre a totes les pàgines. La capçalera de Cursalia no canvia de lloc entre catàleg i fitxa.
  • 3.2.4 Identificació coherent (AA): els components amb la mateixa funció s'identifiquen igual a tot el lloc. La icona de "cercar" no pot dir-se "Cerca" en una vista i "Lupa" en una altra.
  • 3.2.6 Ajuda coherent (A) — nou a WCAG 2.2: si hi ha mecanismes d'ajuda (contacte, xat, FAQ), apareixen en un ordre relatiu coherent entre pàgines. En Hugo troba sempre l'ajuda al mateix lloc.

Pauta 3.3: Assistència a l'entrada

Ajudar els usuaris a evitar i corregir errors. És la pauta central del formulari de matrícula.

  • 3.3.1 Identificació d'errors (A): si es detecta un error, s'identifica i es descriu en text (no només una vora vermella). "El correu no és vàlid" al costat del camp.
  • 3.3.2 Etiquetes o instruccions (A): els camps porten etiquetes i instruccions quan calen ("Format: DD/MM/AAAA"). Sense etiqueta, la Marta no sap què escriure.
  • 3.3.3 Suggeriment davant d'errors (AA): quan se sap com corregir, s'ofereix el suggeriment. "El correu ha d'incloure @" ajuda més que "camp no vàlid".
  • 3.3.4 Prevenció d'errors (legal, financer, dades) (AA): en accions amb conseqüències (un pagament del curs, un compromís legal), l'operació ha de ser reversible, verificada o confirmada abans d'executar-se.
  • 3.3.7 Entrada redundant (A) — nou a 2.2: no demanar dues vegades la mateixa informació en el mateix procés; reutilitzar-la o deixar triar-la. Si el registre ja va demanar el correu, el pas de pagament no el torna a exigir a mà. Alleuja la càrrega cognitiva d'en Hugo.
  • 3.3.8 Autenticació accessible (mínim) (AA) — nou a 2.2: l'inici de sessió no ha de dependre d'una prova cognitiva (recordar, transcriure, resoldre un trencaclosques) sense alternativa. Un CAPTCHA de text retorçat sense opció accessible incompleix; permetre enganxar la contrasenya o fer servir un gestor sí que ajuda.
<!-- Il·lustratiu: etiqueta + instrucció + error en text -->
<label for="email">Correu</label>
<input id="email" type="email" aria-describedby="ajuda-email err-email">
<p id="ajuda-email">Farem servir aquest correu per al teu accés.</p>
<p id="err-email">El correu ha d'incloure una @.</p>

La construcció real de formularis accessibles (etiquetes, aria-describedby, anunci d'errors) és el Mòdul 4: Formularis Accessibles.

Taula resum de criteris

Criteri Nivell Què exigeix
3.1.1 Idioma de la pàgina A Declarar l'idioma principal (lang)
3.1.2 Idioma de les parts AA Marcar fragments en un altre idioma
3.2.1 En rebre el focus A Enfocar no canvia el context
3.2.2 En rebre entrades A Canviar un valor no canvia el context sense avisar
3.2.3 Navegació coherent AA Navegació repetida en el mateix ordre
3.2.4 Identificació coherent AA Igual funció, mateixa identificació
3.2.6 Ajuda coherent A (2.2) Mecanismes d'ajuda en ordre coherent
3.3.1 Identificació d'errors A Errors descrits en text
3.3.2 Etiquetes o instruccions A Etiquetes/instruccions als camps
3.3.3 Suggeriment davant d'errors AA Oferir com corregir l'error
3.3.4 Prevenció d'errors AA Reversible/verificat/confirmat en accions crítiques
3.3.7 Entrada redundant A (2.2) No tornar a demanar dades ja proporcionades
3.3.8 Autenticació accessible (mínim) AA (2.2) Login sense prova cognitiva obligatòria

Errors Comuns i Consells

  • Oblidar lang a l'<html>. És una errada de nivell A molt freqüent i molt fàcil de corregir; afecta tota la síntesi de veu.
  • Assenyalar errors només amb color vermell. Incompleix 3.3.1 (i 1.4.1 del principi Perceptible): l'error ha d'estar també en text.
  • Autoenviar el formulari en triar una opció. Trenca 3.2.2; fes servir un botó explícit o adverteix del canvi.
  • CAPTCHAs cognitius sense alternativa. Amb WCAG 2.2 i 3.3.8, exigir transcriure text deformat sense una altra via és un incompliment.
  • Demanar la mateixa dada a cada pas del checkout. 3.3.7 demana reutilitzar-la; a més redueix l'abandonament.
  • Consell: per a en Hugo, la coherència és tan important com la claredat. Mantén etiquetes, icones i ubicació de l'ajuda idèntiques a totes les vistes de la SPA.

Exercicis

Exercici 1. El formulari de matrícula marca els camps amb error només pintant-ne la vora de vermell, sense cap text. Indica quins criteris s'incompleixen i què exigeix cadascun.

Exercici 2. Al catàleg, en triar una categoria al desplegable del filtre la pàgina es recarrega i salta a una altra vista sense que l'usuari premi res. Quin criteri s'incompleix i quin és el requisit?

Exercici 3. L'accés a Cursalia obliga a resoldre un CAPTCHA que demana transcriure lletres deformades, sense alternativa. Quin criteri de WCAG 2.2 s'hi aplica i què exigeix com a mínim?

Solucions

Solució 1. S'incompleix 3.3.1 Identificació d'errors (A) —l'error s'ha de descriure en text, no només amb color— i, per dependre del color, també 1.4.1 Ús del color (A) del principi Perceptible. Requisit: afegir un missatge textual al costat del camp (idealment amb suggeriment de correcció, 3.3.3). La implementació es veu al Mòdul 4.

Solució 2. S'incompleix 3.2.2 En rebre entrades (A): canviar el valor d'un control no ha de provocar un canvi de context inesperat. Requisit: aplicar el filtre amb un botó "Aplicar", o advertir clarament que seleccionar recarregarà la vista.

Solució 3. S'hi aplica 3.3.8 Autenticació accessible (mínim) (AA), nou a WCAG 2.2. Exigeix que existeixi un mètode d'autenticació que no requereixi una prova cognitiva; com a mínim, oferir una alternativa accessible al CAPTCHA (p. ex. permetre gestors de contrasenyes, no bloquejar l'enganxat, o una via diferent).

Conclusió

El principi Comprensible tanca la part "humana" de POUR: idioma declarat, comportament predictible i coherent, i un maneig d'errors que preveu, identifica i suggereix correccions. Amb Perceptible, Operable i Comprensible cobrim allò que la persona necessita directament. Falta la base tècnica que sosté tota la resta: que el codi sigui robust, que les tecnologies d'assistència l'interpretin de manera fiable avui i demà. Aquest és el quart principi, i a la lliçó 03-04 Robust veurem què exigeix l'arbre d'accessibilitat perquè un component personalitzat existeixi de debò per a la Marta i el seu NVDA.

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