Llista de comprovació del creador de continguts

Aquest nivell ha recorregut la redacció, les imatges, el color, el disseny d'interfícies, el multimèdia i els canals quotidians. Aquesta lliçó ho condensa en una eina de treball: una llista de comprovació que qualsevol persona que crea continguts (redactora, community manager, tècnic de comunicació, docent, administratiu que publica a la intranet) pot repassar abans de publicar. No substitueix una auditoria, però evita molts dels problemes que troben les auditories, perquè una part important neix en el contingut.

Com fer servir la llista de comprovació

• Tingues-la a mà al gestor de continguts; en poques setmanes la majoria de punts seran automàtics.
• Cada punt indica entre parèntesis el criteri WCAG principal, per justificar la petició davant de disseny o desenvolupament.
• El que no puguis resoldre tu (l'atribut lang de la plantilla, el contrast dels enllaços del tema) envia-ho a l'equip tècnic amb el criteri que incompleix.
• Adapta-la als errors que es repeteixin en els teus continguts.

Text

1. El títol de la pàgina descriu el seu contingut i és únic al lloc (2.4.2).
2. Frases curtes, una idea per frase, vocabulari comú, veu activa; el més important primer (3.1.5 com a referència).
3. Encapçalaments reals (Títol 2, Títol 3) en ordre, sense salts de nivell, i cadascun descrivint la seva secció (1.3.1, 2.4.6).
4. Llistes fetes amb l'eina de llistes, numerades si l'ordre importa (1.3.1).
5. Taules només per a dades, amb fila de capçalera (1.3.1).
6. Sigles desenvolupades la primera vegada; abreviatures innecessàries eliminades (3.1.4).
7. Fragments en un altre idioma marcats amb el seu idioma, si l'editor ho permet (3.1.2).
8. Text alineat a l'esquerra, sense majúscules sostingudes ni cursives llargues (1.4.8).

Enllaços

1. El text de cada enllaç diu on porta; res de «aquí», «llegeix-ne més» ni URL crues (2.4.4).
2. Els enllaços a documents indiquen el format i la mida; s'avisa si s'obre en una finestra nova (2.4.4, 3.2.5).
3. Els enllaços amb el mateix text porten a la mateixa destinació (2.4.4, 2.4.9).
4. Els enllaços es distingeixen del text per alguna cosa més que el color (1.4.1).

Imatges

1. Cada imatge té alt segons la seva funció: buit si és decorativa, breu si és informativa, l'acció si és funcional (1.1.1).
2. Res de «imatge de», noms de fitxer ni paraules clau a l'alt (1.1.1).
3. Imatges complexes (gràfics, infografies, mapes) amb descripció llarga en text a la pàgina (1.1.1).
4. Sense text en imatges excepte logotips; si no hi ha més remei, l'alt conté el mateix text (1.4.5).
5. Icones decoratives ocultes; icones funcionals amb nom (1.1.1, 4.1.2).
6. GIF i animacions sense flaixos i que es poden posar en pausa (2.3.1, 2.2.2).

Color i llegibilitat

1. Text amb contrast d'almenys 4,5:1 (3:1 si és gran), també sobre imatges i en els textos d'exemple dels camps (placeholders) (1.4.3).
2. Icones, vores i gràfics informatius amb 3:1 (1.4.11).
3. Cap informació no es transmet només amb el color: errors, estats, sèries de gràfics, camps obligatoris (1.4.1).
4. Mida de lletra de 16 px al cos, interlineat 1,5, línies de 45-80 caràcters (1.4.8, 1.4.12).
5. La pàgina funciona amb zoom al 200 % i a 320 px d'amplada sense desplaçament horitzontal (1.4.4, 1.4.10).

Formularis i interacció

1. Cada camp té una etiqueta visible; les instruccions van abans del camp (3.3.2).
2. Els errors s'indiquen en text, al costat del camp, amb com corregir-los (3.3.1, 3.3.3).
3. No es demanen dues vegades les mateixes dades en un procés (3.3.7).
4. Es pot veure on és el focus en navegar amb teclat i no queda tapat (2.4.7, 2.4.11).
5. Botons i enllaços d'almenys 24 per 24 px; gestos i arrossegaments amb alternativa (2.5.8, 2.5.1, 2.5.7).
6. Res no canvia de pàgina ni obre finestres només per seleccionar una opció (3.2.2).

Multimèdia

1. Vídeos amb subtítols revisats, amb parlants i sons rellevants (1.2.2).
2. Audiodescripció o transcripció descriptiva si hi ha informació visual no verbalitzada (1.2.3, 1.2.5).
3. Pòdcasts i àudios amb transcripció en HTML (1.2.1).
4. Res no es reprodueix automàticament amb so; tot moviment es pot posar en pausa (1.4.2, 2.2.2).
5. Sense més de tres flaixos per segon (2.3.1).
6. El reproductor funciona amb teclat i els seus botons tenen nom (2.1.1, 4.1.2).

Xarxes, missatgeria, correu, documents i formularis

1. Xarxes: alt a cada imatge, informació essencial al text, etiquetes amb majúscula inicial a cada paraula, pocs emojis al final, vídeos amb subtítols oberts.
2. Correu: assumpte concret, text en lloc de captures, enllaços amb sentit, butlletí en una columna amb alt i text real, provat amb imatges bloquejades i en mode fosc.
3. Documents: estils de títol, llistes reals, taules amb capçalera, alt, títol i idioma a les propietats, comprovador passat, PDF exportat amb etiquetes.
4. Missatgeria: l'essencial a la primera línia de l'avís, dates completes, notes de veu sempre acompanyades de text, res de captures en lloc de text (1.1.1).
5. Presentacions i reunions: dissenys de diapositiva, títols únics, ordre de lectura revisat, alt, 24 punts o més, el que és visual verbalitzat, subtítols activats i material compartit abans i després.
6. Formularis: preguntes clares amb instruccions abans de respondre, obligatoris indicats en text, errors que expliquen com corregir, sense límits de temps innecessaris i amb una altra via d'inscripció (3.3.1, 3.3.2, 3.3.3, 2.2.1).

Eines ràpides per a qui crea continguts

• WAVE (extensió): detecta imatges sense alt, encapçalaments saltats, enllaços buits i contrast en colors sòlids. És l'eina més visual per a no tècnics.
• HeadingsMap (extensió): mostra l'esquema d'encapçalaments.
• Colour Contrast Analyser (TPGi): mesura qualsevol color de la pantalla.
• Comprovador d'accessibilitat de Word, Excel i PowerPoint.
• El teclat: recorre la pàgina amb Tab. Si no veus on ets o no arribes a alguna cosa, hi ha un problema.
• El lector de pantalla: NVDA (gratuït) o VoiceOver (Mac i iOS). Deu minuts sentint la teva pàgina ensenyen més que qualsevol manual.

Resum

• Text: títols reals en ordre, frases curtes, llistes i taules semàntiques, sigles desenvolupades.
• Enllaços i imatges: enllaços amb sentit, alt segons la funció, descripcions llargues per a imatges complexes, sense text en imatges.
• Color i llegibilitat: 4,5:1 en text, 3:1 en components, res només pel color, zoom 200 % i 320 px.
• Formularis i multimèdia: etiquetes visibles, errors en text, focus visible, subtítols revisats, res que soni o faci flaixos sol.
• Aplica la llista de comprovació en crear, fes servir WAVE, HeadingsMap, el teclat i un lector de pantalla, i comunica a l'equip tècnic el que no depengui de tu amb el seu criteri WCAG.