Dag 22: Bruke ekte lister (eller etterlikne dem skikkelig)

Anta at du har en leseliste med tre lenker: Slashdot, The Register, og dive into mark. Istedenfor en kjedelig sort kule, ønsker du et bilde med stilig utseende foran hver av dem. Hvordan gjør du det? Den vanligste løsningen er å bruke <img>-tagger foran hver lenke. Det virker, og kan enkelt bli gjort mer tilgjengelig med å legge til en passende alt-tekst på hvert bilde.

Imidlertid kan du også gå videre og bruke ekte liste-oppmerking (<ul> og <li>-tagger), for deretter å bruke CSS til å forandre den sorte kjedelige kulen til et bilde. I tillegg til å være «den riktige måten å gjøre det på» i en teoretisk forstand som du kan bry deg om eller ikke, har denne teknikken ytterligere tilgjengelighets-fordeler.

Jeg vil straks gi eksempler på begge teknikkene.

Hvem har nytte av det?

  1. Marius har nytte av det. Som vi så i går, viser Lynx filnavnet til ethvert bilde som ikke inneholder et alt-attributt.

  2. Jørgen har nytte av det. Links viser aldri bilder, og som standard viser den ingenting for bilder som ikke har en alt-tekst. Dette var akseptabelt i går når vi ønsket å ignorere avstandsbilder, men i dag ønsker vi å forsikre oss om at det er en indikasjon på at dette er en liste, så vi trenger den alt-teksten.

    Også, når Jørgen surfer med bilder avslått, vil Opera vise alt-teksten istedenfor en «manglende bilde»-boks. Og hvis du bruker den avanserte teknikken så vil Opera gjøre det enda bedre; den vender tilbake til å vise den normale sorte kulen istedenfor en «manglende bilde»-boks.

  3. Anne har nytte av det. Som vi så i går, leser JAWS filnavnet til ethvert bilde uten et alt-attributt. Lenkene ender opp med å forsvinne i et hav av irrelevante filnavn. Dette er det Anne hører:

    stilig kule dott gif lenke slashdot, stilig kule dott gif lenke the register, stilig kule dott gif lenke dive into mark

    Å tilby en asterisk (*) som alt-tekst hjelper veldig mye. JAWS vil se at bilde blir brukt som en kule, og meddeler det ikke. Imidlertid, Home Page Reader vil fremdeles meddele asterisk-en uttrykkelig, så brukere vil høre dette:

    asterisk lenke slashdot, asterisk lenke the register, asterisk lenke dive into mark

    Å bruke ekte listeoppmerking er det beste. Ettersom all den visuelle presentasjonen er i CSS-henvisningene, tilstopper ingenting av det siden, så både JAWS og Home Page Reader leser enkelt listen din for hva den er; en liste. Nå høres det slik ut:

    lenke slashdot, lenke the register, lenke dive into mark

Hvordan gjøre det

Hvis du har en leseliste som ser ut som dette:

<img src="/images/stiligkule.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/stiligkule.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/stiligkule.gif" width="8" height="8"> <a href="https://en.wikipedia.org/wiki/Mark_Pilgrim">dive into mark</a> <br>

Burde du tilby alt-attributter for alle dine kule-bilder. Bruk en asterisk som alt-tekst, for å simulere det listen ville sett ut som hvis du hadde brukt ekte listeoppmerking. (For å forhindre dette fra å vises som et verktøytips i visuelle nettlesere, burde du også tilby et tomt title-attributt.)

<img alt="*" title="" src="/images/stiligkule.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt="*" title="" src="/images/stiligkule.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt="*" title="" src="/images/stiligkule.gif" width="8" height="8"> <a href="https://en.wikipedia.org/wiki/Mark_Pilgrim">dive into mark</a> <br>

Hvordan gjøre det: Avansert

Den avanserte (og foretrukne) teknikken bruker CSS til å definere at bildet skal bli brukt som en kule i listen.

<style type="text/css">
ul.leseliste {
  list-style: url(/images/stiligkule.gif) disc;
}
</style>

I malen din kan du så skrive en egen liste ved å bruke ekte listeoppmerking:

<ul class="leseliste">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="https://en.wikipedia.org/wiki/Mark_Pilgrim">dive into mark</a></li>
</ul>

Resultat:

Etterskrift: ikke-kulede lister

En annen vanlig måte å lage en liste med lenker er med å ikke bruke bilder i det hele tatt, bare en haug med lenker, muligens høyrestilt, som dette:

<div align="hoyre">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="https://en.wikipedia.org/wiki/Mark_Pilgrim">dive into mark</a><br>
</div>

Dette kan også oppnås med CSS og ekte listeoppmerking:

<style type="text/css">
ul.leseliste {
  list-style: none;
  text-align: right;
}
</style>

Eller, hvis du ønsker venstrestilte lenker, kan du gjøre dette i stedet:

<style type="text/css">
ul.leseliste {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

Verken på den ene eller andre måten, så har ikke listeoppmerkingen forandret seg fra det forrige eksempelet:

<ul class="leseliste">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="https://en.wikipedia.org/wiki/Mark_Pilgrim">dive into mark</a></li>
</ul>

«list-style: none»-linjen fjerner den vanlige sorte kulen i visuelle nettlesere. Dette fungerer i alle nettlesere, til og med i Netscape 4. Takk til Tobias Schmidt for at han minnet meg på denne teknikken.

Les mer

 
<< Dag 21: Ignorere avstandsbilder | Innholdsfortegnelse | Dag 23: Tilby alternativ tekst til bilder >>