Navigering - listans vara eller icke vara

Simplequiz för ju ett vettigt resonemang att luta sig mot när man är osäker hur saker och ting bör presenteras.

dAEk^ skrev:

Kan du ge exempel på när en lista inte skall användas eller där det inte är optimalt att använda den istället för vanliga länkar?

<ul> bör inte användas när dess innehåll inte är en lista. Vad som är en lista kan förstås debatteras.

dAEk^ skrev:

På vilket sätt är |(eller annan avskiljare) relevant för innehållet?

På samma sätt som andra skiljetecken är relevant för innehållet, såsom komma och punkt. Om man har ett stycke med vissa bitar som man vill avskilja från varandra är det vanligt att avskilja dem med "|".

dAEk^ skrev:

Är inte menyn att betraktas som en navigeringslista i ett dokument?

Det kan betraktas så, ja, men det kan också betraktas med ett stycke med länkar, eller som nånting annat. Det beror på betraktaren.

dAEk^ skrev:

Vad är mest användbart för skärmläsare - en lista eller ett gäng länkar uppradade efter varandra, dessutom med ett "onödigt" skiljetecken?

Skiljetecknet är inte direkt onödigt. Men vissa skärmläsare kan ställas in hur detaljrikt de ska läsa listor, tex kan de säga hur många punter som finns i listan innan den läser listan.

dAEk^ skrev:

Vad är mest användbart för en textbaserad browser?

Jag tror att det inte spelar så stor roll, men en lista ofta upp mer vertikal plats än ett stycke med länkar.

dAEk^ skrev:

Vad är det bättre alternativet ur tex Googles ögon?

Ingen aning.

dAEk^ skrev:

Är det inte bättre att implementera en lista istället för statisk html? Mha css kan man sedan styla om listan tills man hittar något man är nöjd med, vare sig det är en horisontell eller vertikal mojäng man är ute efter.

<ul> är mer flexibel när det gäller CSS, så ur den synvinkeln är det bättre.

zcorpan, du som vet det mesta i ämnet. Hur är det rent semantiskt?

Låt säga att vi har en toppmeny (typen av avskiljare kan vi egentligen bortse ifrån):

Alternativ 1 | Alternativ 2 | Alternativ 3 | Alternativ 4

och en vänstermeny:

Alternativ 1
Alternativ 2
Alternativ 3
Alternativ 4

Semenatiskt sett, hur utformar man dessa menyer (var för sig) bäst med HTML och CSS?

Det är lite svårt att säga utan kontext. Vad är en toppmeny? Vad är en vänstermeny? Är toppmenyn huvudavdelningar och vänstermenyn underavdelningar (till någon av huvudavdelningarna i toppmenyn)? I så fall kanske vänstermenyn är en nästad lista till toppmenyn, ungefär såhär (om vänstermenyn är underavdelning till "Alternativ 2" i toppmenyn):

<ul class="nav">
 <li>Alternativ 1</li>
 <li>Alternativ 2
  <ul>
   <li>Alternativ 1</li>
   <li>Alternativ 2</li>
   <li>Alternativ 3</li>
   <li>Alternativ 4</li>
  </ul>
 </li>
 <li>Alternativ 3</li>
 <li>Alternativ 4</li>
</ul>

.nav > * { display:inline; }
.nav > :not(:first-child)::before { content:" | "; }
.nav > * > ul { position:absolute; left:0; }

Tack för er input. :)

zcorpan skrev:

På samma sätt som andra skiljetecken är relevant för innehållet, såsom komma och punkt. Om man har ett stycke med vissa bitar som man vill avskilja från varandra är det vanligt att avskilja dem med "|".

Hur ska man tolka "|"? Punkt betyder ju att slut på satsen, komma betyder att man skall ta ett litet andrum mellan 2 meningar men vad står pipeline för? Det hör kanske inte diskussionen till men det stoppar inte mig i mina funderingar. :)
Om man nu måste använda sig av skiljetecken i html-koden skulle jag nog hellre rekommendera kommatecknet så att användarna med skärmläsare får en chans att hänga med. Det är ingen höjdare att lyssna på när Jaws-gubben rabblar på, länk efter länk efter länk utan pause. Men då har vi ju problemet att det "inte ser snyggt ut" för oss seende...
/red: Kan man inte dra en parallell med <br/>-taggen? Man kan se en paragraf som ett stycke men även som två raders mellanrum(br br). Eller är jag ute och cyklar nu??

zcorpan skrev:

Det kan betraktas så, ja, men det kan också betraktas med ett stycke med länkar, eller som nånting annat. Det beror på betraktaren.

Ett stycke länkar uppradade, en efter en... är inte det samma sak som en lista så säg? Jag menar, har du ett gäng "items" en efter en, utan annan information som kopplar dem samman, då är det en lista. I alla fall ur mina ögon sett, här och nu. Varför vill man ha ett stycke där innehållet inte verkar vettigt, annat än "bara för att" eller "för att det är enklast så"?
Tänker jag för mycket i samma banor får ni gärna upplysa mig, gärna med exempel då det brukar fastna bäst då. (Y)

zcorpan skrev:

Skiljetecknet är inte direkt onödigt. Men vissa skärmläsare kan ställas in hur detaljrikt de ska läsa listor, tex kan de säga hur många punter som finns i listan innan den läser listan.

Jupp, det vet jag. :) Men om man ska tänka så, kan man inte avsluta varje stycke med ".|" i sådana fall? Om det ändå går att stänga av så... Ursäkta mitt kanske lite löjliga exempel, jag kom tyvärr inte på något bättre i skrivande stund. Dessutom finns det säkert tillfällen då det blir knas på andra håll, tex vid mattetal(*,/,-,+), pris(:-)) osv. Allt bara för att det ska se bra ut på skärmen och utan att det egentligen tillför något. Me not like! :OO

zcorpan skrev:

Jag tror att det inte spelar så stor roll, men en lista ofta upp mer vertikal plats än ett stycke med länkar.

Vilken mardröm det skulle vara annars. Tänk att försöka följa en lista med fler nivåer. Ugha! :)

zcorpan skrev:

Det är lite svårt att säga utan kontext. Vad är en toppmeny? Vad är en vänstermeny? Är toppmenyn huvudavdelningar och vänstermenyn underavdelningar (till någon av huvudavdelningarna i toppmenyn)?

Sorry, jag var lite otydlig. Med var för sig menade jag att man antingen använde en toppmeny eller en vänstermeny som huvudmeny. :)

dAEk^ skrev:

Hur ska man tolka "|"?

Det beror på sammanhanget, men i det här sammanhanget skulle jag tolka det som "eller".

dAEk^ skrev:

Punkt betyder ju att slut på satsen,

Punkt används också vid vissa förkortningar och vid IP-nummer, och andra sammanhang.

dAEk^ skrev:

komma betyder att man skall ta ett litet andrum mellan 2 meningar

Jag trodde att punkt användes efter meningar och komma efter en sats, men hur som helst kan komma användas i andra sammanhang, som tex i nummer som har decimaler.

dAEk^ skrev:

Om man nu måste använda sig av skiljetecken i html-koden skulle jag nog hellre rekommendera kommatecknet så att användarna med skärmläsare får en chans att hänga med. Det är ingen höjdare att lyssna på när Jaws-gubben rabblar på, länk efter länk efter länk utan pause. Men då har vi ju problemet att det "inte ser snyggt ut" för oss seende...
/red: Kan man inte dra en parallell med <br/>-taggen? Man kan se en paragraf som ett stycke men även som två raders mellanrum(br br). Eller är jag ute och cyklar nu??

Skärmläsare kan uttala "|"; jag har för mig att JAWS säger "vertical bar", och IBM HPR säger bara "bar", men det kanske också går att ställa in vilka tecken som ska uttalas och inte. Det finns heller inget som hindrar skärmläsare från att göra en paus vid <br>, men om man har två stycken borde man märka upp dem med två <p>, eftersom två radbrytningar inte betyder nytt stycke.

dAEk^ skrev:

Ett stycke länkar uppradade, en efter en... är inte det samma sak som en lista så säg? Jag menar, har du ett gäng "items" en efter en, utan annan information som kopplar dem samman, då är det en lista. I alla fall ur mina ögon sett, här och nu.

Som sagt, det är upp till betraktaren, men jag håller med dig att det är nog en lista och inte ett stycke.

dAEk^ skrev:

Jupp, det vet jag. :) Men om man ska tänka så, kan man inte avsluta varje stycke med ".|" i sådana fall?

Jag känner inte till någon vedertagen konvention som föreslår användandet av ".|" efter stycken. Varför skulle man använda det?

dAEk^ skrev:

Dessutom finns det säkert tillfällen då det blir knas på andra håll, tex vid mattetal(*,/,-,+), pris(:-)) osv. Allt bara för att det ska se bra ut på skärmen och utan att det egentligen tillför något. Me not like! :OO

Det här är redan situationen med komma och punkt. Ska vi sluta använda komma och punkt och hitta på nya HTML-element för meningar och satser?

<p><sentence><clause>Dessutom finns det säkert tillfällen då det blir 
knas på andra håll</clause> <clause>tex vid mattetal<paranthesis>
<clause>*</clause><clause>/</clause><clause>-</clause><clause>+</clause>
</paranthesis></clause> <clause>pris<paranthesis><clause>:-)</clause>
</paranthesis> osv</clause></sentence> <sentence><clause>Allt för att 
det ska se bra ut på skärmen utan att det egentligen tillför något
</clause></sentence> <sentence lang="en"><clause><strong>Me not like
</strong></clause></sentence></p>

dAEk^ skrev:

Vilken mardröm det skulle vara annars. Tänk att försöka följa en lista med fler nivåer. Ugha! :)

Jag kan tänka att det går med paranteser, men om man tycker att det är en lista man har borde man använda <ul>, och tycker man att det är ett stycke man har borde man använda <p>. Det jag tycker är en lista kanske nån annan tycker är ett stycke; författare av webbsidor är sällan överrens om vad som är vad. :)

K@llen skrev:

Sorry, jag var lite otydlig. Med var för sig menade jag att man antingen använde en toppmeny eller en vänstermeny som huvudmeny. :)

Ok, isf har de samma betydelse och bör märkas upp på samma sätt.

Oops, nu vet man att det inte är nå bra att editera inlägg när man är halvt död av trötthet, all text försvann?!

zcorpan skrev:

Punkt används också vid vissa förkortningar och vid IP-nummer, och andra sammanhang.
Jag trodde att punkt användes efter meningar och komma efter en sats, men hur som helst kan komma användas i andra sammanhang, som tex i nummer som har decimaler.

Jaja, jag drog bara ett par snabba och slarvigt formulerade exempel...

zcorpan skrev:

Skärmläsare kan uttala "|"; jag har för mig att JAWS säger "vertical bar", och IBM HPR säger bara "bar", men det kanske också går att ställa in vilka tecken som ska uttalas och inte.

Det gäller väl bara senare versioner av Jaws dvs från och med 6:an? Jag har inget minne av att gamla 4:an uttalade "vertical bar" men det kanske den gjorde då. Det förändrar inte det faktumet att vertikala streck inte tillför innehållet något.

zcorpan skrev:

Det finns heller inget som hindrar skärmläsare från att göra en paus vid <br>, men om man har två stycken borde man märka upp dem med två <p>, eftersom två radbrytningar inte betyder nytt stycke.

<br><br> betyder inte ny paragraf och "|" betyder inte menyavskiljare. Ja, jag vet att det verkar vara vedertaget att använda "|" på så vis men då ska man komma ihåg att det var okej att använda tabeller för layout för bara några år sedan. ;)

Vi tar ett exempel: Säg att vi har ett omröstningssystem som ser ut som ett liggande a4-papper. Frågan är placerad till vänster av halvan och alternativen är uppradade till höger.
Vore det "rätt" att använda ett "|"-tecken för att avgränsa frågan och alternativen? Kanske till och med att man vill ha in en "|" mellan varje radiobutton och dess text(label). Varför? Varför inte?
Anvädning av "|" vid ort och datum vid en artikel? typ
Stockholm 2006-07-19 | Blablablabla....
bla bla bla bla blablablablabla blablabla etc

zcorpan skrev:

Jag känner inte till någon vedertagen konvention som föreslår användandet av ".|" efter stycken. Varför skulle man använda det?

Tjaa, jag vet inte. Mitt exempel är urdumt men ändå, kanske för att man tycker att en radbrytning blir tydligare så? Att det inte är någon konvention ännu spelar väl ingen roll, det var inte "|" i menysammanhang då det begav sig, eller?

Pipeline-tecknet tillför inte innehållet något vare sig i samband med menyer eller i mitt dumma exempel - det står jag fast vid! :)

/red; Såja. Nu har jag läst på lite och det visade sig råda lite delade meningar om det här med piplinan.

Här kommer två diskussioner från accessify forum som handlar om menyer och menyavskiljare:

• http://www.accessifyforum.com/viewtopic.php?t=4593
• http://www.accessifyforum.com/viewtopic.php?t=2747

Jag tycker fortfarande att en css-baserad lösning är bäst då "|" egentligen inte är relevant för innehållet. Fast det beror väl på hur man ser på saken...

Rolig diskussion, fantastiskt vad folk slösar tid tå meningslösheter :) Får väl göra ett inlägg i debatten.

Jag tänker mer av praktiska skäl. dAEk^ jobbar du på heltid som programmerare? Har du en chef? I alla fall ska jag förklara varför man använder en samling länkar separerade med |.

Om du har en text som ska flyta flyta från vänster till höger och består av följande:

en brun apa

Skulle du då sitta och pilla i flera timmar med att presentera det som

<ul>
	<li>apa<li>
	<li>brun<li>
	<li>en<li>
</ul>

och sedan ta bort listans naturliga egenskaper och "flyta" li elementen för att få det som du vill. Nu är du säkert mycket snabbare och duktigare än mig på det så det kanske inte skulle ta lika lång tid för dig. Men om du som jag har en chef eller kan tänka dig hur det är så kan du nog också förstå varför man inte alltid har tid till att göra saker perfekt.

Perfektion är vackert, jag beundrar det och strävar däråt hela tiden men i det verkliga livet så är sanningen att det inte går att få allting perfekt.

Meningslösheter? Genom att tänka igenom användandet av varje element kan man göra informationen lättare och smidigare att nå för användarna med färre irritationsmoment. Jag kan hålla med om att det kanske inte är eller skall vara av högsta prioritet alla gånger men jag ser inte hur det skulle vara meningslöst för det.

Jo, jag vet absolut hur en del chefer kan vara men det handlar också mycket om hur man presenterar sitt problem. Fast det hör inte diskussionen till; här ska vi snacka html och css - inte våra chefer.

CatZ skrev:

Perfektion är vackert, jag beundrar det och strävar däråt hela tiden men i det verkliga livet så är sanningen att det inte går att få allting perfekt.

Lustigt att du säger det nu när dina tidigare ord talar ett annat språk:

CatZ skrev:

Varför ska jag göra det? För att krångla till det? För att du säger det?

CatZ skrev:

Varför krångla till det med massa float och onödig kod när det räcker med några hederliga länkar? Varför lägga till alla ul och li och krångla i css när det räcker med a href? Tycker du är helt fel ute.

§jr ;)