alt attributt for ikke-tekstlig innhold

(Henvisende UWEM-test: 1.1_HTML_01)

Testinformasjon

Feil på grunn av

Det er funnet ikke-tekstlig innhold som mangler alternativ tekst.

Du har brukt et av de følgende ikke-tekstlige elementene

  • <img ...>
  • <area ...>
  • <input type='image' ...>
  • <applet ...>

uten å sørge for en passende alternativ tekst i ALT-attributtet.

Hvorfor dette vil være en hindring

Ikke alle brukere vil være i stand til å oppfatte ikke-tekstlig innhold dersom det ikke har en alternativ tekst:

  • Enkelte brukeragenter kan være ute av stand til å vise ikke-tekstlig innhold. I slike tilfeller vises den alternative teksten.
  • Synshemmede eller hørselshemmede bruker en rekke forskjellige teknologier som er i stand til å gjengi alternativ tekst på måter som er tilgjengelig for dem (f.eks. talesyntese).


WCAG1.0-beskrivelse
Selv om enkelte personer ikke kan bruke bilder, filmklipp, lyder, programtillegg osv. direkte, kan de fortsatt bruke nettsider som inneholder tilsvarende informasjon til dette. Den tilsvarende informasjonen må tjene samme hensikt som det visuelle/lydbaserte innholdet. Alternativ tekst for et bilde av en pil som peker oppover, og som lenker til innholdsfortegnelsen, kan for eksempel være "Gå til innholdsfortegnelsen". I enkelte tilfeller bør tekstalternativet også beskrive utseendet til det visuelle innholdet (f.eks. for komplekse figurer, plakater eller diagram). Se http://www.w3.org/TR/WCAG10/#gl-provide-equivalents for mer informasjon

Løsning

Bruk et attributt alt=”KORT_MENINGSBÆRENDE_ALTERNATIV_TEKST” for elementet. Bruk en tom tekst for bilder som kun er til pynt (alt=””).

Referanse

Henvisning til WCAG 1.0-kontrollpunkt

1.1

"Ha alltid tilsvarende tekstalternativ til hvert ikke-tekstlige element (f.eks. ved å bruke «alt»- og «longdesc»-attributtet). Dette gjelder: bilder, grafiske representasjonar av tekst (inkludert symbol), bildekart og spesielle områder på disse, animasjoner (f.eks. animerte GIF-filer), appletter og andre programobjekt, ASCII-kunst, rammer, skript, bilder brukt som punktmerker, plassholdere, grafiske knapper, lyder (spilt med eller uten påvirkning av brukeren), separate lydfiler, filmklipp og lydspor til filmklipp." [Prioritet 1]
WCAG 1.0 Checkpoint 1.1

Henvisning til UWEM-test

1.1_HTML_01

Denne testen er sjekker at ikke-tekstlig innhold har alternativ tekst.

Beslektede krav fra DIFI/norge.no

1.1

Har nettstedet alternativ bildetekst (alt-tekst)?
norge.no requirement description 1.1

Eksempler

The alt attribute specifies an alternative, descriptive text for non-text content.

This is needed, if the non-text content can not be displayed (e.g. due to low network capacity, or browsers that do not support the format of the non-text content) or perceived (e.g. for search engines or people with visual impairments).

  • alt attribute for images

    The information contained in images can not be perceived by search engines or people with visual impairments, unless there is an alternative description available.

    Dårlig eksempel:
    <body>
    The information of the following image can not be perceived by all, bacause there is no alternative description available:
    <img src="images/eGovMonLogo.gif" width="185" height="40"   />
    </body>
    Godt eksempel:
    <body>
    The information of the following image is perceivable bacause of the alternative description:
    <img src="images/eGovMonLogo.gif" width="185" height="40" alt="eGovMon - eGovernment Monitor (Logo)" />
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
  • alt attribute for graphical buttons

    Images can be set to be submit buttons for forms. In this case, as with all images, an alternative text has to be specified, to make the information perceivable for all.

    Dårlig eksempel:
    <body>
    <h1>Subscribe to our newsletter</h1>
    <form action="subscribeNewsletter.php" method="post">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email" />
    <input type="image" src="images/subscribeNewsletter.jpg" width="100" height="30"   />
    </form>
    </body>
    Godt eksempel:
    <body>
    <h1>Subscribe to our newsletter</h1>
    <form action="subscribeNewsletter.php" method="post">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email" />
    <input type="image" src="images/subscribeNewsletter.jpg" width="100" height="30" alt="Subscribe to our Newsletter" />
    </form>
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
  • alt attributes for image maps

    Image maps are used to define clickable areas within images.
    As the visual information of the image-parts is not perceivable for visually impaired users or search engines, it is necessary to add an alternative text to the parts.

    Dårlig eksempel:
    <body>
    <img src ="solarSystem.jpg" width="400" height="250" alt="Solar System" usemap ="#planetmap" />
     
    <map name="planetmap">
    <area shape="circle" coords="0, 125, 80" href="sun.htm"   />
    <area shape="circle" coords="120, 125, 5" href="mercury.htm"   />
    <area shape="circle" coords="130, 125, 15" href="venus.htm"   />
    <area shape="circle" coords="170, 125, 13" href="earth.htm"   />
    </map>
     
    </body>
    Godt eksempel:
    <body>
    <img src ="solarSystem.jpg" width="400" height="250" alt="Solar System" usemap ="#planetmap" />
     
    <map name="planetmap">
    <area shape="circle" coords="0, 125, 80" href="sun.htm" alt="Sun" />
    <area shape="circle" coords="120, 125, 5" href="mercury.htm" alt="Mercury" />
    <area shape="circle" coords="130, 125, 15" href="venus.htm" alt="Venus" />
    <area shape="circle" coords="170, 125, 13" href="earth.htm" alt="Earth" />
    </map>
     
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
vis eksempelvis
skjul eksempelskjul