Hoppa till innehållet
Alla guider

Sidtitel och språk i webbutiken: två fel som går att rätta

Gratistestet kontrollerar sidtitel (WCAG 2.4.2) och språkmarkering (3.1.1). Så ser en bra titelmall ut och så rättar du lang i Shopify, WordPress och Wix.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om tillgänglighetslagen, vänd dig till Post- och telestyrelsen (PTS). Lagen heter Lag (2023:254) om vissa produkters och tjänsters tillgänglighet.

Två av de enklaste fynden i AccessAudits gratistest gäller saker som ligger i sidans huvud och inte syns på själva sidan: titeln och språkmarkeringen. De rättas oftast på ett ställe i temat eller i en inställning, och de gäller varje sida i butiken. Därför är de värda att ta först.

Vad en sidtitel är och vem som använder den

Sidtiteln är texten i title-elementet i sidans kod. Den syns på webbläsarens flik, i historiken och som rubrik i sökresultaten. Den som har flera flikar öppna använder den för att hålla isär dem, och hjälpmedel som skärmläsare kan förmedla den. W3C skriver att titlar hjälper användare att hitta innehåll och orientera sig, och att kravet också gynnar den som navigerar med hjälp av ljud och den som har flera sidor öppna samtidigt (Understanding 2.4.2).

Vad kravet säger

Kriterium 2.4.2 Sidans titel (nivå A): "Webbsidor har titlar som beskriver ämne eller syfte." Läs mer på vår sida om WCAG 2.4.2. W3C räknar en titel som inte beskriver sidans innehåll som ett typiskt fel. Laddas nya vyer med JavaScript utan att sidan laddas om, ska titeln bytas med innehållet.

En titelmall för webbutiken

Skriv det som är unikt för sidan först och butikens namn sist. Då syns det viktiga även när titeln kapas på fliken eller i sökresultatet.

SidaExempel
StartsidaUllkläder och yllefilt från Småland | Butiksnamn
KategoriDamtröjor | Butiksnamn
ProduktUllkofta grå | Damtröjor | Butiksnamn
SökresultatSökresultat för "kofta" | Butiksnamn
VarukorgVarukorg (3 varor) | Butiksnamn
KassaKassan, steg 2 av 3: Leverans | Butiksnamn

Exemplen är påhittade och visar bara formen. Kassan är värd extra omsorg: om alla steg har samma titel går det inte att höra var i köpet man är.

Vanliga fel med titlar

  • Samma titel på alla sidor, ofta bara butikens namn.
  • Tom titel, eller ingen title alls i sidans kod.
  • Titeln är ett artikelnummer eller ett internt namn i stället för produktens namn.
  • Sidor som byter innehåll med JavaScript men behåller titeln från föregående vy.
  • Två title-element, till exempel när både temat och ett tillägg skriver ut en egen titel.

Sidans språk

Språket anges med lang-attributet på html-elementet, till exempel <html lang="sv">. W3C beskriver att skärmläsare då kan ladda rätt uttalsregler (Understanding 3.1.1). Kriterium 3.1.1 Sidans språk (nivå A): "Det huvudsakliga mänskliga språket på varje webbsida kan tydliggöras automatiskt." Läs mer på vår sida om WCAG 3.1.1.

Värdet ska följa språkkodsstandarden BCP 47 och spegla det huvudsakliga språket på sidan (teknik H57). För svenska är sv det kortaste rätta värdet. sv-SE är också en giltig språkkod och anger svenska som det talas i Sverige.

Vanliga fel med språk

  • html-elementet saknar lang helt.
  • Fel språk står kvar från temat, till exempel lang="en" i en butik som är på svenska.
  • Kassan eller betalsteget hanteras av en annan leverantör och har ett annat språk angivet än resten av butiken.
  • I en flerspråkig butik står samma språk på alla språkversioner.
  • Enstaka stycken på ett annat språk är inte märkta. De kan märkas med lang på det element de står i, till exempel <p lang="en">Free shipping worldwide</p>.

Så rättar du det per plattform

Shopify. Sidtitel för en vanlig sida: Online Store, Pages, välj sidan, öppna sökmotorlistningen ("Edit website SEO") och fyll i Page title. Startsidans titel sätts under Online Store, Preferences. Shopify anger att titeln kan vara upp till 70 tecken och rekommenderar högst 60 så att den inte kortas i sökresultat (Shopify Help Center). Hjälpsidan beskriver inte stegen för produkter och kategorier, så titta efter motsvarande sökmotorlistning på produktens eller kategorins redigeringssida. Språket: Shopifys dokumentation om temans struktur beskriver inte lang-attributet. I Liquid finns objektet request.locale för språket i den aktuella förfrågan. Öppna sidans källkod och kontrollera vad som faktiskt står i html-elementet, särskilt i en butik med flera språk. Ändringar i temats kod bör göras i en kopia av temat.

WordPress och WooCommerce. Ett tema som lämnar titeln åt WordPress deklarerar add_theme_support( 'title-tag' ), och då ska temat inte skriva ut ett eget title-element (WordPress Make Core). Tilläggsutvecklare och teman kan ändra titeln, så kontrollera resultatet i sidans källa. Språket skrivs ut i html-elementet av funktionen language_attributes(), som enligt utvecklardokumentationen bygger ett attributpaket med textriktning och språkinformation för sidan. Inställningen Site Language i Settings, General beskrivs i WordPress dokumentation som instrumentpanelens språk, så förlita dig inte på den för att veta vad som hamnar på sidan. Titta i källan.

Wix. I Wix Editor: öppna panelen Pages & Menu, klicka på More Actions vid sidan, välj SEO basics och fyll i fältet Title tag (Wix Help Center). Wix anger ingen teckengräns för vanliga sidor, men rekommenderar högst 60 tecken för produkter och kategorier i Wix Stores. Vad Wix skriver i lang-attributet har vi inte kunnat verifiera i Wix egen dokumentation. Kontrollera det i sidans källa och fråga Wix support om det är fel.

Vad gratistestet kontrollerar

Testet läser sidans kod och gör bara två enkla kontroller för det här ämnet:

  • sidtitel: flaggar om title-elementet saknas eller är tomt. Om titeln är bra, om den skiljer sig från andra sidor och om den beskriver sidan måste du bedöma själv.
  • html-lang: flaggar om html-elementet saknar lang eller har ett tomt värde. Att det angivna språket stämmer med texten på sidan kontrollerar testet inte.

Båda fynden räknas som allvarliga i rapporten. Gratistestet läser upp till fem sidor och ersätter inte en fullständig granskning.

Nästa steg

  1. Öppna startsidan, en kategori, en produkt och kassans olika steg. Högerklicka, välj "Visa sidans källa" och sök efter title och lang i början av koden.
  2. Kör gratistestet och gå igenom checklistan.
  3. Rätta mallen eller inställningen en gång, och kontrollera om resultatet slår igenom på alla sidtyper.

Källor

Testa din webbutik gratis.

Skriv in adressen så granskar vi startsidan och upp till fyra sidor till och visar de viktigaste bristerna.

Vi hämtar startsidan och upp till fyra sidor till.

Gratis mall för tillgänglighetsinformation

Fler guider om tillgänglighet.