Orientació al lloc web: fil d'Ariadna, paginació, cercador i mapa web

Una pàgina ben estructurada respon a la pregunta «què hi ha aquí?». Però la persona també necessita saber on és dins del lloc web, com hi ha arribat i com arribar a una altra part. Qui veu la pantalla ho dedueix del menú ressaltat, de la ruta que apareix sobre el títol o del número de pàgina marcat en un llistat. Qui fa servir un lector de pantalla, un ampliador de pantalla que només en mostra una part o té dificultats de memòria o d'orientació depèn que aquests mecanismes estiguin marcats i siguin coherents. Aquesta lliçó tracta del marcatge del fil d'Ariadna, la paginació, el mapa web i el cercador, i dels criteris que els demanen: 2.4.5 Múltiples vies (AA), 2.4.8 Ubicació (AAA), 3.2.3 Navegació coherent (AA) i 3.2.6 Ajuda coherent (A).

Més d'un camí: 2.4.5 Múltiples vies

El criteri exigeix que hi hagi 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 pantalla 3 d'un formulari de matrícula no ha de ser necessàriament localitzable per si sola). El menú compta com una via; en cal almenys una altra. Les més habituals són:

• Un cercador intern.
• Un mapa web en HTML que enllaci totes les pàgines o seccions.
• Una taula de continguts o un índex de la secció.
• Enllaços entre pàgines relacionades (tràmits relacionats, articles de la mateixa sèrie).

En un lloc web de cinc pàgines, les dues vies poden ser molt senzilles: per exemple, enllaçar totes les pàgines des de la portada i oferir, a més, una llista d'enllaços a totes o un mapa web. En una seu electrònica amb centenars de tràmits, el cercador i el catàleg navegable són imprescindibles per a qualsevol persona. Compte: el fitxer sitemap.xml està pensat per als motors de cerca i no compta, perquè ningú no el fa servir per navegar.

Fil d'Ariadna: on soc

El fil d'Ariadna (breadcrumbs) mostra la ruta jeràrquica des de la portada fins a la pàgina actual. És una de les tècniques per al 2.4.8 Ubicació, que és AAA, però resulta tan útil i tan barat que convé tenir-lo a qualsevol lloc web amb més de dos nivells. El patró de les pràctiques d'autoria d'ARIA (APG (s'obre en una finestra nova)) del W3C és aquest:

<nav aria-label="Fil d'Ariadna">
  <ol>
    <li><a href="/">Inici</a></li>
    <li><a href="/tramites/">Catàleg de tràmits</a></li>
    <li><a href="/tramites/padron/">Padró</a></li>
    <li><a href="/tramites/padron/certificado/" aria-current="page">Certificat d'empadronament</a></li>
  </ol>
</nav>

Cada peça té la seva raó de ser. El <nav> amb nom el converteix en un landmark que es distingeix del menú principal. La llista ordenada comunica que hi ha quatre nivells i en quin ordre. I aria-current="page" fa que el lector anunciï «pàgina actual» a l'últim element. Alguns llocs web deixen aquest últim element com a text sense enllaç; també és acceptable, sempre que continuï dins de la llista.

<div class="migas">
  <a href="/">Inici</a> > <a href="/tramites/">Tràmits</a> > Padró
</div>

La pàgina actual als menús

El mateix aria-current="page" serveix al menú principal i als menús laterals: indica quin enllaç correspon a la pàgina on ets. Per a qui veu la pantalla, la indicació visual no pot dependre només del color (ho vas veure amb l'1.4.1 Ús del color): un subratllat, una vora o un fons amb una forma clara funcionen millor. Un bon truc és fer servir el mateix atribut com a selector d'estil, [aria-current="page"], perquè la indicació visual i la semàntica no es desincronitzin mai.

aria-current admet altres valors (step per al pas actual d'un procés, date per a la data actual en un calendari, location, time, true). Fes-los servir només amb aquest sentit: en un indicador de passos d'un tràmit, el pas en curs porta aria-current="step", no "page".

Paginació i llistats llargs

Els llistats de notícies, resultats o productes es divideixen en pàgines. La paginació és una altra navegació i es marca com a tal:

<nav aria-label="Paginació">
  <ul>
    <li><a href="?p=1">Anterior</a></li>
    <li><a href="?p=1" aria-label="Pàgina 1">1</a></li>
    <li><a href="?p=2" aria-label="Pàgina 2" aria-current="page">2</a></li>
    <li><a href="?p=3" aria-label="Pàgina 3">3</a></li>
    <li><a href="?p=3">Següent</a></li>
  </ul>
</nav>

Els noms «Pàgina 2» contenen el número visible, així que respecten el 2.5.3 Etiqueta en el nom, i són molt més clars a la llista d'enllaços que un «2» solt. Completa el patró amb el títol de la pàgina: «Notícies, pàgina 2 de 8 - Ajuntament d'Exemple», perquè cada pàgina del llistat sigui distingible en pestanyes i historial (ho veuràs a la lliçó següent). A la primera pàgina, no mostris un «Anterior» que no porta enlloc o, si el disseny ho exigeix, que no sigui un enllaç.

Cercador i mapa web

El cercador és la via alternativa més utilitzada. El seu marcatge és curt: l'element <search> (o role="search" en navegadors antics), una etiqueta visible i un botó amb nom.

<search>
  <form action="/buscar">
    <label for="q">Cerca al web</label>
    <input id="q" name="q" type="search">
    <button>Cerca</button>
  </form>
</search>

La pàgina de resultats també és una pàgina: el seu títol ha de dir què s'ha cercat i quants resultats hi ha, el seu <h1> l'ha de repetir, i els resultats han de formar una llista de targetes com les de la lliçó de patrons. Si no hi ha resultats, digues-ho amb un text clar i ofereix alternatives.

El mapa web en HTML reflecteix la jerarquia del lloc web amb llistes imbricades: cada secció és un <li> que conté un enllaç i, a dins, una altra <ul> amb les seves pàgines. Així el lector anuncia el nivell d'imbricació i la persona entén l'estructura sense veure-la.

Coherència entre pàgines

Els mecanismes d'orientació només orienten si són sempre al mateix lloc. El 3.2.3 Navegació coherent demana que la navegació repetida aparegui en el mateix ordre relatiu a totes les pàgines, i el 3.2.4 Identificació coherent, que els components amb la mateixa funció s'identifiquin igual; ja els vas veure des del disseny al nivell 2. Les WCAG 2.2 van afegir el 3.2.6 Ajuda coherent: si el lloc web ofereix ajuda en diverses pàgines (telèfon, formulari de contacte, xat, preguntes freqüents), ha d'aparèixer en el mateix ordre relatiu respecte a la resta del contingut. Al marcatge, la manera més segura de complir-los tots tres és generar la capçalera, els menús, el fil d'Ariadna i el peu des dels mateixos components de plantilla.

Resum

• El 2.4.5 exigeix almenys dues vies per arribar a cada pàgina (menú més cercador, mapa web o índex), tret dels passos d'un procés.
• El fil d'Ariadna és un nav amb nom, amb una llista ordenada i aria-current="page" a la pàgina actual; els separadors, fora del text.
• aria-current marca la pàgina actual en menús i paginació, i step, el pas actual d'un procés.
• La paginació és una altra navegació amb nom; evita el desplaçament infinit o ofereix un botó «Carrega'n més».
• La capçalera, els menús, el fil d'Ariadna, l'ajuda i el peu han de sortir dels mateixos components per complir el 3.2.3, el 3.2.4 i el 3.2.6.