ARIA 1.3, HTML nou i CSS modern per a l'accessibilitat

La plataforma web ha incorporat en els darrers anys capacitats natives que resolen problemes d'accessibilitat que abans exigien biblioteques i molt ARIA: diàlegs modals, popovers, inertització de contingut, estils de focus intel·ligents i consultes de preferències de l'usuari. Alhora, WAI-ARIA (s'obre en una finestra nova) evoluciona amb la versió 1.3. Aquesta lliçó repassa el que ja es pot utilitzar amb seguretat, el que exigeix cautela per compatibilitat i les implicacions d'accessibilitat de cada novetat, amb exemples de codi.

WAI-ARIA 1.3: què hi afegeix

WAI-ARIA 1.2 és la recomanació vigent (juny del 2023) i WAI-ARIA 1.3 és un esborrany de treball del W3C. Les incorporacions més rellevants de l'esborrany, amb un suport creixent en navegadors i tecnologies de suport, són:

• aria-description: permet donar una descripció accessible amb text directe, sense necessitat d'un element referenciat per aria-describedby. Útil per a components generats dinàmicament. Cal preferir sempre text visible referenciat quan n'hi hagi.
• aria-braillelabel i aria-brailleroledescription: permeten oferir una etiqueta o una descripció de rol específiques per a línies braille (més curtes o amb abreviatures braille). Només s'han d'utilitzar quan la sortida braille millora respecte a l'etiqueta normal; mal utilitzades, empitjoren l'experiència.
• Rols d'anotació (comment, suggestion, mark) per a comentaris i canvis proposats en editors de documents col·laboratius, un cas d'ús freqüent sense semàntica fins ara.
• Aclariments i noves restriccions sobre combinacions de rols i propietats, a més de millores en el càlcul del nom accessible.

Cauteles: comprova el suport real en la combinació de navegador i lector de pantalla dels teus usuaris abans de dependre d'una propietat nova, i recorda la primera regla d'ARIA: si l'HTML natiu ho resol, no utilitzis ARIA.

HTML: el que és natiu i ja pots utilitzar

<dialog>

L'element <dialog> amb showModal() resol de manera nativa el que abans calia gestionar a mà: modalitat (la resta de la pàgina queda inert), focus inicial dins del diàleg, tancament amb Esc i retorn del focus a l'element que l'ha obert. Té suport en tots els navegadors actuals.

<button type="button" id="abrir">Eliminar el compte</button>

<dialog id="confirmar" aria-labelledby="titulo-confirmar">
  <h2 id="titulo-confirmar">Vols eliminar el compte?</h2>
  <p>Aquesta acció no es pot desfer.</p>
  <form method="dialog">
    <button value="cancelar" autofocus>Cancel·la</button>
    <button value="eliminar">Elimina</button>
  </form>
</dialog>

<script>
  const d = document.getElementById('confirmar');
  document.getElementById('abrir').addEventListener('click', () => d.showModal());
</script>

Bones pràctiques: utilitza showModal() (no show() ni l'atribut open directament, que no fan el diàleg modal); dona-li nom accessible amb aria-labelledby; col·loca el focus inicial en el control menys destructiu amb autofocus; verifica que el fons (::backdrop) compleix el contrast i que el diàleg respon al zoom i al reajustament.

Atribut popover

L'atribut popover crea contingut superposat no modal (menús, suggeriments, avisos, selectors) amb gestió de capa superior, tancament amb Esc o en prémer fora (popover="auto") i connexió declarativa amb el seu botó mitjançant popovertarget. Té suport als navegadors principals des del 2024.

<button type="button" popovertarget="ayuda-dni">
  Ajuda sobre el format del DNI
</button>
<div id="ayuda-dni" popover role="note">
  Escriu vuit xifres i la lletra, sense espais ni guions.
</div>

Cauteles: popover no aporta semàntica per si mateix; afegeix-hi el rol adequat (menu, listbox, dialog no modal, note…), comprova que el botó exposa el seu estat expandit (els navegadors actuals el deriven de popovertarget; si hi afegeixes aria-expanded a mà, mantén-lo sincronitzat) i assegura't que el contingut és accessible amb el teclat i llegible amb lector de pantalla. Un popover de tipus indicació emergent (tooltip) ha de continuar complint l'1.4.13 Contingut en passar el cursor o en rebre el focus (descartable, apuntable, persistent).

Atribut inert

inert fa que un subarbre sigui no interactiu i invisible per a les tecnologies de suport: no rep el focus, no es pot prémer i s'exclou de l'arbre d'accessibilitat. És la manera correcta d'«apagar» la resta de la pàgina quan hi ha un diàleg personalitzat obert (si no utilitzes <dialog>) o un tauler lateral. Compte: no és ocultació visual; combina-ho amb estils si escau, i no te l'oblidis actiu.

Element <search>

Equival al landmark role="search" de manera nativa: embolcalla el formulari de cerca perquè les persones usuàries de lector de pantalla hi saltin directament.

CSS modern al servei de l'accessibilitat

:focus-visible

Permet mostrar l'indicador de focus només quan el navegador determina que és útil (navegació amb teclat), cosa que evita que l'equip de disseny elimini l'outline perquè apareix després d'un clic de ratolí. És la base de l'anell de focus de qualsevol design system i la manera correcta de complir el 2.4.7 Focus visible sense molestar qui utilitza el ratolí. No utilitzis mai outline: none sense una alternativa visible a :focus-visible.

:focus { outline: none; }            /* incorrecte si es deixa així */

:focus-visible {                      /* correcte */
  outline: 3px solid #1a1a1a;   /* ≥ 3:1 sobre el fons */
  outline-offset: 2px;
}

Consultes de preferències (prefers-*)

• prefers-reduced-motion: reduce: desactiva o minimitza les animacions i els desplaçaments automàtics; relacionat amb el 2.3.3 Animació a partir d'interaccions (AAA) i amb la bona pràctica per al 2.2.2.
• prefers-contrast: more: augmenta els contrastos i els gruixos de vora per a qui ho ha demanat en el seu sistema.
• prefers-color-scheme: dark: mode fosc; recorda verificar el contrast també en la paleta fosca (1.4.3, 1.4.11).
• prefers-reduced-transparency: redueix les transparències que dificulten la lectura.

forced-colors i colors del sistema

En el mode de colors forçats (per exemple, l'alt contrast de Windows), el navegador substitueix els colors per la paleta del sistema. La consulta @media (forced-colors: active) permet ajustar el que es trenca (icones SVG que desapareixen, vores que es perden, focus invisible) utilitzant les paraules clau de color del sistema (CanvasText, Highlight, ButtonText) en lloc de colors fixos.

@media (forced-colors: active) {
  .icono { forced-color-adjust: none; fill: CanvasText; }
  .boton-seleccionado { outline: 2px solid Highlight; }
}

Altres utilitats

• :has() permet aplicar estils a un contenidor segons el seu contingut (per exemple, ressaltar un grup de camps que conté un error) sense JavaScript ni classes addicionals.
• Les consultes de contenidor (@container) ajuden que els components s'adaptin a l'espai disponible i faciliten el reajustament a 320 píxels (1.4.10).
• text-wrap: balance i text-wrap: pretty milloren la llegibilitat de titulars i paràgrafs sense afectar l'estructura.
• Unitats relatives (rem, em) i clamp() per a una tipografia fluida que respecta la mida de text de l'usuari (1.4.4).

Llista de comprovació d'adopció

1. Consulta el suport actual de cada característica a la documentació de referència (per exemple, MDN sobre popover) i a les teves dades de navegadors.
2. Substitueix els diàlegs personalitzats per <dialog> amb showModal() i nom accessible.
3. Utilitza popover per a capes no modals, afegint-hi rol, estat expandit comprovat i teclat.
4. Utilitza inert per desactivar regions quan no utilitzis <dialog>.
5. Defineix l'anell de focus a :focus-visible en el design system.
6. Implementa prefers-reduced-motion, prefers-contrast i forced-colors i prova'ls activant les preferències del sistema.
7. Verifica cada novetat amb teclat, NVDA i VoiceOver abans de generalitzar-la.

Resum

• WAI-ARIA 1.3 (esborrany) afegeix aria-description, propietats braille i rols d'anotació; utilitza ARIA només quan l'HTML natiu no n'hi hagi prou i comprova'n el suport.
• <dialog> amb showModal(), popover, inert i <search> resolen de manera nativa la modalitat, les capes, la desactivació de regions i el landmark de cerca.
• :focus-visible, prefers-reduced-motion, prefers-contrast, prefers-color-scheme i forced-colors permeten respectar les preferències de l'usuari i complir el 2.4.7, el 2.3.3 i els criteris de contrast en tots els modes.
• Natiu no vol dir semàntic: la responsabilitat dels rols, els noms, els estats i les proves continua sent de l'equip.