Bilder och ikoner

Bilder och ikoner kan vara effektiva för att förstärka ett budskap. Bilder från universitetet kan du hitta i bildbanken och för ikoner rekommenderas designsystemets ikoner.

Tänk på att

  • Ange i princip alltid en alternativ text för bilder (om alternativa texten upprepar anslutande text så kan en tom alt-tagg, alt="", skrivas ut). W3C-Guide för alt-texter för olika typer av bilder.
  • Bilder som enbart är dekorativa, t.ex. ett mönster, bör inte vara <img/> utan inkluderas som bakgrundbilder i CSS.
  • Använd helst inte bilder för att visa text, om du ändå måste göra det, se då till att den alternativa texten återger den text som finns med på bilden.
  • Om systemet tillåter användare att ladda upp bilder så ska användaren starkt uppmanas och påminnas om att ange en alternativ text.
  • Var konsekvent och följ standarder när du använder ikoner. Utgå från designsystemets ikoner men om du inte hittar det du behöver kan du använda material icons.
  • För att bilder ska bli skarpa på högupplösta skärmar och vid inzoomning använd gärna svg, för fotografier och annan pixelbaserad grafik kan dubbel pixelstorlek (jämfört med uppvisningsstorleken) användas.
  • Komprimera bilder så att de inte blir för tunga att ladda.
  • Anpassa bilderna för olika skärmstorlekar, använd gärna mindre bilder för mindre skärmstorlekar. Se MDN Web Docs för beskrivning av hur du använder responsiva bilder.
  • Eventuella ovanliggande element och bakgrundsbilder ska ha god kontrast (använd gärna WebAIM:s Color Contrast Checker).

FÖLJ UPPSALA UNIVERSITET PÅ

facebook
instagram
youtube
linkedin