Gå til innhold

[Løst]TAB navigering

howieD

Av howieD
i Programmering og webutvikling

Anbefalte innlegg

howieD

howieD

Skrevet
Skrevet (endret)

Hei,

 

Noen som vet om følgende er mulig?

 

Jeg har en hovedmeny som ved bruk viser noen linker på en submeny lenger ned på siden.

F.eks om du klikker på "Nyheter" i hovedmenyen, vil en submeny med linker til "dagens", "ukens" etc. dukke opp.

 

Det er ønskelig at musepekeren hopper til "dagens",og/eller at DIVen med det første submenyvalget blir aktivert slik at man kan TABe seg gjennom submenyen.

Dersom man navigerer med TAB nå, og velger "nyheter", vil man måtte begynne å TABe seg gjennom hovedmenyen, og deretter videre ned på submenyen.

 

Help please! :)

 

 

 

anchor kanskje? eller hva mener dere?

Endret av Haavard82
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Wattengård

Wattengård

Skrevet
Skrevet

Nei, nei, nei, nei, nei ... og nei.

 

Det er _IKKE_ god designskikk (skikk i det hele tatt) å flytte på musepekeren til den som besøker siden din uten at vedkommende har ønsket å flytte den.

 

Hvis siden din har så stor avstand mellom menyene at det er slitsomt å flytte pekeren så tror jeg kanskje du har et designproblem.

 

-C-

Lenke til kommentar
howieD

howieD

Skrevet
  • Forfatter
Skrevet
Nei, nei, nei, nei, nei ... og nei.

 

Det er _IKKE_ god designskikk (skikk i det hele tatt) å flytte på musepekeren til den som besøker siden din uten at vedkommende har ønsket å flytte den.

 

Hvis siden din har så stor avstand mellom menyene at det er slitsomt å flytte pekeren så tror jeg kanskje du har et designproblem.

 

-C-

 

Enig i det da. ok.

Men da ønsker jeg noe som gjør en gitt DIV aktiv etter at man har f.eks klikket på en link på siden :S

Rett og slett fordi brukere skal slippe å TABe seg gjennom hele hovedmenyen fra begynnelsen av.

Lenke til kommentar
howieD

howieD

Skrevet
  • Forfatter
Skrevet
Så langt jeg klarer å lese kan ikke en DIV ha fokus. Du må evt sette fokus på første link.

 

document.getElementById('forstelink').focus()

 

eller noe slikt.

 

Men jeg er fortsatt ikke enig i måten du bygger siden på. Men det er mulig jeg har gått glipp av noe.

 

-C-

 

Takker.

 

Men jeg skal bygge litt videre på designet o.l, så får du se hva jeg mener :)

Lenke til kommentar
BlueBench

BlueBench

Skrevet
Skrevet

Som påpekt over her bør tab-rekkefølge være en del av planleggingen av et brukervennlig design, men det er slett ikke alltid dette lar seg gjøre på en god måte. En måte å gi de besøkende en mer brukervennlig tastaturnavigering på kan være å overstyre rekkefølgen med attributten tabindex.

 

Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mine lenker | Lenkeeksempel.no</title>
</head>
<body>
<div>
	<ul>
		<li><a title="Min tredje lenke" href="#" tabindex="3">Tredje lenke</a></li>
		<li><a title="Min andre lenke" href="#" tabindex="2">Andre lenke</a></li>
		<li><a title="Min første lenke" href="#" tabindex="1">Første lenke</a></li>
		<li><a title="Min fjerde lenke" href="#" tabindex="4">Fjerde lenke</a></li>
	</ul>
</div>
</body>
</html>

 

Du kan også velge å gi en hel rekke lenker samme verdi. F.eks. kan du gi alle lenker i toppmenyen attributten og verdien tabindex="1" og alle lenker i submeny/undermeny for et element kan ha tabindex="2". Da vil rekkefølgen være første lenke i dokumentet med tabindex="1" (toppmeny) etterfulgt av lenkene i submeny med tabindex="2". Lenker som ikke har noen tabindex oppgitt vil følge etter alle lenker hvor du har oppgitt en tabindex. Lenker uten tabindex vil altså følge standard navigering, altså avhenge av hvilken rekkefølge de kommer i dokumentet (etter lenker med en definert tabindex).

 

Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mine lenker | Lenkeeksempel.no</title>
</head>
<body>
<div>
	<p>Tabindex 2</p>
	<ul>
		<li><a title="Min første lenke" href="#" tabindex="2">Første lenke</a></li>
		<li><a title="Min andre lenke" href="#" tabindex="2">Andre lenke</a></li>
		<li><a title="Min tredje lenke" href="#" tabindex="2">Tredje lenke</a></li>
		<li><a title="Min fjerde lenke" href="#" tabindex="2">Fjerde lenke</a></li>
	</ul>
</div>
<div>
	<p>Tabindex 1</p>
	<ul>
		<li><a title="Min første lenke" href="#" tabindex="1">Første lenke</a></li>
		<li><a title="Min andre lenke" href="#" tabindex="1">Andre lenke</a></li>
		<li><a title="Min tredje lenke" href="#" tabindex="1">Tredje lenke</a></li>
		<li><a title="Min fjerde lenke" href="#" tabindex="1">Fjerde lenke</a></li>
	</ul>
</div>
<div>
	<p>Ingen tabindex</p>
	<ul>
		<li><a title="Min første lenke" href="#">Første lenke</a></li>
		<li><a title="Min andre lenke" href="#">Andre lenke</a></li>
		<li><a title="Min tredje lenke" href="#">Tredje lenke</a></li>
		<li><a title="Min fjerde lenke" href="#">Fjerde lenke</a></li>
	</ul>
</div>
</body>
</html>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...