Hur kan jag göra min hemsida i Hemsideprogrammet mer tillgänglig

En tillgänglig hemsida säkerställer att alla användare, inklusive personer med funktionsnedsättningar, kan navigera, förstå och interagera med ditt innehåll. Om du använder en hemsidebyggare kan du förbättra tillgängligheten genom att justera viktiga element och följa bästa praxis — som att lägga till alt-text till bilder och se till att hemsidans design och innehåll är tydligt strukturerade. I den här artikeln hittar du en checklista med rekommendationer och resurser.

Om du har några allmänna frågor om hemside-tillgänglighet kan du läsa vår guide: FAQ om tillgänglighet på hemsidor.

Obs!: På one.com gör vi vårt bästa för att tillhandahålla de verktyg som behövs för att du ska kunna bygga och underhålla en hemsida som uppfyller tillgänglighetskraven. Du är dock ytterst ansvarig för att uppfylla alla krav. Vi rekommenderar därför starkt att du sätter dig in i de lokala eller regionala lagarna för tillgänglighet, eftersom det kan finnas krav som gäller för dig men som inte tas upp i den här artikeln. 

Visuella element

Alt-texter för bilder, ikoner och grafik

Alt-text fungerar som en läsbar beskrivning av en bild och kan fungera som en ersättning om besökaren inte kan se den. Alt-texten kan läsas av en skärmläsare. Du hittar instruktioner om var du lägger till alt-text till bilder eller andra visuella element i dessa guider: 

Du behöver inte lägga till alt-text för bakgrundsbilder, eftersom dessa ofta bara tjänar dekorativa syften. Alt-text bör endast läggas till bilder som förmedlar viktigt innehåll, tjänar informationssyften eller kräver interaktion från besökaren. 

För att ange att en bild fungerar som en bild som hjälpmedel kan hoppa över kan du gå till SEO i bildinställningarna och dra reglaget Ange som dekorativt element till PÅ.

För att säkerställa fullständig efterlevnad rekommenderar vi att du granskar alla dina hemsidebilder och antingen ger dem alt-text eller använder dem som dekorativa element.

Sidspråk

Genom att ställa in språket för varje sida på din hemsida säkerställer du att skärmläsare kan läsa sidan upp korrekt. Se den här guiden för steg-för-steg-instruktioner: Hur ställer jag in språket för en sida i Hemsideprogrammet?

Auditiva element

Textning och transkriptioner för ljud och video

Det går inte att lägga till textning eller generera transkriptioner med alternativet för egenhostade videor i Hemsideprogrammet. Det finns dock två lösningar för detta:

Struktur och design

Semantiska rubriker

Använd den semantiska rubrikhierarkin (H1, H2, H3, stycke) i din hemsidas textlayout. Denna hierarki återspeglar ett sätt att organisera innehåll logiskt och meningsfullt via taggar på HTML-hemsidor. Den används av hjälpmedelstekniker, såsom skärmläsare, för att tolka innehållet och presentera det i rätt ordning för hemsidans besökare.

I Hemsideprogrammet markeras varje rubrik tydligt (rubrik 1, rubrik 2, osv.) när du använder en textkomponent. Du kan välja en rubrik från sidopanelen när du lägger till en ny textkomponent på din hemsida eller redigera rubriken i egenskapspanelen för befintliga textkomponenter. 

Mallar för Hemsideprogrammet innehåller tydliga rubriker och taggar, och följer som standard logiken som beskrivs ovan.

Skärmbild visar alternativet att lägga till semantiska rubriker i en textkomponent. En röd pil pekar på en öppen rullgardinsmeny i egenskapspanelen, där du kan se de olika typerna av rubriker (t.ex. rubrik 1, rubrik 2, rubrik 3).

Kontrastförhållande för text

När det gäller hemsidans text är detta minimikraven för kontrastförhållande:

  • Rubriker: 3:1
  • Paragrafer: 4.5:1

Du kan justera textens färgförhållande i Hemsideprogrammet så här:

Om färgtemafunktionen är inställd på PÅ:

Om du använder ett färgtema på din hemsida bör du redigera kontrastförhållandet via färgtemats inställningar. Den här guiden förklarar hur du gör det: Använda ett färgtema i Hemsideprogrammet.

Om färgtemafunktionen är inställd på AV:

När färgtemafunktionen är avaktiverad bör du redigera kontrastförhållandet via de globala inställningarna:

  1. Gå till Mallinställningarna i det nedre högra hörnet av Hemsideprogrammets redigerare.
  2. Klicka på Redigera mallstilar i menyn som visas.
  3. Nu ser du en översikt över alla textstilar som används på din hemsida (text, länkar, meny, knapp och tabell). Klicka på textfärg-ikonen för varje objekt för att komma åt färginställningarna. Du kan välja en färg via färgväljaren eller ange en hexkod.
Skärmbild som visar de öppna globala inställningarna. En röd pil pekar mot färgväljarsymbolen, och färgspektrumet är öppet. Ett förstoringsglas zoomar in på fältet där du kan lägga till en hexkod. .

Obs!: Hemsideprogrammet kan inte tala om de exakta förhållandena för din sajt, men du kan använda externa verktyg för att analysera den och få de värden du behöver. Du kan till exempel testa det här verktyget från WebAIM. Här kan du skriva in hexkoder för din förgrund och bakgrund och sedan justera färgen tills du har rätt kontrastförhållande och motsvarande hexkoder. Sen kan du kopiera och klistra in dessa koder i Hemsideprogrammet.

Icke-textkontrast

Färgglada element på din hemsida som inte innehåller text, såsom bakgrundsfärger på sektioner eller knappfärger, kan justeras helt via antingen färgtema-inställningarna eller de globala inställningarna för mall, enligt beskrivningen ovan.

Varje elements stil kan justeras ytterligare via dess komponentinställningar. Om du till exempel klickar på en sektion, ett sidhuvud eller en sidfot ser du alternativet att ändra objektets färg eller stil.

Navigation

Tangentbordsåtkomst

Vi rekommenderar att du håller dig till tydligt innehåll på din hemsida och undviker komplexa element, såsom fokusutlöst innehåll eller . De senare kan ersättas med vanliga bilder och länkar.

Det bör noteras att rullgardinsmenyer är tillgängliga via tangentbordet.

Pausa, stoppa eller dölja innehåll

Det måste vara möjligt att manuellt styra eller dölja alla rörliga eller interaktiva element på din hemsida. Här är ett par saker som du bör kolla om du har dem på din hemsida:

  • Bildreglage: Den här komponentens autouppspelningsfunktion är aktiverad som standard, men du kan stänga av den och lägga till manuella kontroller istället. Gå till din bildreglagekomponent, klicka på Bildreglageinställningar, och välj sedan Navigering för att komma åt dessa inställningar.
  • GIF-filer: Undvik att ladda upp GIF-filer via bildkomponenten om de inte innehåller kontroller.
  • Bakgrundsbilder och videor: Dessa objekt har för närvarande ingen uppspelnings-/pausfunktion, men vi jobbar på en lösning för att möta detta krav. Under tiden rekommenderar vi att du undviker rörliga bakgrundsbilder eller videobakgrunder.
  • Videor: Se till att du har synliga kontroller på videor och att autouppspelning är avstängd. Du kan läsa mer om videoinställningar i vår guide: Hur lägger jag till en video på min hemsida i Hemsideprogrammet?

Blinkande innehåll

Innehåll som innehåller mer än tre blinkningar per sekund bör undvikas. Hemsideprogrammet innehåller inte standard blinkande innehåll, men du kan ladda upp det. Vi rekommenderar dock att du undviker att göra det eller åtminstone gör det möjligt för besökaren att kontrollera och hoppa över innehållet manuellt.

Relaterade artiklar:

Var denna artikel till hjälp?

Hittar du inte det du letar efter?

Starta en chatt

Det snabbaste sättet att kontakta oss – vardagar 09:00 till 18:00.

Starta chatt