Bild, ljud och film
Använd gärna bild och film för att komplettera text. Men välj ditt visuella material med omsorg. Målet är alltid att underlätta för användaren. Bilder och videor ska samspela med texten.
När användare besöker våra webbsidor vill de så snabbt som möjligt få svar på sina frågor. Därför bör du undvika visuella element som till exempel stora bilder på ett sätt som distraherar eller försvårar för användaren att hitta rätt.
Bland instruktionerna på denna sida hittar du även information om hur du ser till att det innehåll du skapar blir tillgängligt för personer med funktionsnedsättningar.
Riktlinjer för bild
Du kan lägga upp bilder på två sätt. Med modulen bild kan du ladda upp en egen bild eller använda en bild från bildarkivet i Sitevision. Med modulen Bild från MediaflowPro kan du välja en bild direkt från universitetets bildbank att använda på din sida.
Guide för att lägga till och redigera bild
Välj bilder med omsorg
Bilder är till för att underlätta för användaren att ta till sig informationen. Om inte det syftet uppfylls är det bättre att inte ha bild alls. Undvik också stora bilder som försvårar för användaren att hitta rätt.
Försök att i möjligaste mån följa universitets riktlinjer för användning av bilder och illustrationer i kommunikationssyfte. Checklistan till höger är en sammanfattning av riktlinjerna.
Checklista för val av bild
Eftersträva:
- Autenticitet – känns bilden autentisk?
- Aktualitet – bilder äldre än fem år kan ge fel signaler eller kännas omoderna.
- Aktivitet – har bilden en tydlig aktivitet och är denna relevant?
- Tydligt fokus – jobba gärna med kort skärpedjup.
- Variation – ansikten behöver inte alltid synas.
- Kläder, hår – samtida uttryck.
Undvik:
- Undvik bildmetaforer – Uppsala universitet är en internationell miljö och metaforer missförstås lätt.
- Arrangerade bilder – konstlade bilder som inte känns autentiska.
- Röriga bakgrunder – bilden bör ha ett tydligt fokus.
- Bilder som dekoration – bilder bör ha relevans och tillföra något till sammanhanget.
- Bildmanipulering – använd inte bildmontage, retuschering eller filter för att ändra innehållet i en bild.
Alt-texter gör bilden begriplig vid vid uppläsning
Beskriv informationsbärande bilder med en alt-text (som i Sitevision heter bildbeskrivning) så att även synskadade kan förstå bilden. Med informationsbärande bilder menas bilder som förmedlar någon form av information, budskap eller känsla. Formulera alternativtexten beskrivande och koncist.
Så skriver du tillgängliga alt-texter
Beskriv alla bilder med alt-texter (som i Sitevision heter bildbeskrivningar). De bilder som inte behöver ha alt-texter är bilder som ligger i bakgrunden, i sidhuvudet och i sidfoten. Dessa kallas dekorativa. Alla andra bilder, dvs. alla bilder som du som redaktör lägger upp, ska ha alt-text.
- En alt-text ska så kortfattat som möjligt beskriva vad bilden föreställer.
- I fall där det är viktigt för sammanhanget ska även känslan i bilden framgå. Om du till exempel har valt att bildsätta en sida som handlar om hur roligt det är att läsa vid Uppsala universitet med en bild på leende studenter ska det framgå i alt-texten att studenterna ler.
- Om du beskriver känslan i bilden ska du undvika subjektiva beskrivningar. Skriv t.ex. ”studenter promenerar i universitetsparken en solig dag” i stället för att skriva att vädret är vackert. "Solig" är beskrivande, "vackert" är subjektivt.
- Om bilden är en illustration ska det framgå i alt-texten.
- Om du bildsätter till exempel en nyhet med en porträttbild på en person som du har intervjuat ska det stå: "Porträtt på Förnamn Efternamn". Du behöver inte beskriva några andra detaljer i bilden.
- När du skriver alt-texter till diagram ska insikten framgå. Du behöver inte beskriva alla detaljer.
- Tänk på att syftet med alt-texter alltid är att underlätta för användaren. Hur låter det när alternativtexten blir upppläst? Användarens behov och innehållets syfte avgör vilka detaljer du ska beskriva i texten.
- Om du väljer att lägga till bildtext som syns på sidan ska den skilja sig från alt-texten. Alt-texten ska beskriva bilden medan bildtexten ska innehålla kompletterande information.
Exempel:
Denna bild var publicerad på förstasidan på uu.se. Bilden innehåller många detaljer som inte alla kan beskrivas i alt-texten. Därför behövde redaktören formulera en alt-text som var tillräckligt beskrivande men inte för detaljerad. Alt-texten blev så här: "Illustration med olika motiv som för tankarna till vetenskap, så som VR-glasögon och lagerblad."
Denna bild var publicerad på en sida som handlar om universitetets historia. Redaktören valde att bildsätta texten om kända alumner med två bilder som visar hur Celsiushuset har förändrats med tiden. Bildtexten kompletterar det övriga innehållet med extra information: "Uppsalaalumnen Anders Celsius, som är mest känd för den hundragradiga temperaturskalan, grundade också Uppsalas första observatorium. Den nedre delen är bevarad och ligger på Svartbäcksgatan". Alt-texten beskriver det som i det här sammanhanget är relevant: "Ritning av Celsiushuset från 1700-talet bredvid foto på Celsiushuset idag."
Dekorativa bilder
En bild som inte tillför något för förståelsen av sidan är dekorativ och ska inte förses med alt-text. Dekorativa bilder ska i regel undvikas.
För att avgöra om en bild är dekorativ eller inte kan du fråga dig själv vad du skulle säga om du beskrev webbsidans innehåll för någon. Om du helt hoppar över bilden är den troligen dekorativ.
Bilder i modulen Puff ska oftast INTE ha alt-text eftersom detta riskerar att störa för den som navigerar en sida med hjälp av skärmläsare.
Undvik text i bild
Skärmläsare kan inte uppfatta text som är en del av en bild. Undantag är diagram, logotyper och andra bilder där den visuella presentationen av text är av avgörande betydelse för att bildens syfte ska uppnås, till exempel skärmklipp som visar hur en digital resurs ska se ut på skärm.
Bilder ska ha rätt storlek och proportioner
För att webben ska ha ett enhetligt och snyggt utseende är det viktigt att de har rätt proportioner. Det finns ett antal fördefinerade visningsstorlekar (mäts i pixlar) att välja bland i bildmoduler vilket gör det lätt för dig som redaktör att vilja bild. Observera att du själv behöver se till att bilden har rätt proportioner
För att bilden ska bli bra även på högupplästa skärmar behöver bildens uppladdningsstorlek vara dubbelt så stor som visningsstorleken.
Guide för bildstorlekar och bildproportioner
Bilder ska inte ta för stort utrymme
Utöver bildens pixelstorlek är det viktigt att den inte tar för stor plats i Sitevisions bildarkiv. Högupplösta bilder får inte förekomma där över huvud taget. De största bilderna som är tillåtna är max 2000 pixlar på längsta sidan. Bilder ska ta upp så lite utrymme som möjligt, en tumregel är ca 100 kb.
Rekommendationen är också att konvertera bilderna till formatet WebP för att ytterligare få ner filstorleken.
Guide för att minska bildens filstorlek
Opublicerade bilder får inte finnas i Sitevisions bildarkiv
I Sitevisions bildarkiv ska endast bilder som faktiskt visas på webben finnas. Så fort en bild byts ut eller slutar användas ska den rensas bort från Sitevision. Vi har ett begränsat och gemensamt utrymme som snabbt tar slut om vi inte hjälps åt att hålla det städat.
Ha som rutin att alltid ta bort den gamla bilden när den ersätts med en ny.
Se över, rensa och byt ut bilder regelbundet
Ett bra sätt att se till att följa bildriktlinjerna och att hålla ordning och reda i Sitevisions bildarkiv är att ha rutiner. Ett bra sätt kan vara att alltid se över bilderna på sidan när du får ett påminnelsemejl om att en sida behöver uppdateras genom att följa detta:
- Är bilden aktuell, autentisk och följer riktlinjerna i övrigt?
- Tillför bilden något för förståelsen av sidan? Om inte kan du överväga att ta bort bilden.
- Har bilden lagom stor filstorlek eller kan den minskas? Se över pixelstorlek och filstorlek.
- Är bilden publicerad på webben eller ligger den kvarglömd?.
Har du tillstånd att använda bilden?
Använd endast material där alla rättigheter finns på plats och ange alltid upphovsperson.
Beställare och användare av bilder och musik ansvarar för att dessa får användas i det syfte det är tänkt och att inga personer är med på bild mot sin vilja.
Om inte annat är avtalat är det fotografen eller illustratören som i ekonomisk mening äger bilden och om den publiceras utan tillstånd kan det vara ett brott mot upphovsrätten och medföra skadestånd.
Om du köper bilder från bildbyråer eller använder bilder som är gratis och nedladdade från internet är det du som har ansvar för att användarvillkoren uppfyllts inför en publicering.
I anslutning till fotografier och illustrationer som publiceras på universitetets webbsidor eller i tryckta medier ska fotografens och illustratörens namn alltid anges.
Bilder och illustrationer som har tagits fram med hjälp av AI-teknik anges som "AI-genererad bild".
Riktlinjer för film
När du publicerar videoklipp på webben är det viktigt att de inte är för långa och att de kan uppfattas av personer med syn- och hörselnedsättningar.
Filmer ska ha undertext
Beskriv alla betydelsebärande ljud i text. Om till exempel en telefon ringer ska det stå i undertexterna. Texten ska vara på samma språk som det talade i videon.
Anlita upphandlat företag för undertextning
Studium och Youtube har en funktion för automatisk textning. Men det blir ungefär 80 procent rätt. Därför är det bäst att beställa undertextning.
Syntolka alla betydelsebärande visuella element
Det ska finnas ett ljudspår som förklarar vad som händer i bild. Syntolkning behövs inte om allt av betydelse är förklarat med ljud, till exempel om en föreläsare som visar en powerpointpresentation berättar vad varje bild föreställer.
Se film om syntolkning på webbriktlinjer.se
Ha inte för långa filmer
Längden beror på filmens syfte:
- Videor som uppmanar till handling: 15-60 sekunder.
- Videor som underhåller: 30-90 sekunder.
- Videor som undervisar eller förklarar: 1-3 minuter.
- Om du vill visa en längre föreläsning eller liknande kan du lägga det på en webbsida om det stämmer överens med sidans syfte. Annars ska videon ligga på universitetets Youtubekanal.
Riktlinjer för ljud
Precis som film måste också ljud göras tillgängligt för personer med hörselnedsättningar.
Transkribera poddar
Hela podden ska finnas i textversion. Sammanfattning räcker inte. Lägg upp textversionen av podden i anslutning till ljudfilen på webbsidan.
Alla poddar som publiceras efter 2020-09-22 måste transkriberas.
Guide för att lägga till ljudfil
Kontakt
- Läs gärna våra guider och riktlinjer eller besök våra webbstugor i första hand.
- Guider
- Webbstugor
- Kontakta it-supporten eller webbredaktionen