Hur kan jag göra min SmartWebsite mer tillgänglig?

Den 28 juni 2025 trädde [European Accessibility Act (EAA)] (https://mediemyndigheten.se/digital-inkludering---tillganglighet/nya-krav-pa-tillganglighet/) i kraft – ett viktigt steg för att stärka digital inkludering i hela Europa. Lagen påverkar många digitala tjänster och produkter, inklusive webbplatser. Vi vill hjälpa dig att göra din digitala närvaro tillgänglig för alla – oavsett förutsättningar.

Tillgänglighet handlar inte bara om att uppfylla lagkrav. Det är också en chans att nå fler och välkomna en bredare publik. I den här artikeln får du våra bästa tips för hur du gör din SmartWebsite tillgänglig och drar nytta av en mer inkluderande webbplats.

Öppna SmartWebsite

• Logga in på ditt STRATO-konto.

• Klicka på »Starta SmartWebsite« under SmartWebsite i paketöversikten.
  

• Kontrollpanelen öppnas i en ny flik. Klicka där på »Webbplats« → »Redigeraren«.
  

• Redigeraren öppnas också i en ny flik.
  

Lägg till bildbeskrivningar (Alt-text)

Alt-text är ett viktigt stöd för besökare som använder skärmläsare. Den gör det möjligt att ta del av innehållet på webbplatsen – även utan att se bilderna.
Därför rekommenderar vi att du lägger till alt-text för alla bilder som är relevanta för sidans innehåll. »Relevanta« bilder är sådana som hjälper besökaren att förstå syftet med sidan.
För dekorativa bilder – till exempel bakgrundsbilder – som inte tillför något till innehållet, bör du låta alt-texten vara tom. På så sätt stör de inte upplevelsen för den som navigerar med hjälp av skärmläsare.

Skapa alt-text för ett bildelement

• Klicka på »INNEHÅLL« i menyraden i SmartWebsite-redigeraren.
• För muspekaren över detaljområdet och klicka på ett bildelement. Då visas bildverktygsfältet.
• Klicka på »Detaljer« i verktygsfältet.
• Beskriv bildens innehåll i fältet »Alternativ text«. Eftersom dina besökare kanske inte kan se dina bilder (fullständigt) är det viktigt att beskriva bildens innehåll.

Skapa Alt-text för ett bildgalleri

• Klicka i menyraden i SmartWebsite-editorn på »INNEHÅLL«.
• För muspekaren över detaljområdet och klicka på ett gallerielement. Galleriöversikten visas.
• Klicka på den önskade bilden i förhandsgranskningen. De tillhörande detaljerna visas på höger sida.
• Klicka i detaljvyn i fältet »Alternativ text« för att beskriva bildens innehåll. Tänk alltid på att dina besökare kanske inte kan se bilderna fullständigt. Beskriv därför vad som syns på bilden.

Se över rubrikstrukturen på din webbplats

Rubrikstrukturen hjälper webbläsare och skärmläsare att förstå hur innehållet på din webbplats är uppbyggt och bör presenteras. Genom att använda rätt rubriktyper i logisk ordning skapar du en tydlig struktur.
Rubrikerna följer en hierarki från H1 (Rubrik 1) till H6 (Rubrik 6).

Rekommendationer för rubrikstruktur

När du strukturerar texten på din webbplats rekommenderar vi att du följer dessa riktlinjer:

• Rubrikerna bör vara beskrivande. De ska tydligt visa vad innehållet under handlar om.
• Om du vill radbryta en rubrik manuellt, använd kortkommandot »Shift + Retur«. Undvik att rubriken visas över två rader.
• Varje sida på din webbplats ska ha endast en H1-rubrik. Det är sidans huvudrubrik och ska stå överst.
• Nästa nivåer ( H2, H3, H4 och så vidare) ska användas i logisk ordning. Till exempel kan varje avsnitt (som Om oss eller Våra tjänster) ha en H2-rubrik.
• Underrubriker inom ett avsnitt märker du med H3. Om det behövs, fortsätt med H4, H5 och H6 i samma struktur.
• Den här hierarkin gör det enklare för besökare med synnedsättning att navigera mellan innehåll i rätt ordning.

Ändra rubriktyp

• Klicka på den rubrik du vill ändra (t. ex. H1, H2, H3 …).
• Välj alternativet "Rubriktyp (H1)" i verktygsfältet som visas.
• I dropdown-menyn som öppnas kan du välja ett alternativ från "Rubrik 1" (H1) till "Rubrik 6" (H6).
• Följ gärna rekommendationerna ovan för att skapa en tydlig och logisk rubrikstruktur.

Justera kontrasten mellan text och bakgrund

För besökare med nedsatt syn kan det vara svårt att skilja på text och bakgrund. Därför är det viktigt att kontrollera kontrasten på din webbplats – och justera den vid behov.

För att göra din SmartWebsite mer tillgänglig för olika synförutsättningar rekommenderar vi:

• Ett kontrastförhållande på minst 4,5: 1 för vanlig text och 3: 1 för större text.
• Minst 3:1 i kontrast för grafik och användargränssnitt – till exempel formulärfält och platshållare.

Tips:
Det finns flera kostnadsfria verktyg och tillägg till webbläsare – till exempel Silktide eller WAVE.
Dessa tillägg hjälper dig att kontrollera dina kontraster. Sök gärna på »kontrast checker tillgänglighet« eller liknande för att hitta ett tillägg som passar din webbläsare.

Justera färgkontraster

• Klicka på »DESIGN« i menyraden i SmartWebsite-redigeraren.
• Öppna alternativet »Färger«.
• Under »Kontrast« kan välja mellan »Låg«, »Medel« och »Hög«.
• Börja med att testa alternativet »Hög«.
• I många fall räcker det för att uppnå god tillgänglighet. Om inte – behöver du justera färgerna manuellt.

Justera färger i färgpaletter

• Klicka på »DESIGN« i menyraden i SmartWebsite-redigeraren.
• Öppna alternativet »Färger«.
• Klicka på fliken »Anpassad«.
• Här kan du justera varje accentfärg i paletten för att öka kontrasten efter behov.

Skapa en tillgänglighetsförklaring

En tillgänglighetsförklaring är en undersida på din webbplats. Där beskriver du vilka delar som är tillgängliga, vilka som inte är det – och varför.

Syftet är att ge en tydlig, öppen och hjälpsam bild av hur tillgänglig din webbplats är.

Viktigt!

En tillgänglighetsförklaring är inte ett juridiskt skydd. Att du till exempel skriver att du inte haft tid att skapa en rubrikstruktur skyddar dig inte från rättsliga följder.

Hur skapar jag en tillgänglighetsförklaring?

En tillgänglighetsförklaring behöver anpassas efter just din webbplats. Därför bör du använda en pålitlig och etablerad tjänst som är specialiserad på området.

Du hittar sådana verktyg enkelt via en sökning i en sökmotor. Använd sökord som ”tillgänglighetsförklaring generator” eller ”accessibility statement generator” följt av det språk du behöver – till exempel svenska, engelska, franska eller nederländska.

Skapa tillgängliga dokument

Om du erbjuder dokument för nedladdning på din webbplats bör du se till att de är tillgängligt utformade.

Info:

Eftersom PDF- och Word-dokument inte är produkter från STRATO, behöver du följa instruktionerna från respektive leverantör.

• För PDF-filer hittar du hjälp hos Adobe:
  Skapa och verifiera PDF-tillgänglighet, Acrobat Pro
• För Word-dokument (.docx) finns stöd hos Microsoft:
  Gör dina Word-dokument tillgängliga för personer med funktionsnedsättning - Microsoft Support

Kontrollera beskrivningar av textlänkar, knappar och externa inbäddningar

För besökare med nedsatt syn är det viktigt att skärmläsare tydligt kan förmedla syftet med en länk – oavsett om det gäller en textlänk, knapp eller inbäddat innehåll. Därför bör det alltid framgå vad länken leder till. Generiska texter som »Läs mer« eller »Nästa« säger inte tillräckligt för den som använder assisterande teknik.

Tips för tillgängliga länkar och knapptexter

• Länkar och knappar bör så tydligt som möjligt beskriva vad som händer när man klickar – till exempel:
  ”Ladda ner vår meny som Pdf” eller ”Gå till vår webbshop”."
• Undvik att använda samma text för flera olika länkar eller knappar.
• Självklart finns det undantag, men kom ihåg: Tydliga beskrivningar gör din webbplats mer användbar för alla.

Tips för tillgängliga beskrivningar av externa inbäddningar

• Skärmläsare har ofta svårt att tolka externa inbäddningar – som Google Maps, YouTube eller kod-snippets. Därför är det viktigt att ge dem en tydlig och beskrivande titel.
• För elementen Google Maps, YouTube och Kod hittar du fältet «Detaljer» där du kan ange en titel.
• Titeln ska förklara vad inbäddningen visar – till exempel: ”Här ser du en YouTube-video som presenterar våra produkter” eller ”På den här Google Maps-kartan ser du vår adress”.

Optimera texter och typsnitt

När du skapar tillgängligt innehåll är avståndet mellan textrader och stycken extra viktigt. Det gör texten lättare att läsa och förstå – särskilt för personer med dyslexi eller nedsatt syn.

Rekommendationer för textavstånd

Anpassa textavståndet med hänsyn till läsare som behöver extra utrymme för att kunna ta till sig innehållet i lugn och ro. Se till att dina texter följer dessa riktlinjer:

• Radavstånd: Minst 1,5 gånger teckenstorleken. Det förhindrar att rader flyter ihop och gör det lättare att följa texten rad för rad.
• Bokstavsavstånd: Justera teckenavståndet till minst 0,12 gånger teckenstorleken. Det underlättar läsningen – särskilt för personer med dyslexi.
• Styckeavstånd: Lämna minst dubbelt så stort mellanrum mellan två stycken som teckenstorleken. Det skapar tydlig struktur och bättre läsflöde.

Tillgängliga teckenstorlekar

För brödtext rekommenderas en minsta teckenstorlek på 16 pixlar.

Rubriker bör vara tydligt större för att markera hierarkin i innehållet.

Ju större texten är, desto viktigare är det med rätt avstånd – för att behålla god läsbarhet.

Anpassa typsnitt i ditt SmartWebsite-projekt

Fördefinierade typsnittstilar

SmartWebsite innehåller färdiga typsnittsstilar som du enkelt kan använda på din webbplats. Så här gör du för att välja en av dem:

• Gå till sektionen "DESIGN” i SmartWebsite-redigeraren och välj alternativet »Typsnitt«.
• I fältet »Typsnitt« kan du välja ett av de föreslagna typsnittspaketen. För varje stil visas vilken font som används för rubriker respektive brödtext – så att du enkelt ser skillnaden. Förhandsvisningen uppdateras automatiskt.
• Vid behov finns det möjlighet att justera teckenstorleken i tre nivåer. Storleksalternativen omfattar kategorierna »Liten« (S), »Medium« (M) och »Stor« (L).
• Genom att trycka på knappen »Publicera« tillämpas inställningarna på den berörda webbplatsen.

Användardefinierade typsnittsstilar

Med ett anpassat typsnitt kan du justera typsnittet för rubriker, brödtext och knappar var för sig. Dina anpassade stilar sparas automatiskt – och du kan när som helst ändra eller ta bort dem. Du hittar dem längst ned i listan med fördefinierade stilar.

• Gå till »DESIGN« i SmartWebsite-redigeraren och välj sedan »Typsnitt«. Klicka på »Lägg till font«.
• Välj teckensnittsfamiljen för varje möjligt elementtyp (rubriker, stycken och knappar) genom att ställa in önskat typsnitt i respektive urvalsfält.
• För mer detaljerade justeringar klickar du på länken »”Anpassad …« som visas under varje valfält.
• Klicka på »Publicera« för att spara och använda inställningarna på din webbplats.