Navegació i orientació: títols, encapçalaments, salts i múltiples vies (2.4.1, 2.4.2, 2.4.5, 2.4.6)

A la lliçó anterior vam veure que una interfície coherent permet construir un model mental del lloc web. Però la coherència no n'hi ha prou si la persona no sap en quina pàgina és, no troba la que busca o ha de travessar quaranta enllaços de menú abans d'arribar al contingut. Aquesta lliçó tracta l'orientació: títols, encapçalaments, mecanismes per saltar blocs, diferents vies per arribar a una pàgina i senyalització dels processos de diversos passos. Gairebé tot es decideix en el disseny i l'arquitectura de la informació, molt abans del codi.

Tres preguntes que tota pantalla ha de respondre

Una manera pràctica de revisar l'orientació és comprovar que cada pantalla respon, sense esforç i sense dependre de la vista, a tres preguntes:

• On soc? Hi responen el títol de la pàgina (2.4.2), l'encapçalament principal, la secció actual marcada al menú i, si n'hi ha, la ruta de navegació.
• Què hi puc fer, aquí? Hi responen els encapçalaments que descriuen cada bloc (2.4.6), les etiquetes dels controls i una acció principal clara.
• Com arribo on vull? Hi responen el menú, el cercador, el mapa web, els enllaços relacionats (2.4.5) i l'enllaç per saltar al contingut (2.4.1).

Qui fa servir lector de pantalla obté aquestes respostes de manera seqüencial (títol, encapçalaments, regions); qui té una discapacitat cognitiva les necessita visibles i estables; qui navega amb el teclat necessita que el camí fins al contingut sigui curt.

Infografia · Conceptes clau

Set peces perquè ningú no es perdi en un web

Responen a «on soc?», «què hi puc fer?» i «com hi arribo?» sense dependre de la vista

• Títol de pàginaEl que és específic primer; és el primer que anuncia el lector (2.4.2)
• Encapçalaments descriptiusLlegits sols, expliquen de què va la pàgina (2.4.6)
• Ubicació assenyaladaSecció actual i ruta de navegació, sense dependre només del color
• Diverses viesMenú, cercador, mapa web o enllaços relacionats (2.4.5)
• Cercador que orientaCerca i nombre de resultats; suggeriments si no n'hi ha cap
• Salta al contingutEnllaç de salt que apareix en rebre el focus (2.4.1)
• Passos en text«Pas 2 de 4: Dades personals» al títol i a la pantalla

Llegeix la infografia com a text

Set targetes amb les peces de disseny que orienten la persona usuària. Títol de pàgina: el que és específic primer; és el primer que anuncia el lector de pantalla (2.4.2). Encapçalaments descriptius: llegits sols, expliquen de què va la pàgina (2.4.6). Ubicació assenyalada: la secció actual i la ruta de navegació es marquen sense dependre només del color. Diverses vies: menú, cercador, mapa web o enllaços relacionats (2.4.5). Cercador que orienta: resultats amb la cerca i el seu nombre, i suggeriments quan no hi ha resultats. Salta al contingut: enllaç de salt que apareix en rebre el focus (2.4.1). Passos en text: «Pas 2 de 4: Dades personals» al títol i a la pantalla.

On soc? Títols de pàgina i encapçalaments

2.4.2 Pàgina titulada (A)

Cada pàgina ha de tenir un títol que en descrigui el tema o el propòsit. És el primer que anuncia el lector de pantalla en carregar-la i el text de la pestanya, de l'historial i de les adreces d'interès. S'implementa a <title>, però el patró el defineixen el disseny i el contingut, perquè ha de ser coherent a tot el lloc web. Un patró que funciona: el que és específic primer, el que és general després.

• «Sol·licitar cita prèvia – Padró municipal – Ajuntament de Villaclara».
• En un procés: «Pas 2 de 4: Dades personals – Ajut al lloguer».
• Després d'un error d'enviament: «Error: revisa 2 camps – Pas 2 de 4: Dades personals…».

Si el nom del lloc web va al davant, la persona sent sempre el mateix abans del que importa i, amb moltes pestanyes obertes, totes semblen iguals.

2.4.6 Encapçalaments i etiquetes (AA)

Els encapçalaments i les etiquetes han de descriure el tema o el propòsit del bloc. «Més informació», «Altres» o «Destacats» no diuen res fora de context; «Requisits per empadronar-se» o «Terminis i taxes», sí. Moltes persones que fan servir lector de pantalla recorren la pàgina només pels encapçalaments: si aquesta llista, llegida sola, no explica de què va la pàgina, el disseny no està acabat. El nivell (H1, H2, H3) depèn de l'estructura, no de la mida de lletra, com vam veure a la lliçó sobre layout i coherència.

Assenyalar la ubicació actual

La secció actual del menú s'ha de distingir amb alguna cosa més que el color (1.4.1 Ús del color): subratllat, barra lateral o negreta. A l'anotació indica que aquest enllaç portarà aria-current="page", perquè el lector digui «pàgina actual». La ruta de navegació (la ruta «Inici › Tràmits › Padró › Cita prèvia») ajuda en llocs web profunds; 2.4.8 Ubicació (AAA) la recull com una manera d'indicar on és la persona dins del conjunt de pàgines.

Com hi arribo? Diverses vies i un cercador que funcioni

2.4.5 Múltiples vies (AA)

Hi ha d'haver més d'una manera de localitzar una pàgina dins d'un conjunt de pàgines, tret que la pàgina sigui el resultat o un pas d'un procés (la confirmació d'un pagament o el pas 3 d'un formulari no ho necessiten). Vies habituals: menú, cercador, mapa web, índex de la A a la Z, taula de continguts o enllaços relacionats. Cada via serveix persones diferents: qui té dificultats de memòria sol preferir cercar, i qui no coneix l'argot de l'organització no trobarà «Padró» al menú si ho busca com a «empadronar-me».

Dissenyar el cercador

• Nom clar i coherent: «Cerca al web»; si només hi ha una lupa, el seu nom accessible és «Cerca» a tot el lloc web (3.2.4).
• Resultats que orienten: un encapçalament amb la cerca i el nombre de resultats («12 resultats per a "empadronament"») i cada resultat amb títol enllaçat i extracte.
• Estat sense resultats: suggeriments, correcció ortogràfica i enllaços als tràmits més sol·licitats, mai una pàgina buida.
• Suggeriments mentre s'escriu, només com a complement: el botó «Cerca» ha de funcionar sense.

Menús que es despleguen

• El tauler s'obre amb un botó (clic, toc, Retorn o Espai), no només en passar-hi el ratolí. Si a més s'obre amb hover, ha de complir 1.4.13, que veurem a la lliçó següent.
• Si l'element pare també és un enllaç («Tràmits»), separa l'enllaç del botó que desplega, o fes que el pare només desplegui i inclou «Mostra tots els tràmits» dins del tauler.
• L'estat obert o tancat es veu (fletxa que gira) i s'anota per a desenvolupament.
• Per a la navegació d'un lloc web, el patró adequat de l'APG (s'obre en una finestra nova) és la navegació desplegable (disclosure), no el menú d'aplicació (role="menu"), que imposa una interacció amb fletxes pròpia dels programes d'escriptori.

<!-- Incorrecte: un div que s'obre en passar-hi el ratolí -->
<div class="menu" onmouseover="abrir()">Tràmits</div>

<!-- Correcte: navegació amb nom i botó que n'indica l'estat -->
<nav aria-label="Principal">
  <button type="button" aria-expanded="false" aria-controls="sub-tramites">Tràmits</button>
  <ul id="sub-tramites" hidden>
    <li><a href="/tramites/padron">Padró municipal</a></li>
    <li><a href="/tramites">Mostra tots els tràmits</a></li>
  </ul>
</nav>

Saltar el que no necessito: 2.4.1 Evitar blocs (A)

Hi ha d'haver un mecanisme per saltar els blocs que es repeteixen en diverses pàgines: capçalera, menú, cercador, avisos. Els landmarks i els encapçalaments ajuden qui fa servir lector de pantalla, que pot saltar per regions. Però qui navega només amb el teclat no disposa d'aquestes dreceres: necessita un skip link, un enllaç «Salta al contingut principal» que és el primer element que rep el focus i porta al començament del contingut. Dissenya'l com un component més (posició, mida, contrast i estat de focus): pot estar ocult fins que rebi el focus, però llavors ha d'aparèixer amb claredat. En pàgines llargues afegeix-hi salts interns («Salta als resultats» en un cercador amb vint filtres) i indica a l'anotació la destinació de cada salt.

Orientar-se en processos i llistes llargues

Una sol·licitud, una compra o una reserva necessiten un indicador de progrés en text («Pas 2 de 4: Dades personals»), amb el nom de cada pas i no només cercles de colors. El títol i l'H1 canvien a cada pas, tornar enrere conserva les dades i la pantalla de revisió enllaça a cada pas, com veuràs per a 3.3.4 a la lliçó de formularis.

El desplaçament infinit, que afegeix resultats automàticament en arribar al final, fa inabastable el peu de pàgina (contacte, ajuda, enllaços legals) i fa perdre la posició a qui fa servir el teclat o el lector de pantalla. En llistats on es busca una cosa concreta, prefereix la paginació (amb la pàgina actual marcada i números d'almenys 24 per 24 px, com veuràs a la lliçó sobre la mida de l'objectiu) o un botó «Carrega més resultats», i especifica què passa en prémer-lo: el focus va al primer resultat nou i s'anuncia «Es mostren 20 de 85 resultats».

Resum

• Cada pantalla ha de respondre a «on soc?», «què hi puc fer?» i «com hi arribo?» sense dependre de la vista.
• 2.4.2 Pàgina titulada (A) i 2.4.6 Encapçalaments i etiquetes (AA): títols amb el que és específic primer i encapçalaments que descriuen el seu bloc.
• 2.4.5 Múltiples vies (AA): menú, cercador, mapa web o enllaços relacionats; no s'exigeix en els passos d'un procés.
• 2.4.1 Evitar blocs (A): «Salta al contingut principal» visible en rebre el focus, i salts interns en pàgines llargues.
• Menús que es despleguen amb un botó, processos amb «Pas X de Y» en text i paginació o «Carrega més» en lloc de desplaçament infinit.