Image

Bilder kan användas för att förstärka information eller budskap, eller i dekorativa syften. Det finns ett antal fasta bildstorlekar vi använder för respektive varumärke. 

Open

1177

Open

Inera

 

Innehållsförteckning

Komponentkällor

Designspecifikation

Det finns flera bildstorlekar att använda och vissa kan ligga utfallande för att skapa mer dynamik i texten. Bildblocket innehåller en bild eller illustration, bildtext samt kan ha funktionalitet som exempelvis bildförstoring. 

Bildformatet rekommenderas ha proportionerna 3:2 (landscape). Bilder på artikelsidor finns i olika storlekar.

Det finns även funktionalitet för att dölja känsliga bilder.

Bildstorlekar generellt

Det finns
 tre storlekar som är gemensamma för både 1177 och Inera.

• Bredd 620 px (valfri höjd)

• Bredd 300 px (valfri höjd)

• Bredd 193 px (valfri höjd)

De två mindre formaten (300 och 193) kan även vara högerställda.

Varumärkesspecifika bildstorlekar

Inera

• Huvudbild 1260x400 px 
(fasta proportioner). 
 Används som omslagsbild till en artikel.

• Även formaten 300 px och 193 px används för utfallande bilder.

1177

• Huvudbild 833x555 px 
(fasta proportioner). 
 Används som omslagsbild 
 till en artikel.

• Utfallande 407 px (valfri höjd).

Observera att 1177 har specifika bildriktlinjer. Dessa hittar du på https://www.1177.se/riktlinjer-och-material/om-varumarket/Varumarkesmanual/visuell-identitet/bildriktlinjer-for-1177-vardguiden/ och ska följa om du arbetar med en 1177-tjänst som använder bilder.

Tillgänglighet

Se till att bilder som bär på någon form av information kan beskrivas för användare med skärmläsare. Är det icke-informativa/dekorativa bilder så kan de lämnas tomt (alt=””).

Riktlinje 115: Beskriv med text allt innehåll som inte är text
Användare som är beroende av till exempel skärmläsare och punktdisplay behöver beskrivningar av allt innehåll som inte är text. Det beskrivs i textalternativ eller alt-texter.

Det gäller till exempel:

• Bilder (förutom sådana som endast används för dekoration)

• Diagram

• Animationer

• Ljudsignaler

Se därför till att allt sådant innehåll beskrivs med hjälp av text, förutom i de undantagsfall som beskrivs i WCAG-kriteriet. Undantagen gäller framförallt sådana situationer där en beskrivande text skulle motverka innehållets syfte (till exempel när syftet med ett ljud är att testa användarens hörsel).

WCAG-riktlinje 1.1: Text alternatives
Tillhandahåll alternativ i form av text till allt icke-textbaserat innehåll så att det kan konverteras till format som användarna behöver, till exempel stor stil, punktskrift, tal, symboler eller enklare språk.

WCAG-riktlinje 1.1.1: Non-text content (Nivå A)
Allt innehåll som inte är text, som presenteras för användaren har ett textalternativ med samma syfte, utom i vissa situationer. Om innehåll som inte är text är:

• En navigeringsmetod/funktion eller accepterar inmatning från användare

• Tidsberoende media så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.

• Ett test eller en övning som inte skulle fungera om det visades som text, så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.

• Avsett för att ge en specifik sensorisk upplevelse så ger ett textalternativ åtminstone en beskrivning av det innehåll som inte är text.

• Rent dekorativt, bara används för visuell formatering eller inte presenteras för användare, så implementeras det på ett sätt så att det kan ignoreras av hjälpmedel.

• Är en CAPTCHA (länk beskriver specifika riktlinjer kring användning av dessa)

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.