Tilrettelegging av image-map for blinde

[madompa]

Vi lager nettside på skolen, og da må vi, selvfølgelig, lage siden i Dreamweaver -.-

Greit nok, fikk den i det minste til å validere. MEN læreren vår mener siden bør være tilrettelagt for de som er blinde (hvorfor skal en portefølje som for det meste består av bilder, tilrettelegges for noen som er blinde?)

I allefall, jeg har brukt Dreamwaver for alt det er godt for, og menyen min er laget med image-maps. Hvordan skal jeg fikse dette med tilrettelegging for de blinde, det hjalp ikke å putte en alt inn der?

 

[FrodeNilsen]

http://www.w3.org/TR/html401/struct/objects.html#edef-MAP

 

Area-elementet skulle trolig løse floken.

 

Du kan jo også spørre læreren om ett program du kan teste mot, for å se hvordan blinde opplever siden, eller hvilken standard han skal evaluere leslighet for blinde etter.

 

Blinde og dreamweaver går som hånd i brennende aske.

[Haraldson]

Area-elementet som forslag markup for meny, for hvordan tilrettelegge siden for blinde, må være noe av det dummeste jeg har hørt.

 

Selv om du bruker DW, er det ikke noe i veien for å bruke CSS. Menyen har denne strukturen:

 

ul

----li

--------a

----li

--------a

 

Så setter du display: block; på a-ene, høyde og bredde, bakgrunnsbilde osv. i CSS. Lenkene skal selvfølgelig inneholde tekst i tillegg til bilde-versjonene av teksten, så skjuler du teksten med CSS med høy negativ text-indent.

[j--]

Om du har en meny er det nesten alltid en liste med linker, og derfor vil ol/ul være det som er mest riktig, semantisk sett. Om man skalta det hele veien ut med at blinde skal kunne bruke siden på grei måte burde man legge opp en meny med listeelementer.

 

Om det går i WYSIWYG-delen av Dreamweaver er jeg usikker på.

[madompa]

Ja jeg vet jo at jeg bør bruke liste-tagger når jeg skal ha en meny på liste, men jeg har bildet nedenfor som "meny". Og i stedet for å slice opp bildet, tok jeg snarveien og brukte image-map. Alle medielærere synes jo alle slike fancy ting er fancy uansett så..

 

Takk Frode, skal sjekke den ut

 

 

 

 

 

Edit: Vet ikke helt om jeg skjønner hva jeg skal lete etter jeg. Jeg har aldri satt meg inn i image-mapping, og stoler blindt på DW når det gjelder det.

 

<img src="front_image.gif" alt="front image" border="0" usemap="#Map" />

<map name="Map" id="Map">
 <area shape="poly" coords="31,271,172,226,172,216,181,209,124,183,108,99,103,91,-1,102,1,243" href="web.html" alt="web" />
<area shape="poly" coords="172,269,186,273,191,288,207,293,231,285,237,273,256,270,261,252,262,227,254,216,240,20
,222,202,214,207,186,208,171,213,173,220" href="foto.html" alt="foto" />
<area shape="poly" coords="261,189,262,168,288,163,281,142,259,147,239,138,227,141,224,156,222,171,230,184,243,19
" href="video.html" alt="video" />
<area shape="poly" coords="330,255,364,247,365,228,360,203,357,195,322,201,327,231,320,247,329,247" href="om_meg.html" alt="om_meg" />
<area shape="poly" coords="421,195,384,219,418,232,454,244,470,259,481,263,475,251,497,227,496,218,459,204" href="tekst.html" alt="tekst" />
<area shape="poly" coords="391,187,400,181,399,123,364,111,351,113,350,172" href="design.html" alt="Design" />
</map>

Endret 12. desember 2007 av madompa

[FrodeNilsen]

Det anbefales ikke å bruke map for blinde, egentlig anbefales ikke map i det hele tatt. Jeg tar pepperen tidligere i tråden som en missforståelse, jeg har bare påpekt at du har alt i area.

 

Se på koden, du har alt tekst der. Denne teksten vil vises som alternativ for bildet, når du bruker en nettleser uten bilder eller ikke kan se.

 

Du burde skrive alt tekst som gir mening. "Se mine design", "Se mine bilder", eller liknende kan fungere, men "design", "bilder", etc. vil fungere hvis det kommer klart frem av sammenhengen at dette er en navigeringsmeny.

 

Du har sikkert oppnåd der læreren mente. Men liste er det som er å foretrekke.

 

Jeg har ikke prøvd, men det skulle da gå ann å skrive en uordnet liste på normal måte, og benytte css for å oppnå det du har gjort, dog med firkantede link områder.

[Lokaltog]

Hva med å bare bruke rektangulære klikkbare områder? Da kan du bruke en vanlig ul, og bruke absolutt posisjonering for å plassere a-elementene riktig oppå de forskjellige tingene i menyen din. Teksten kan du skjule fra linkene med text-indent:-1000em.

[madompa]

Hva med å bare bruke rektangulære klikkbare områder? Da kan du bruke en vanlig ul, og bruke absolutt posisjonering for å plassere a-elementene riktig oppå de forskjellige tingene i menyen din. Teksten kan du skjule fra linkene med text-indent:-1000em.

Det vil vel bli veldig kronglete, da det er objektene som er klikkbare, ikke teksten.

 

 

Se på koden, du har alt tekst der. Denne teksten vil vises som alternativ for bildet, når du bruker en nettleser uten bilder eller ikke kan se.

Det jeg trodde også. Men alt-tekstene vil ikke vises når jeg skrur av bildevisning, i verken Safari, Opera eller Firefox. Mulig "blindeprogram" tolker det på riktig måte. Uansett, så lenge det ser bra ut på papiret så er det vel greit

 

Og den skal uansett være ferdig til i morgen, så det er ikke så mye endringer jeg har tid til å gjøre.

 

 

Edit: skrivefeil

Endret 12. desember 2007 av madompa

[Steinmann]

Du kan jo lage et rektangulært felt rundt bildet?

[madompa]

Du kan jo lage et rektangulært felt rundt bildet?

Tror jeg ikke helt skjønner hva du mener?

[FrodeNilsen]

Du kan jo lage et rektangulært felt rundt bildet?

Tror jeg ikke helt skjønner hva du mener?

 

Han mener nok at du skal lage en boks i css, med rektangulær størrelse. Denne skal plasseres over bakgrunnsbildet og skal fungere som link.

 

Du vil ikke mestre dette på noen timer, med mindre du har en glimrende lærer.

 

Opplegget er å lage en uordnet liste med ul-element. Elementene i listen har en link med link tekst.

 

Disse linkene gjøres om til bokser med fast bredde og høyde, derav rektangulære, som plasseres dit du vil ved å benytte absolutt posisjonering. Teksten i boksene, dvs. teksten som nøster under a-elementet forskyves slik at den kommer utenfor boksen, og vil da ikke synes. Boksen vil fremdeles være en link.

 

Du kan da lage en firkantet boks, eller rektangulær boks om du vil, som du kan plassere over objektene på siden din. Boksen fungerer da som en link.

[Steinmann]

Så boksen vil fungere som en link?

[mikk-]

Så boksen vil fungere som en link?

Ja? Hvis du oversetter "block" til "boks", så er vel det ganske riktig sagt? Kanskje snarere "boksen vil være en link", enda mer snarere "linken vil være en boks", men uansett.

 

CSS Imagemaps på A List Apart, selv om jeg er litt uenig i HTML-en som brukes der. Det skulle selvfølgelig blitt brukt lister.

[Steinmann]

Så boksen vil fungere som en link?

Ja? Hvis du oversetter "block" til "boks", så er vel det ganske riktig sagt? Kanskje snarere "boksen vil være en link", enda mer snarere "linken vil være en boks", men uansett.

 

CSS Imagemaps på A List Apart, selv om jeg er litt uenig i HTML-en som brukes der. Det skulle selvfølgelig blitt brukt lister.

Er jo en gammel artikkel.

[madompa]

Du kan jo lage et rektangulært felt rundt bildet?

Tror jeg ikke helt skjønner hva du mener?

 

Han mener nok at du skal lage en boks i css, med rektangulær størrelse. Denne skal plasseres over bakgrunnsbildet og skal fungere som link.

 

Du vil ikke mestre dette på noen timer, med mindre du har en glimrende lærer.

 

Opplegget er å lage en uordnet liste med ul-element. Elementene i listen har en link med link tekst.

 

Disse linkene gjøres om til bokser med fast bredde og høyde, derav rektangulære, som plasseres dit du vil ved å benytte absolutt posisjonering. Teksten i boksene, dvs. teksten som nøster under a-elementet forskyves slik at den kommer utenfor boksen, og vil da ikke synes. Boksen vil fremdeles være en link.

 

Du kan da lage en firkantet boks, eller rektangulær boks om du vil, som du kan plassere over objektene på siden din. Boksen fungerer da som en link.

Aha, da skjønner jeg hva du/han mener. Tror nok jeg kan nok css til klare det, men holder meg til image-mappen min jeg. Tror ikke en lærer som oppfordrer oss til å bruke tabeller for å sette opp layouten, har så mye han skal si når det gjelder det egentlig...

[mikk-]

Er jo en gammel artikkel.

Ja jaggu. Pre-kafé-days, faktisk.

[enden]

Aha, da skjønner jeg hva du/han mener. Tror nok jeg kan nok css til klare det, men holder meg til image-mappen min jeg. Tror ikke en lærer som oppfordrer oss til å bruke tabeller for å sette opp layouten, har så mye han skal si når det gjelder det egentlig...

Tja, leverer du en versjon som fungerer etter spesifikasjon, og en versjon som ser riktig ut når du har fjernet linken til stilarket samt argumenterer hvorfor dette er viktig så vipper du deg selv fra neste høyeste karakter til høyeste. Etter VGS holder det ikke å bare svare på en oppgave. Man skal vise at man har forstått bakgrunnen for det man gjør ikke ikke bare at man kan det. Like grei å gjøre det skikkelig med en gang