Dag 21: Ignorere avstandsbilder

Mange designere bruker gjennomsiktige avstandsbilder til å kontrollere layoutet på sitt nettsted i visuelle nettlesere. Du kan bruke så mange du ønsker, men du trenger å uttrykkelig spesifisere et tomt alt-attributt på hvert avstandsbilde slik at ikke-visuelle nettlesere forstår å ignorere dem.

Hvem har nytte av det?

  1. Marius har nytte av det. Som standard, viser Lynx filnavnet til hvilket som helst bilde som ikke inneholder et alt-attributt. Mange populære webloggmaler inkluderer en del avstandsbilder, til og med før sidenavnet. Du legger ikke merke til dem i din visuelle nettleser, selvfølgelig, men dette er det Marius ser:

    [avstand.gif] [avstand.gif]
    [avstand.gif]
    [avstand.gif]
    Velkommen til hjemmesiden min
    [ciblueTittel2.gif]
    
    [ciblueKurve2.gif]
  2. Anne har nytte av det. Som standard, leser JAWS filnavnet til hvilket som helst bilde som ikke inneholder et alt-attributt. Hvis du trodde Marius var irritert, forestill deg hvor frustrerende det er for Anne å høre dette:

    grafikk avstand prikk gif grafikk avstand prikk gif grafikk avstand prikk gif grafikk avstand prikk gif velkommen til hjemmesiden min grafikk ciblue tittel to prikk gif grafikk ciblue kurve to prikk gif

    Hvis du introduserte deg slik i det virkelige liv, ville ingen snakket med deg.

Hvordan gjøre det

Radio-brukere kan ta seg en fridag. Som på sist mandag, Radio genererer automatisk tomme alt-attributter for alle avstandsbilder. (Takk, Jake.) Hvis du ser i kilden til hjemmesiden din og du ikke ser alt="" på noen av avstandsbildene, oppdater Radio.root og publiser nettstedet ditt på nytt.

Brukere av andre publiseringsverktøy skulle se gjennom sin mal etter <img>-tagger med filnavn som «avstand.gif», «mellomrom.gif», «1.gif», eller hvilket som helst bilde som ser ut til å bli repetert flere ganger i malen, sannsynligvis med forskjellige width og height-attributter hver gang.

For eksempel, etter hvert avstandsbilde som ser ut som dette:

<img src="avstand.gif" width="1" height="10">

Endre det til dette:

<img src="avstand.gif" alt="" width="1" height="10">

Hvis du gjenbruker det samme avstandsbilde flere ganger, er det sannsynligvis enklest å gjøre dette med et globalt søk-og-erstatt.

Ikke-gjøre ting

  1. Ikke definer alt=" ". alt-attributtet burde være en tom streng, uten noe mellomrom.
  2. Ikke spesifiser et alt-attributt på <body>-taggen din, heller ikke hvis det definerer et bakgrunnsbilde. Dette bakgrunnsbildet blir alltid ignorert av ikke-visuelle nettlesere. Det ser slik ut:

    <body background="http://url/til/bilde.gif">

  3. Ikke spesifiser et alt-attributt på <td>-tagger, heller ikke hvis de definerer bakgrunnsbilder. Disse bakgrunnsbildene blir alltid ignorert av ikke-visuelle nettlesere. De ser slik ut:

    <td background="http://url/til/bilde.gif">

Les mer