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).