HTML vàlid i robust: identificadors, imbricació i la fi del 4.1.1

Tot el que hem vist al curs parteix d'un supòsit: que el navegador construeix l'arbre d'accessibilitat a partir d'un HTML que diu el que pretenem. Quan el marcatge té errors, el navegador no s'atura: els corregeix a la seva manera, i el resultat pot ser un arbre diferent del que imaginàvem. Aquesta lliçó explica què va passar amb el criteri 4.1.1 Processament, per què la validesa continua important tot i que aquest criteri ja no existeix a les WCAG 2.2 i quins són els errors de marcatge que de debò trenquen l'accessibilitat: identificadors duplicats, imbricacions impossibles i atributs mal escrits.

Què va passar amb el 4.1.1 Processament

A les WCAG 2.0 i 2.1, el criteri 4.1.1 (nivell A) demanava que el marcatge no tingués errors de processament: elements amb etiquetes d'obertura i tancament completes, imbricats segons la seva especificació, sense atributs duplicats i amb identificadors únics. Tenia sentit quan cada navegador i cada tecnologia de suport interpretaven l'HTML mal format de manera diferent. Avui l'estàndard HTML defineix amb precisió com s'ha de recuperar el navegador de cada error, i les tecnologies de suport ja no llegeixen el codi font, sinó l'arbre d'accessibilitat que construeix el navegador.

Per això les WCAG 2.2 marquen el 4.1.1 com a obsolet i retirat, i el W3C va afegir a les WCAG 2.0 i 2.1 una nota que indica que, per a contingut en HTML o XML, s'ha de considerar sempre complert. Hi ha un matís important per a qui treballa a Espanya: l'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova), a la qual remet el RD 1112/2018 (PDF, s'obre en una finestra nova), es basa en les WCAG 2.1 i continua incloent el requisit corresponent (9.4.1.1). Com tractar-lo en una auditoria depèn de la metodologia que s'apliqui; ho veuràs al nivell 4. El que no canvia és això: els problemes reals que abans es recollien al 4.1.1 es continuen avaluant, ara sota l'1.3.1 Informació i relacions i el 4.1.2 Nom, funció, valor.

Identificadors duplicats

És l'error de marcatge amb més conseqüències, perquè moltes relacions d'accessibilitat es construeixen amb id: <label for>, aria-labelledby, aria-describedby, aria-controls, headers a les taules i els enllaços interns com el de salt al contingut. Quan dos elements comparteixen id, el navegador fa servir el primer que troba i la relació del segon es trenca en silenci.

<!-- El formulari de subscripció apareix a la capçalera i al peu -->
<label for="email">Correu electrònic</label>
<input id="email" type="email">
…
<label for="email">Correu electrònic</label>
<input id="email" type="email">

Les dues etiquetes apunten al primer camp. El segon queda sense nom accessible: el lector anuncia «edició» i prou i, a més, quan prems la segona etiqueta el focus salta al primer camp. S'incompleixen l'1.3.1 i el 4.1.2.

Les causes típiques són sempre les mateixes: components que es repeteixen a la pàgina (targetes, acordions, formularis de cerca a la capçalera i al peu), menús que es pinten dues vegades (versió d'escriptori i versió mòbil ocultant-ne una amb CSS) i identificadors escrits a mà en plantilles que després es reutilitzen. La solució és generar els identificadors a partir d'una cosa única (el número de registre, un comptador, les utilitats d'identificadors únics de cada framework) i no duplicar components complets per a cada mida de pantalla.

Imbricacions que el navegador no pot respectar

L'HTML defineix què pot anar dins de què. Quan el codi ho incompleix, l'analitzador del navegador reorganitza l'arbre i el resultat ja no coincideix amb el codi font:

• Blocs dins d'un paràgraf. <p><div>…</div></p> no existeix: el navegador tanca el paràgraf abans del <div> i deixa un paràgraf buit al darrere.
• Contingut solt dins d'una taula. El text o els elements col·locats entre <tr> i <td> es treuen fora de la taula, per davant.
• Enllaços dins d'enllaços. Un <a> dins d'un altre <a> tanca el primer: el resultat són dos enllaços seguits, amb noms que no esperaves.
• Fills incorrectes en llistes. Un <div> entre <ul> i <li> es manté al DOM, però trenca la semàntica de llista en diverses combinacions de navegador i lector, com vam veure a la lliçó de llistes. En canvi, a <dl> sí que es permet un <div> que agrupi cada parella de <dt> i <dd>.

Hi ha un cas que l'analitzador no corregeix i que és encara pitjor: els elements interactius dins d'altres elements interactius. Un <button> dins d'un <a>, un enllaç dins d'un botó o una casella de selecció dins d'un enllaç no són HTML vàlid i cada navegador i cada lector els exposen de manera diferent: el control interior pot perdre el rol, quedar inaccessible amb el teclat o fondre el seu nom amb el de l'exterior.

<a href="/producto/123" class="tarjeta">
  <h3>Cadira ergonòmica</h3>
  <button>Afegeix a preferits</button>
</a>

Atributs mal escrits o amb valors no vàlids

El navegador ignora els atributs que no reconeix i els valors que no entén, sense avisar. Alguns exemples reals que passen desapercebuts en una revisió visual:

Cap d'aquests errors no es veu a la pantalla. Tots canvien el que rep la persona usuària de tecnologies de suport, i per això cal buscar-los amb eines.

Com detectar-ho

El validador del W3C

El Nu Html Checker del W3C analitza una adreça, un fitxer o un fragment enganxat. Per a llocs web que construeixen la pàgina amb JavaScript, valida el DOM ja generat: a les eines de desenvolupament, copia l'element <html> (opció de copiar l'HTML extern) i enganxa'l a l'entrada de text del validador. No persegueixis el zero absolut: centra't en identificadors duplicats, imbricacions d'elements interactius, fills no permesos en llistes i taules, i atributs ARIA desconeguts o amb valors no vàlids.

Comprovacions ràpides al navegador

Per localitzar identificadors duplicats a la pàgina que tens oberta, enganxa això a la consola de les eines de desenvolupament:

const ids = [...document.querySelectorAll('[id]')].map(e => e.id);
console.log(ids.filter((id, i) => ids.indexOf(id) !== i));

Les eines automàtiques com axe o WAVE també detecten part d'aquests errors (identificadors duplicats utilitzats per ARIA o per etiquetes, atributs ARIA no vàlids, marcs sense títol). I el tauler d'accessibilitat del navegador, que vas conèixer a la lliçó sobre l'arbre d'accessibilitat, és la prova definitiva: si l'arbre mostra el rol, el nom i la relació que esperaves, el marcatge compleix la seva funció encara que el validador protesti per alguna cosa menor.

Resum

• Les WCAG 2.2 retiren el 4.1.1 Processament; l'EN 301 549 v3.2.1 encara el recull (9.4.1.1) i el seu tractament depèn de la metodologia aplicada.
• Els errors de marcatge que canvien l'arbre d'accessibilitat s'avaluen sota l'1.3.1 i el 4.1.2.
• Els identificadors duplicats trenquen en silenci label for, aria-labelledby, aria-describedby i headers.
• No imbriquis mai elements interactius dins d'altres, i respecta quins fills admeten les llistes i les taules.
• Valida el DOM generat, busca duplicats des de la consola i confirma-ho sempre a l'arbre d'accessibilitat.