ACCESIBILIDAD ≠ OVERLAY · ENTREGA 25

Accessibilitat ≠ Overlay: quan un menú desplegable es converteix en una barrera

📅 Octubre 2026   ·   ⏱ 7 min de lectura

Un menú pot semblar perfecte i, tanmateix, resultar impossible d’utilitzar per a algunes persones.

01. El problema no sempre es veu

Un desplegable pot funcionar amb el ratolí i fallar amb el teclat, un lector de pantalla o una pantalla tàctil. L’aparença no garanteix una interacció accessible.

02. Menús que depenen del ratolí

Si el submenú només s’obre en passar-hi el cursor, les persones que naveguen amb Tab poden quedar-ne excloses. La interacció no ha de dependre del hover.

03. Focus visible i ordre lògic

Cada enllaç i control ha de rebre el focus en un ordre comprensible, amb un indicador visible. Eliminar el contorn sense alternativa dificulta l’orientació.

04. Comunicar l’estat

Un botó que desplega opcions ha d’indicar la seva finalitat i si és obert o tancat. Un botó natiu amb aria-expanded actualitzat facilita aquesta informació.

05. Submenús accessibles amb teclat

Cal poder obrir, tancar i recórrer les opcions sense que el focus quedi atrapat. La navegació web habitual no sempre requereix el patró ARIA de menús d’aplicació.

06. Per què un overlay no ho soluciona

Canviar colors o mides no repara automàticament esdeveniments exclusius del ratolí, semàntica absent o una gestió del focus incorrecta. Cal corregir el component.

07. Com provar-ho

Deixa el ratolí, utilitza Tab i Shift+Tab, obre cada submenú i comprova el focus. Repeteix la prova amb un lector de pantalla i en mòbil.

08. Conclusió

Un menú accessible funciona amb diferents formes d’interacció i comunica el seu estat. L’accessibilitat comença al disseny i al codi.

♿ Accessibility ≠ Overlay · 25

Adapta tu Web — El diseño inclusivo es mejor diseño.