Dag 11: Hoppe over navigasjonslenker

Hvis du ikke klarte å hacke malen din til å presentere ditt viktigste innhold først, her er et kompromiss: Tilby en lenke til å hoppe over navigasjonen med. Dette er ikke en perfekt løsning (å presentere det viktigste innholdet først er bedre), men det er et akseptert kompromiss som mange nettsider bruker.

Denne «hopp over-lenken» er bare en helt vanlig <a>-tagg, lik alle andre lenker, men vi skal bruke CSS til å skjule den for visuelle nettlesere som Internet Explorer og Netscape. Det vil ikke påvirke sidens layout i det hele tatt; den vil bli fullstendig usynlig.

Hvem har nytte av det?

  1. Marius har nytte av det. Når han besøker siden din, vil Lynx vise lenken og la han hoppe over navigasjonen og gå direkte til innholdet. Se Dag 10: Presentere ditt viktigste innhold først for et eksempel på hvorfor dette er så viktig.
  2. Anne har nytte av det. Når hun besøker siden din, vil JAWS lese hopp over-lenken og la henne hoppe over navigasjonen og gå direkte til innholdet.

Hvordan gjøre det

Først, bruk Lynx Viewer på din egen hjemmeside for å fastslå hvorvidt navigasjonslisten er presentert før hovedinnholdet. Hvis hovedinnholdet kommer først trenger du ikke dette tipset; kos deg med en fridag.

Definer nå en CSS-regel for hopp over-lenkene, for å gjøre dem usynlige for visuelle nettlesere. Hvis du har et eksternt stilark, legg denne regelen inn på slutten av det. (Hvis du har flere eksterne stilark, legg denne regelen inn i det Netscape 4-vennlige stilarket.) Hvis du kun har en <style>-seksjon på toppen av malen din, legg denne regelen inn umiddelbart etter <style>-taggen.

.skiplink {display:none}

Sett deretter inn den reelle hopp over-lenken umiddelbart etter tittelen og beskrivelsen av nettstedet. Kan du ikke finne dem? Søk etter de aktuelle mal-variablene:

  • Movable Type: Søk etter <$MTBlogTitle$> og <$MTBlogDescription$>.
  • Greymatter: Det er ingen spesifikk mal-variabel; søk etter navnet på siden din.
  • Radio: Søk etter <%siteName%> and <%description%>.
  • Manila: Søk etter {homePageLink (siteName)} and {tagLine}.
  • Blogger: Søk etter <$BlogTitle$>.

Funnet dem? Sett inn følgende lenke umiddelbart etter tittelen og beskrivelsen:

<a class="skiplink" href="#startcontent">Hopp over navigasjon</a>

Ok, nå trenger du en <a>-tagg som hopp over-lenken skal peke til; det skal bli på starten av hovedinnholdet. Finner du ikke ut hvor i malen dette er? Ikke få panikk. Mal-variabler redder dagen igjen.

  • Movable Type: Søk etter <MTEntries>.
  • Greymatter: Søk etter {{logbody}} i hovedsidemalen og {{entrymainbody}} i malen for enkeltinnlegg.
  • Radio: Søk etter <%bodytext%>.
  • Manila: Søk etter {bodytext}.
  • Blogger: Søk etter <Blogger>.

Hvordan du skal skrive denne <a>-taggen avhenger av hva slags HTML du bruker. Se på DOCTYPE-en din, gjør så en av følgende:

  1. Hvis du bruker en variant av HTML 4, legg dette til rett før hovedinnholdet:

    <a name="startcontent"></a>

  2. Hvis du bruker en variant av XHTML 1.0, legg dette til rett før hovedinnholdet:

    <a name="startcontent" id="startcontent"></a>

  3. Hvis du bruker XHTML 1.1, legg dette til rett før hovedinnholdet:

    <a id="startcontent"></a>

Hopp over-lenken bør finnes på hver eneste side på nettstedet ditt, så legg til dette i alle malene dine.