Hoe te Schrijf Goede Alt Tekst voor de beelden op uw webpagina

Menu Amazon.com is bruikbaar zonder afbeeldingen vanwege goede alt-tekst .

om webpagina's toegankelijk te maken, gebruik alt-tekst voor afbeeldingen.Dat is wat we altijd onderwezen.Maar er zijn goede en slechte gebruik van alt-tekst.Er zijn ook gevallen waarin die geen alternatieve tekst is eigenlijk het juiste ding om te doen.

wat je nodig hebt

  • Een webpagina met beelden
  • Uw normale HTML enimage editing tools

Onderscheidingen in Alt Text

  1. Als alt-tekst nodig is, voegt het als een attribuut van de img-tag van uw HTML.Het is gewoon alt = "Hier is bijvoorbeeld alternatieve tekst" geschreven als onderdeel van het img element.

  2. Het doel van alt-tekst is om de betekenis van een beeld uit te leggen als de afbeelding niet wordt weergegeven.Kijk naar het menu van de Amazone aan het begin van het artikel.Alt-tekst is wat je ziet als het Amazon.com menu wordt bekeken zonder afbeeldingen.Zoals u kunt zien, het menu is nog volledig bruikbaar en begrijpelijk dankzij goede alt-tekst.

  3. Goed alt-tekst voor iets dat moet worden

    geklikt in een menu moet hetzelfde beeld zegt zeggen.Bijvoorbeeld, alt-tekst voor een knop die zegt "Home" moet ook zeggen: "Thuis."De alt-tekst vervangt de afbeelding in inhoud en functie.

    Voor niet-menu afbeeldingen die zijn bedoeld om te worden geklikt, moet de alternatieve tekst het doel van de klik te verklaren.Bijvoorbeeld een afbeelding van een boek met een link om het te kopen van Amazon.com zou zegt iets als alt = "dit boek te kopen bij amazon.com".

  4. Alt tekst voor een beeld dat inhoud en betekenis geeft aan de pagina moet de inhoud of de betekenis die door het beeld uit te leggen.

  5. Er is een onderscheid tussen de beelden die informatie en content versus beelden die zijn slechts decoratief.Bijvoorbeeld, kijk naar dit beeld van de eBay.com pagina.(De alt-tekst wordt weergegeven met behulp van de Firefox Web Developer toolbar.)

    Dit beeld heeft alt text detaillering wat er zal gebeuren wanneer de gebruiker op de afbeelding klikt.
  6. daarentegen kijken naar een ander beeld van eBay.com.Hier is het beeld alleen maar decoratief.Het voegt geen betekenis voor de informatie eronder over andere eBay-bedrijven, daarom is er geen alt-tekst nodig.

    Een louter decoratieve afbeelding heeft geen alt-tekst
  7. Wanneer u een afbeelding toevoegen aan een webpagina die geen inhoud of informatie aan de pagina toevoegt, simpel gezegd niets in de alt-tekst, zoals deze alt = "".Plaats niets tussen aanhalingstekens - geen spaties, niets.Een auditieve scherm lezer zal dit negeren en niet aankondigen.

  8. Als je kunt, verwijder alleen decoratieve beelden van de HTML en voeg ze toe aan de pagina met behulp van CSS achtergrond regels.

    Wanneer mensen foto's met beelden uit, het is ofwel om tijd te besparen, omdat hun browsers niet beelden weer te geven, of omdat ze met behulp van een hulpmiddel, zoals een auditief schermlezer.

    Als decoratieve afbeeldingen worden toegevoegd aan de display met CSS, zij geen deel van de inhoud van de HTML helemaal.Daarom is een gebruiker met beelden uit om welke reden wordt niet gehinderd door onnodige informatie over de beelden die niet tevreden zijn.

Resources

  • Gilde van toegankelijke Web Designers - Goede Alt Text
375
0
3
Web Design