Färg, form och media
I det här avsnittet finns de anvisningar som guidar oss i hur vi använder färg, form och media på stadens webbplatser.
- Textformatering och typografi
- Färg på webben
- Bild, ljud och rörlig media
- Pictogram och illustrationer
- Diagram och tabeller
- Knappar
Textformatering och typografi
Rubriker
Rubriker ska skrivas med hjälp av rubrikformateringar: h1, h2 och så vidare. Rubrikerna skrivs i hierarkisk ordning, med ett steg mellan varje rubrik. Det betyder att h1 ska följas av h2, h2 av h3 och så vidare. Detsamma gäller i omvänd ordning: om du efter en underrubrik i h3 behöver en ny huvudrubrik används h2. På så vis blir sidorna lättlästa, sökoptimerade och tillgänglighetsanpassade.
Ingresser
Textens första stycke, ingressen, ska innehålla det viktigaste i texten och ska med några meningar sammanfatta innehållet i den. Ingressen bör även innehålla nyckelord om det som texten handlar om för att förbättra sökoptimeringen.
Typografi
Staden använder typsnittet Helsingborg Sans för rubriker och Roboto för brödtext. I vår webbplattform är dessa teckensnitt standard och ska inte ändras.
Läs mer om typografi på varumärkesplattformens webbplats.
Färg på webben
Kontraster
För att stadens webbplatser ska vara tillgänglighetsanpassade utformas de med tillräckliga kontraster. Det betyder att förgrund och bakgrund måste ha ett kontrastvärde på minst 4,5:1. Det gäller dock inte:
- Stor text. För stor text räcker ett kontrastvärde på minst 3:1. Stor text avser text i storleken 24 pixlar, eller 19 pixlar om den är fetstilt.
- Logotyper. Text som är en del av logotyp eller varumärke har inget krav för kontrast.
Du kan mäta kontrastvärdet med hjälp av verktyget Contrast Checker.
Färg som information
Färg får inte användas som det enda visuella sättet att förmedla information, eftersom vissa användare inte kan uppfatta färgskillnader. Färgskillnader kompletteras därför med exempelvis text, mönster eller på annat sätt.
Exempel på hur färg kompletterats med ikon och text.
Med verktyget RGBlind kan du testa hur din webbplats upplevs av en färgblind person.
Bild, ljud och rörlig media
Innehåll som inte är text, exempelvis bild, animationer, diagram, ljud och video, ska beskrivas med text. Skälet är att de som använder skärmläsare behöver sådana beskrivningar.
Tänk på att bilder, ljud och rörlig media som innehåller personuppgifter omfattas av GDPR. Läs mer om GDPR på webben.
Bild
Bilder ska bara användas när de tillför något till det övriga innehållet. Bilder som används på våra webbplatser ska följa stadens bildmanér.
Genrebilder kan användas för att skapa en känsla, eller när bilden fungerar som komplement. Men de bör undvikas när bilden har ett informativt syfte, eftersom de riskerar att bli vilseledande.
Bilder som tillför information som är värdefull för användaren ska ha en alt-text. Detta för att personer som använder skärmläsare ska kunna ta del av innehållet.
Text får inte publiceras i bildformat. Detta eftersom det gör det omöjligt för användare att anpassa texten, till exempel genom att förstora den eller ändra för- och bakgrundsfärg. Detta gäller inte logotyper eller bilder där texten är avgörande för att bildens syfte ska uppnås, till exempel i en skärmdump.
Om du vet vem som är upphovsman till en bild eller illustration, bör du så långt det är möjligt ange dennes namn i bildtexten. Detsamma gäller ccby-bilder. Om du använder bilder från bildtjänster så som Shutterstock eller Pixabay, ska du handla i enighet med företagets önskan om erkännande. Bilder med CC0-licens kan användas utan att ange upphovsmannens namn. Du kan läsa mer om bildhantering på stadens intranät.
För att bilder ska visas korrekt måste de optimeras efter det webbpubliceringsverktyg du använder. Du kan läsa mer om vilka bildstorlekar och bildproportioner som används i stadens webbplattform i lathunden. Undvik att presentera bilder i kollage, eftersom de inte visas korrekt vid olika skärmupplösningar.
Ljud och rörlig media
Film som publiceras på våra webbplatser ska följa stadens filmmanér. Film som produceras av kommunanställda ska laddas upp på något av stadens Youtube-konton. Har du frågor som rör dessa, kontakta stadens ansvarig för sociala medier.
Video och animationer som har informationsbärande ljud ska av tillgänglighetsskäl textas. Erbjud gärna även en textversion av videon. Det gör det möjligt för personer som använder skärm- eller punktskriftsläsare att ta till sig innehållet i egen takt. En textversion av film- eller ljudspår påverkar även sökoptimeringen positivt.
Video som innehåller information som inte framgår av dialog och miljöljud, och som är avgörande för att mottagaren ska förstå, ska syntolkas. Detta eftersom synskadade behöver förstå all information som visas i en video.
Direktsändning av rörlig media eller ljud ska textas, eller kompletteras med en textversion, senast 14 dagar efter sändningen om den går att ta del av i efterhand. Det ska också vara tydligt för användaren att det finns textning, till exempel genom en symbol, särskilt när användaren aktivt behöver ta fram texten.
Om du publicerar enbart ljud (exempelvis en podd) eller enbart film (en film utan ljud), ska det finnas ett alternativ som presenterar samma information på annat sätt, till exempel i text.
Ljud ska vara möjligt att pausa, stoppa eller sänka. Användare som lyssnar på en sida med hjälp av skärmläsare kan ha svårt att uppfatta innehållet om det samtidigt spelas upp andra ljud. Det kan också vara svårt att använda en tjänst om det inte går att stänga av ljud. Om det finns ljud som spelas upp automatiskt ska detta gå att stänga av separat.
Innehåll som blinkar, rör sig eller uppdateras utan att användaren bett om det ska upphöra efter max fem sekunder, alternativt kunna pausas, stoppas eller döljas av användaren. Undvik även snabbt blinkande, till exempel en filmsekvens med blinkande lampor eller en annons som blinkar för att dra till sig uppmärksamhet. Detta eftersom det kan framkalla epileptiska anfall hos vissa användare.
Pictogram och illustrationer
Pictogram ska ha en vägledande funktion och underlätta navigering. De får inte vara den enda navigeringsvägen utan måste kompletteras med text. I övrigt är reglerna för pictogram på webbplatser samma som för pictogram i tryck, läs mer på varumärkesplattformens webbplats .
Illustrationer ska fylla ett informativt syfte och kan användas när foton inte passar, till exempel för att förtydliga en process eller en instruktion. Reglerna för illustrationer på webbplatser är samma som för illustrationer i tryck. Om du vet vem som är upphovsman till en illustration ska du ange dennes namn i bildtexten.
Tänk på att innehåll som inte är text, även pictogram och illustrationer, ska beskrivas med text. Det gäller dock inte innehåll som endast används som dekoration.
Diagram och tabeller
För diagram på webbplatser gäller samma riktlinjer som för diagram i tryck, men på webbplatser måste de tillgänglighetsanpassas genom design med tillräckliga kontraster.
Tabeller används för att presentera data, till exempel statistik som visar en förändring över tid eller priser för olika tjänster. Sådan information blir tydligare och lättare att ta till sig om den presenteras i en tabell än i löpande text.
Klistra inte in tabeller som skapats i andra program än stadens webbpubliceringsprogram. Vi klistrar heller inte in bilder av tabeller, eftersom bild inte ska innehålla text.
Knappar
Knappar används när besökaren uppmanas att göra något, exempelvis Skicka eller Visa. Återkommande funktioner, så som knappar eller ikoner, ska namnges och beskrivas på samma sätt. Det innebär till exempel att en skicka-knapp heter samma sak på hela webbplatsen, inte Skicka på en sida och Sänd på en annan.