Hvordan man skriver gode Alt tekst til billeder på din webside

Amazon.com menu er anvendelig uden billeder på grund af korrekt alt-tekst .

For at gøre websider tilgængelige, bruge alt-tekst til billeder.Det er det, vi altid har lært.Men der er gode og dårlige anvendelser af alt-tekst.Der er også tilfælde, hvor der ikke har nogen alt-tekst er faktisk det rigtige at gøre.

hvad du har brug

  • En webside med billeder
  • Din normale HTML ogbillede redigeringsværktøjer

Distinctions i Alt tekst

  1. Hvis der er behov alt-tekst, tilføje det som en egenskab ved img tag på din HTML.Det er simpelthen alt = "her er eksempel alt-tekst" skrevet som en del af IMG element.

  2. Formålet med alt-tekst er at forklare betydningen af ​​et billede, hvis billedet ikke vises.Kig på Amazon menuen billedet i begyndelsen af ​​artiklen.Alt tekst er, hvad du ser, når menuen Amazon.com ses uden billeder.Som du kan se, er menuen stadig fuldstændig brugbare og forståelige takket være ordentlig alt-tekst.

  3. Godt alt-tekst til noget, der er til at blive klikket på en menu skal sige det samme billedet siger.For eksempel, alt

    tekst til en knap, der hedder "Home" bør også sige "Home".Den alt-tekst erstatter billedet i indhold og funktion.

    For ikke-menu billeder, der er beregnet til at blive klikket, bør alt-tekst forklare formålet med klik.For eksempel, at et billede af en bog med et link købe det fra Amazon.com bør siger noget i retning af alt = "købe denne bog i amazon.com".

  4. Alt tekst til et billede, som giver indhold og mening til den side skal forklare indholdet eller betydningen leveres af billedet.

  5. Der er forskel mellem billeder, der giver oplysninger og indhold versus billeder, der er blot dekorative.For eksempel se på dette billede fra eBay.com siden.(Den alt-tekst vises ved hjælp af Firefox værktøjslinjen Web Developer.)

    Dette billede har alt-tekst beskriver hvad der vil ske , når brugeren klikker på billedet .
  6. Derimod se på et andet billede fra eBay.com.Her billedet er alene dekorative.Det tilføjer ingen betydning for nedenstående oplysninger det om andre eBay selskaber, derfor er det ikke behøver alt-tekst.

    En blot dekorativt billede behøver ingen alt-tekst
  7. Når du tilføjer et billede til en webside, der tilføjer intet indhold eller oplysninger til siden, simpelthen sat intet i alt-tekst, som denne alt = "".Læg ikke noget mellem anførselstegnene - ingen mellemrum, ingenting.En lydlige skærmlæser vil ignorere dette og ikke annoncere det.

  8. Hvis du kan, fjerne blot dekorative billeder fra HTML og tilføje dem til side ved hjælp af CSS baggrund regler.

    Når folk se sider med billeder fra, det er enten at spare tid, fordi deres browsere ikke vise billeder, eller fordi de bruger et hjælpemiddel, såsom en lydlig skærmlæser.

    Når dekorative billeder føjes til skærmen ved hjælp af CSS, er de ikke en del af indholdet af HTML overhovedet.Derfor er en bruger med billeder fra en eller anden grund ikke er generet af overflødige oplysninger om billeder, der ikke er indhold.

Ressourcer

  • Guild of Tilgængelige webdesignere - God Alt Tekst
48
0
3
Webdesign