Transcripció
[00:00] Presentador: Benvinguts a l’entrevista...
[00:12] Responsable: Gràcies per convidar-me...
[01:05] Sons de fons: pausa curta riures lleus.
Pàgina d'accessibilitat
Projecte AuditorIA
Accessibilitat web
Exemple de pàgina completament accessible segons els criteris WCAG 2.2.
Missatge principal
Developing
trust |
trust |
Control del moviment
Pots pausar l'animació del cursor i la imatge GIF informativa si et molesten els moviments continus.
1.1.1 — Contingut no textual
Criteri 1 — Imatge decorativa
Criteri 2 — Il·lustració decorativa
Criteri 3 — Animació decorativa
La malla de fons és decorativa i està marcada amb aria-hidden="true".
Criteri 4 — Icona decorativa
Criteri 5 — Foto rellevant
Obama en Cuba
Barack Obama visitarà Cuba tan aviat com al març, en el primer viatge d’un president dels Estats Units a l’illa caribenya en 80 anys, van informar diversos mitjans aquest dimecres.
Criteri 6 — Infografia
Descripció completa de la infografia
- Textos alternatius: cada imatge té un alt que explica el que mostra o la seva funció.
- Contrast: relació mínima 4.5:1 en text normal i 3:1 en text gran.
- Teclat: es pot recórrer tota la pàgina amb Tab/Shift+Tab i activar amb Enter/Espai.
- Formularis: cada camp té
<label>visible i missatges d’error descriptius.
Veure justificació i notes
La infografia organitza la informació en quatre columnes amb icones i color de fons morat suau; aquí reproduïm el text de cada columna.
Criteri 7 — Gràfic
El gràfic compara el grau de compliment dels quatre principis WCAG en aquesta pàgina d’exemple mitjançant barres verticals.
| Principi | Compliment |
|---|---|
| Perceptible | 90 % |
| Operable | 80 % |
| Comprensible | 70 % |
| Robusta | 60 % |
Criteri 8 — CAPTCHA de selecció d’imatges
El plugin Really Simple CAPTCHA genera una imatge amb caràcters aleatoris i una resposta associada. Aquest exemple mostra com integrar-lo amb un formulari accessible i missatges de validació clars.
Criteri 9 — CAPTCHA d’imatge amb alternativa accessible
Criteri 10 — Botó amb imatge
Criteri 11 — Botó amb icona
Criteri 12 — Imatge animada no decorativa
Animació en pausa per sol·licitud de l'usuari.
La imatge animada complementa el següent procés de keyword research per a una web:
- Conoce tu público objetivo.
- Genera una lista de palabras clave semilla inicial.
- Analiza la competencia.
- Haz una investigación de palabras clave.
- Agrupa las keywords.
Aquesta és una imatge no decorativa: el text llista els mateixos passos perquè la informació sigui accessible encara que no es vegi l’animació.
Criteri 13 — Video
Veure la transcripció completa
[00:00] Narrador: “Benvinguts a la demo…”
[00:08] Es fa clic a “Cerca” i s’introdueix “Auriculars”.
[00:25] …
Vídeo (només imatge, pregravat)
Aquest exemple mostra un vídeo pregravat sense narració ni diàlegs (només imatges). Per complir el criteri 1.2.1, oferim una descripció narrativa equivalent i una transcripció descarregable.
Descripció del contingut visual del vídeo
El vídeo no té àudio ni diàlegs. Només mostra imatges del curt d’animació “Big Buck Bunny”, on tota la informació narrativa es transmet visualment. A continuació es descriu la seqüència completa:
- Inici – Es veu un bosc lluminós. El vent mou les fulles suaument i la càmera avança entre els arbres.
- Aparició del protagonista – Un conill gegant i corpulent (Big Buck Bunny) surt d’entre la vegetació. És blanc, amable i camina tranquil·lament, observant l’entorn amb curiositat.
- Interacció amb la natura – El conill es para a mirar una papallona que vola. Somriu, l’admira i continua passejant amb calma.
- Aparició dels antagonistes – Tres criatures petites i entremaliades apareixen: un esquirol, un ratpenat i una comadreja. S’amaguen entre les branques i observan el conill amb intencions murri.
- Primera broma – L’esquirol deixa caure fruites o objectes damunt del conill. El protagonista s’atura, es treu la brutícia de sobre i continua sense enfadar-se.
- Segona broma – Els tres animals es llancen sobre una papallona que el conill admirava. La capturen i la fan malbé mentre riuen. El conill mira trist i decebut.
- Reacció del protagonista – Big Buck Bunny es transforma: manté l’expressió seriosa i decideix posar fi a les entremaliadures. Es veu com pren una resolució interna.
- Seqüència de persecució – El conill organitza una sèrie d’emboscades i trampes simpàtiques per atrapar els tres bromistes. La càmera segueix les escenes de manera dinàmica i humorística.
- Clímax – Després de diverses persecucions i moments còmics, el conill aconsegueix neutralitzar els tres animals i deixar-los immobilitzats en trampes inofensives.
- Final – El protagonista recupera la calma, continua caminant pel bosc i la càmera s’allunya, mostrant el paisatge natural. El to torna a ser tranquil i lluminós.
També pots descarregar la transcripció completa en format TXT .
Criteri 1.2.2.1 — Subtítols
Criteri 14 — Àudio (només so, pregravat)
En aquest exemple hi ha un àudio sense veu (només so ambiental). Per complir el criteri, proporcionem una transcripció equivalent en text.
Transcripció del contingut de l’àudio
L’àudio reprodueix un so continu de pluja suau caient. No hi ha veus, diàlegs ni música. Es percep un fons constant de gotes d’aigua impactant sobre superfícies dures i toves, com si fos un carrer o un jardí durant un ruixat moderat. No hi ha altres efectes sonors destacables.
També pots descarregar la transcripció en format TXT per veure com es presenta com a document separat.
Descarrega la transcripció (PDF) , el contingut és equivalent a l’àudio.
Veure transcripció completa en text
Criteri 15 — Formulari
Els camps marcats amb són obligatoris.
Criteri 16 — Emoji
Estat de la comanda: ✅
Criteri 2.4.1.1 — Enllaç Saltar al contingut
Demo funcional amb un menú ampli (amb submenús), filtres abans dels resultats de la cerca i dos enllaços de «Saltar al contingut» que porten a punts clau de la pàgina amb focus accessible.
- El menú desplegable s’obre i es tanca amb botons accessibles (
aria-expanded). - Els filtres (text, categoria, preu, valoració i disponibilitat) actualitzen la llista de resultats.
- Es mostren missatges diferents segons si l’enllaç «Saltar al contingut» funciona o no.
- Landmarks ARIA (
header,nav,main,aside) agrupen cada bloc.
Botiga accessible
Resultats de productes
Fes servir els filtres per veure com es reordena la llista.
Criteri 2.4.1.2 — Landmarks ARIA — Estructura semàntica
Criteri 2.5.3.1 — Botó
Botó — enllaç al PDF assignat per al criteri 2.5.3.1Criteri 2.5.3.2 — Etiqueta en el nom
L’etiqueta visible ha d’aparèixer també al nom accessible. Els següents exemples mostren com mantenir el text al principi del nom, fins i tot quan fem servir icones o abreviatures com “+”, “‹” i “›”.
Botó amb text clar
El text visible coincideix amb el nom accessible i explica l’acció.
Botó amb icona i text
El text continua sent el primer element del nom accessible.
Botó només amb icona
Quan no hi ha text visible, l’atribut aria-label aporta el nom.
Enllaç amb context
El nom accessible comença amb el text visible i afegeix detall al final.
Llegir més informacióBotó “+” per expandir
El text visible inicia el nom accessible i l’icona reforça la intenció.
Control de pàgina
Les paraules “Anterior” i “Següent” encapçalen el nom accessible.
Criteri 3.1.2.2 — Cita en altre idioma
Exemple de cita en alemany marcada amb l’atribut lang="de" perquè
el lector de pantalla canviï temporalment d’idioma:
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, dass kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
könnte er ja Stadtmusikant werden.
La resta de la pàgina continua en català, però aquesta cita es llegirà amb
diccionari d’alemany gràcies a lang="de".
En una mateixa frase combinem català amb thank you for your help
i merci pour votre aide (sense lang) per evidenciar com el lector només
detecta clarament el canvi d’idioma quan l’atribut hi és present.