ACCESSIBILITAT ≠ OVERLAY · 38
Focus de teclat visible quan una capçalera fixa tapa el pas següent
📅 11 de novembre del 2026 · ⏱ 6 min de lectura
En prémer Tab, el navegador pot moure el focus a un control situat darrere d’una capçalera fixa. La pàgina continua responent, però la persona perd la referència visual que necessita per continuar.
01. La prova d’una reserva
Obre una pàgina de reserves i tria una data amb el teclat. Quan avances amb Tab, esperes trobar l’enllaç que explica els canvis o el botó per continuar. El document es desplaça uns píxels i el contorn desapareix. El focus ha arribat al control correcte, però la capçalera que es manté a dalt el tapa. Si prems Retorn, pots canviar de pas sense haver pogut comprovar què activaries.
És fàcil passar per alt aquesta situació quan es revisa el disseny amb ratolí. El punter marca la posició escollida i permet ajustar el desplaçament abans d’actuar. Amb teclat, el navegador mou el focus segons l’ordre del document i decideix quan desplaça la vista. La prova ha de conservar aquesta seqüència. Desplaçar la pàgina manualment abans de mirar pot amagar el mateix error que volem reproduir.
02. Distingeix el focus, l’indicador i l’ordre
El focus identifica l’element que rep l’entrada del teclat. L’indicador és el senyal visual que permet localitzar-lo. L’ordre determina quin control ve després. Una capçalera superposada pot tapar un botó amb un indicador ben definit. A la inversa, un botó pot estar a la vista i no mostrar cap senyal quan rep el focus. També es pot veure amb claredat un control al qual s’arriba en un moment incoherent de la tasca.
Per aïllar el problema, anota quin control esperaves i quin rep el focus. Si fas servir les eines del navegador, consulta l’element actiu sense canviar el focus de la pàgina o repeteix la seqüència amb l’inspector preparat. Compara el rectangle del control amb el de la capa superposada. Una captura mostra el símptoma. Els passos de teclat i l’estat del component permeten reproduir-lo.
03. Què exigeixen les WCAG 2.2
El criteri 2.4.7, de nivell AA, tracta la visibilitat de l’indicador del focus. El 2.4.11, també AA, comprova que un component amb focus no quedi completament ocult per contingut creat pel lloc. Convé avaluar-los per separat. Veure un fragment del botó pot evitar l’ocultació total i continuar sent insuficient per entendre l’acció còmodament.
El criteri 2.4.12, de nivell AAA, aborda l’ocultació parcial. Com a objectiu de disseny, procura que el control i el senyal es vegin sencers. El criteri 2.4.3, de nivell A, tracta que l’ordre seqüencial conservi el significat i l’operabilitat quan la seqüència hi influeix. Una capçalera fixa pot provocar l’incompliment d’un requisit tot i satisfer els altres. Descriu el comportament observat a l’informe i cita el criteri que hi correspon.
04. Localitza la capa que ocupa l’espai de lectura
Una capçalera fixa pot canviar d’alçada quan es desplaça la pàgina, s’obre el menú o es modifica l’amplada. Un avís inferior, una barra d’accions o un panell d’ajuda poden ocupar part de la mateixa finestra. Cada component pot funcionar bé aïlladament i deixar poc espai quan es combina amb els altres. L’alçada rellevant és la de l’estat en què es produeix l’error.
Comprova també quin contenidor es desplaça. En una pàgina senzilla acostuma a ser el document. En una aplicació pot ser un panell intern amb desplaçament i barra propis. Un ajust al document no sempre arriba a aquell panell. Desactiva temporalment la posició fixa a l’inspector i repeteix la seqüència. Si el control torna a aparèixer, tens una hipòtesi concreta per comprovar a la plantilla.
05. Reserva espai al contenidor desplaçable
Una opció és definir scroll-padding-block-start al contenidor desplaçable per tenir en compte l’alçada de la capçalera. Si hi ha una barra fixa inferior, valora scroll-padding-block-end. La tècnica C43 del W3C mostra com combinar el marge de desplaçament amb espai real perquè l’últim element pugui sortir de darrere d’una barra. Revisa l’inici i el final del recorregut, perquè el desplaçament té límits.
Una alçada fixa copiada de l’escriptori pot quedar curta quan el menú ocupa dues línies. Fes servir valors que reflecteixin els estats de la plantilla i prova els canvis de mida. Si la capa ocupa massa espai en pantalles baixes, deixar que es desplaci amb el contingut pot ser la millor decisió. Comprova el desplaçament automàtic del focus i els enllaços interns, que també poden situar contingut molt a prop de la capçalera.
06. Fes visible el senyal de focus en cada estat
Conserva l’indicador del navegador o dissenya’n un que es distingeixi a les superfícies reals del lloc. Un contorn útil sobre una targeta blanca es pot perdre en un menú blau. Prova botons principals, enllaços de text, icones i camps. Revisa els estats normal i visitat i comprova el contrast al context on apareix cada control.
El selector CSS :focus-visible permet aplicar estils quan el navegador determina que convé mostrar el senyal. Evita eliminar el contorn globalment sense una alternativa comprovada. Revisa els contenidors que el retallen amb overflow i les regles que l’amaguen quan se superposen mòduls. Si el control només és recognoscible quan hi passes el punter, torna al teclat i comprova quin estat està estilitzant el tema.
07. Repeteix en ambdós sentits i amb ampliació
Parteix d’un estat reproduïble i anota el navegador, la mida de la finestra i l’ampliació. Avança amb Tab i torna amb Maj+Tab. Observa cada control en el moment en què rep el focus. Prova els límits superior i inferior i el darrer element d’un panell. Algunes capes només tapen el contingut en tornar enrere, quan el navegador desplaça la pàgina en sentit contrari.
Repeteix amb la capçalera expandida, el menú tancat i els avisos habituals d’una primera visita. En una pantalla estreta o ampliada, el text pot ocupar diverses línies i reduir l’alçada disponible. Una gravació curta de la seqüència exacta ajuda a distingir un salt de desplaçament d’un canvi de focus. La persona ha de poder identificar el control actual abans de decidir si l’activa.
08. Corregeix la plantilla de Divi i verifica el recorregut
A WordPress, comprova si la capçalera prové del tema, d’una plantilla del Theme Builder o d’un mòdul que es manté fix. Identifica on es defineix l’alçada i quina regla governa el desplaçament. Corregeix el component que causa la superposició i revisa les pàgines que el reutilitzen. Inclou almenys una pàgina llarga, un formulari i un recorregut amb navegació interna.
Un overlay pot oferir ajustos de presentació, però la geometria de la capçalera, l’ordre de navegació i l’espai reservat pertanyen a la implementació. Una eina automàtica pot trobar problemes concrets. La prova que tanca el cas és completar de nou la reserva amb teclat, veure cada pas en el moment adequat i confirmar que es pot avançar o tornar sense perdre la referència. Desa el resultat amb els passos originals per poder repetir-los després d’un canvi de plantilla.