Hur skriver man ALT-texter på en hemsida?

Tillgänglighet

Den alternativa texten (alt text) används av skärmläsarmjukvaran för att hjälpa tillgängligheten, så att bilden kan förklaras för dem som annars inte skulle kunna komma åt den.

Sökmotorer indexerar bilder

Alt-texter ger också bättre bildkontext / beskrivningar för sökmotorerna, vilket hjälper dem att indexera bilden korrekt. Men det första och främsta syftet är alltid att förklara vad du ser i bilden och vad vi vill kommunicera för våra synskadade besökare. Tänk på syftet med bilden såväl som det är sammanhanget.

  • Första prioritet är alltid tillgänglighet, så förklara vad du faktiskt ser i bilden (inte varje detalj, men ge den stora bilden).
  • Även om tillgänglighet är av största vikt, om du kan lägga till SEO-termer utan att överkomplicera tillgängligt värde, så gör det. Detsamma gäller för alla kontekstualiseringar, så länge tillgängligheten inte äventyras är en viss (tänk "mindre är mer") sceninställning okej.
  • De ska vara korta och beskrivande, helst mellan 100-125 tecken inklusive mellanslag (men aldrig överstiga 125 tecken).
  • Alla alt-texter måste sluta i rätt skiljetecken (för alla syften och ändamål, fullständigt stopp).
  • Det bör inte finnas något "tomt utrymme" efter full stopp. Vänligen göra en vana att alltid placera markören i slutet av texten och trycka på “radera” på tangentbordet.
  • Försök att inkludera vilket produktnamn, typ och färg som helst för alla visade produkter där det är möjligt.
  • Alt-texter ska alltid vara unika. Kopiera inte befintliga texter från sidan eller liknande bilder.

Viktigt att tänka på när det man formulerar en ALT text

Obs: alt-texten ska alltid beskriva vad som finns i bilden, utom i fallet där bilden också är en länk (då bör alt-texten beskriva var länken leder till). Om det är en dekorativ bild (där bilden inte lägger till någon information till innehållet på sidan, men är rent där från dekorativ synvinkel), bör bilden inte ha en alt-text alls.

Exempel på ALT-text från Google

Google Material design (Nytt fönster) visar tydliga direktiv och exempel på hur man skriver en bra ALT text i relation till bilderna.

Example on how to write ALT-text with the Tokyo skyline as example.Good example.

Example of bad ALT text next to image of pratice.

Bad example.