Gør din løsning opfattelig: Navigation

Sådan gør du

Der er en række ting, der skal gøres for at hjælpe brugeren med at navigere, finde ting og afgøre, hvor på sitet de er.

Det skal være muligt at springe over blokke af indhold ved hjælp af tastaturet.

Det betyder, at der ENTEN skal være brugt:

  • Overskrifter til alle elementer på siden, herunder top-, bund-, venstre- og højremenuer.
  • WAI-ARIA opmærkning til alle elementer på siden, fx navigation, header, main, article
  • Links i toppen af dokumentet til centrale dele af indholdet, fx navigation, søg, hovedindhold.

Hver side skal have en sigende og unik titel.

Det betyder, at der skal være brugt <title>Sigende og unik titel</title> i sidens <head>

Der skal være en logisk fokusrækkefølge, dvs. at når man tabber sig rundt i løsningen, kommer man til de forskellige interaktive elementer i den rækkefølge, der betyder, at man kan bruge løsningen.

Sigende links

Tidligere skulle alle links kunne læses og forstås uden for kontekst; det skal de ikke mere, men det anbefales stadig. Nu kan de blot kunne forstås i den sammenhæng, de optræder i, dog skal sammenhængen kunne bestemmes programmeringsmæssigt. Hvad betyder det så i praksis? Du kan med fordel fortsætte som hidtil med dine link-tekster, men du kan altså også fremover bruge "Læs mere", hvis blot det er gjort korrekt, som angivet nedenunder.

Det betyder, at link og beskrivelse findes i samme sætning eller afsnit, <p>.  

Bedst hvis linket er sidst, og beskrivelsen før:

  • Samme list element <li>
  • Samme tabelcelle <td>
  • Beskrivelsen findes som tabeloverskrift, <th>, for en række links i hver deres tabelcelle.
  • Beskrivelsen optræder som overskrift, <hx>, hvor linket optræder i afsnittet under.

Der er muligt at komme til en enkelt side på flere måder (undtagen, hvis siden er resultatet af en proces).

Det betyder, at enten er der:

  • En søgefunktion på siden.
  • En sitemap.
  • Links på siderne, der peger på relateret indhold.

Overskrifter og labels beskriver emne eller formål

Det betyder, at:

  • En overskrift giver mening i forhold til teksten, den er overskrift for.
  • En label i en formular beskriver, hvad der skal udfyldes i inddateringsfeltet, det er knyttet til.

Der er en synlig og tydelig indikation på links og andre interaktive elementer, når de er i fokus, dvs. de er ”ramt” ved tastaturtabulering.

Det betyder, at det som minimum er synligt via browserens default visning. Når links får tastaturfokus, giver alle browsere automatisk linket en tynd prikket linje omkring sig. Dette er i princippet nok for at have overholdt kriteriet, så du skal blot sikre, at baggrund o.l. gør det muligt at se denne linje. Tjek også, at det sker i menuer af forskellig slags. Brug tab-knappen til at navigere med, når du tester.

Gør det mere synligt via style sheet

Vil du gerne gøre det tydeligere og dermed mere brugervenligt for de, der benytter tastatur, er der en meget simpel løsning. Du kan fx skifte farve og baggrundsfarve for linket i fokus. I style sheetet (css) for hjemmesiden indsætter du blot noget a la følgende: 

  • a:focus {
  • background-color: #DCFFFF;
  • color:#000066; 

Vil du desuden sikre, at brugere af Internet Explorer 6.0 og tidligere også får glæde af den synlige fokus samt de, der benytter en mus, gør du sådan her:

  • a:hover, a:active, a:focus {
  • background-color: #DCFFFF;
  • color:#000066;

Bruger script, hvor det er nødvendigt

For nogle typer af menuer kan det være nødvendigt at benytte fx java-script for at give en tydelig markering af fokus. Tal med din udvikler/leverandør om udviklingen af dette.

Fordele

  • Gør løsningen nem at overskue og bruge, også med kompenserende udstyr.

Ulemper

  • Ingen.

Link

WCAG 2.0, Navigation.

Information om linket

Ikke relevant.

Værktøjet er fra

WCAG 2.0.

Værktøjet er hentet

30. april 2013.

Permanent URL til denne artikel: http://arkitekturguiden.digitaliser.dk/node/607