Layout, coherència (3.2.3, 3.2.4, 3.2.6) i disseny responsive

Una interfície predictible és una interfície accessible. Quan el menú és sempre al mateix lloc, la icona de cerca significa sempre el mateix i l'enllaç de contacte apareix al mateix lloc a totes les pàgines, una persona amb discapacitat cognitiva, amb baixa visió o que fa servir lector de pantalla construeix un model mental del lloc web i el reutilitza. Aquesta lliçó tracta els criteris de coherència del principi «Comprensible» i les bases del disseny responsive que fan que la interfície funcioni en qualsevol pantalla.

Coherència entre pàgines

3.2.3 Navegació coherent (AA)

Els mecanismes de navegació que es repeteixen en diverses pàgines (menú principal, enllaços del peu, cercador, ruta de navegació) han d'aparèixer en el mateix ordre relatiu cada vegada, tret que la persona usuària iniciï el canvi. No obliga que siguin a la mateixa posició exacta ni que tots els elements siguin presents a totes les pàgines; el que no pot canviar és l'ordre entre ells. Un menú amb «Inici, Serveis, Contacte» a la portada i «Serveis, Inici, Contacte» a l'interior incompleix.

3.2.4 Identificació coherent (AA)

Els components amb la mateixa funció s'identifiquen de manera coherent a tot el lloc web: mateix nom, mateixa icona, mateix text alternatiu. Si la icona de la lupa és «Cerca» a la capçalera, no pot ser «Troba» al peu. Si el botó de descarregar un PDF es diu «Descarrega» en una pàgina, no ha de ser «Obtén» en una altra. Això afecta de ple el disseny: un sistema de components amb noms fixos és la millor garantia.

3.2.6 Ajuda coherent (A)

Nou a WCAG 2.2. Si un web ofereix algun mecanisme d'ajuda (dades de contacte humà com el telèfon o el correu, un mecanisme de contacte humà com un xat o un formulari, una opció d'autoajuda com unes preguntes freqüents, o un mecanisme automatitzat com un xatbot), aquest mecanisme ha d'aparèixer en el mateix ordre relatiu respecte a la resta del contingut a totes les pàgines del conjunt on sigui present. L'objectiu és que qui necessita ajuda sàpiga on buscar-la. No obliga a oferir ajuda; obliga a ser coherent si se n'ofereix.

3.2.1 i 3.2.2: sense canvis de context inesperats

Dos criteris de nivell A completen la predictibilitat: res no canvia de context (finestra nova, una altra pàgina, focus desplaçat) només per rebre el focus (3.2.1 En rebre el focus) ni només per canviar el valor d'un control (3.2.2 En introduir dades) sense avisar-ne abans. El desplegable «tria la teva província» que navega a una altra pàgina en seleccionar incompleix 3.2.2: tota acció que canvia de pàgina necessita un control explícit.

Layout accessible

• Regions clares: capçalera, navegació, contingut principal, contingut complementari i peu, ben delimitats visualment. En codi es convertiran en landmarks (header, nav, main, aside, footer) que el lector de pantalla fa servir per saltar entre zones.
• Ordre visual = ordre de lectura. El contingut es llegeix en l'ordre del codi (1.3.2 Seqüència significativa). Si el disseny col·loca una cosa visualment abans però al codi va després, la persona que no veu la pantalla rep la informació desordenada. Dissenya de dalt a baix i d'esquerra a dreta, i evita reordenar amb CSS.
• Una acció principal per pantalla i prou espai en blanc entre blocs i elements interactius.
• Jerarquia visual que coincideixi amb la semàntica: si una cosa sembla un títol de nivell 2, serà un h2; si sembla un botó, serà un botó. No dissenyis «enllaços que semblen botons» sense decidir què són.

Disseny responsive i accessibilitat

El disseny responsive no és només que el web «es vegi bé al mòbil». És la base d'1.4.10 Reajustament dels elements (que el contingut s'adapti a 320 px CSS sense desplaçament horitzontal) i d'1.4.4 Canvi de mida del text. Principis de disseny:

• Dissenya primer la versió estreta (mobile first): si funciona a 320 px, funcionarà amb zoom al 400 % a l'escriptori, que és com la fan servir moltes persones amb baixa visió.
• No retallis mai funcions a la versió mòbil. El que es pot fer a l'escriptori s'ha de poder fer al mòbil; altrament, qui fa servir zoom al 400 % perd funcions.
• Orientació lliure. El criteri 1.3.4 Orientació (AA) exigeix que el contingut no es limiti a vertical o horitzontal, tret que sigui essencial (un piano virtual, un xec escanejat). Moltes persones tenen el mòbil o la tauleta fixats en un suport de cadira de rodes i no el poden girar.
• Compte amb els elements fixos. Capçaleres enganxoses, bàners de galetes, botons de xat: al 400 % poden ocupar tota la pantalla. Dissenya'n versions mínimes o que es puguin tancar.
• Taules de dades: desplaçament horitzontal dins de la taula, sense perdre la relació entre encapçalaments i dades.
• Menús plegats («hamburguesa»): acceptables, però el botó ha de tenir nom («Menú»), indicar-ne l'estat (obert/tancat) i ser operable amb el teclat.

Resum

• 3.2.3 Navegació coherent i 3.2.4 Identificació coherent (AA): mateix ordre relatiu i mateixos noms per als mateixos components a tot el lloc web.
• 3.2.6 Ajuda coherent (A, nou a 2.2): els mecanismes d'ajuda a la mateixa posició relativa a totes les pàgines.
• 3.2.1 i 3.2.2: sense canvis de context en rebre el focus o en canviar un valor; tota navegació necessita un control explícit.
• Layout amb regions clares, ordre visual igual a l'ordre de lectura i jerarquia visual coherent amb la semàntica.
• Responsive de debò: mobile first, sense perdre funcions, orientació lliure (1.3.4), elements fixos controlats.