Anpassa webbplatsen för flerspråkighet

Flerspråkiga webbplatser behöver både tekniskt stöd och en bra struktur för att fungera optimalt. Riktlinjen sammanställer erfarenheter av hur webbplatser kan anpassas för flerspråkighet.


Rekommendationer för flerspråkighetLänk hit

  • Se till att publiceringsverktyget har stöd för att hantera flera språk och teckenuppsättningar på ett korrekt, enkelt och effektivt sätt. Valet av publiceringsverktyg kan sätta gränser för vad som är möjligt att göra i ett flerspråkigt perspektiv.
  • Översätt grundläggande navigeringselement som sök och kontakt om ni har omfattande avdelningar på olika språk.
  • Ange aktuellt språk i html-kod och kontrollera att den automatiska textuppläsningen fungerar också för andra språk än svenska.
  • Ange språkriktning för innehåll som läses från höger till vänster.
  • Låt en person som behärskar det aktuella språket läsa igenom sidan och komma med synpunkter.


Skapa tydliga ingångar till olika språkLänk hit

Placera språkingångarna tydligt och konsekvent på alla webbsidor, gärna i sidhuvudet eller på någon annan central plats som är åtkomlig från alla sidor på webbplatsen.

Skriv länktexter på det språk du länkar till, alltså ”français” och inte ”franska”, när du länkar till sidor på franska. Använd inte flaggor som språkindikation, eftersom länder ofta har flera officiella språk. Däremot kan du gärna använda en ikon som föreställer en jordglob och komplettera med länktexten ”Other languages” när du länkar till en samlingssida där man kan välja olika språk.

Om webbplatsen har en särskild sida med översättningar till olika språk bör svenskt teckenspråk nämnas där. Sätt gärna upp en samlingssida med alla teckenspråksfilmer på webbplatsen och markera de delar av webbplatsen som är översatta till teckenspråksfilm med en särskild teckenspråkssymbol. Se R13 Ge information på svenskt teckenspråk.

Det finns olika vägar att gå när det gäller strukturen på en flerspråkig webbplats. Välj en enklare lösning med separata ingångssidor för olika språk, eller en mer ambitiös med flerspråkiga parallella versioner av samma text. Oavsett lösning är det viktigt att användarna snabbt och enkelt kan se vilka texter på webbplatsen som finns översatta till vilket språk.


Ange aktuellt språk i html-kodLänk hit

Sidans huvudspråk (som används i menyer, sidhuvud mm) bör anges med hjälp av lang-attributet i sidans rot-element:

<html lang=”sv”>

Se R142. Ange sidans språk i koden.

Om det finns innehåll på sidan som har ett annat språk än sidans huvudsakliga språk bör element som omsluter detta innehåll förses med lang-attribut:

<div lang=”fit”>Sinulla on oikeus käyttää kansallisia minoriteettikieliä</div>

Se R142. språkförändringar i koden.

Koder för de svenska minoritetsspråken finns i R14. Ge information på de nationella minoritetsspråken.


Ange språkriktning för innehåll som läses från höger till vänsterLänk hit

Tänk på att vissa språk har en annan språkriktning än svenskan. Andra språk, till exempel arabiskan läses från höger till vänster. Det finns även språk som läses vertikalt, men dessa kan och brukar presenteras vågrätt i webbsammanhang.

Ibland fungerar det att utan särskild åtgärd skriva in sådan text i webbsidan, eftersom webbläsaren vet vilka tecken som ska läsas i vilken riktning. Men det händer att exempelvis siffror, frågetecken, utropstecken mm (som förekommer både i höger- och vänster-riktade språk) hamnar på fel sida i förhållande till texten.

Förutom att du alltid bör ange språkförändringar i koden (R142) bör därför html-attributet dir=”rtl” sättas på element vars innehåll ska läsas från höger till vänster. Förkortningen dir står för ”direction” och rtl står för ”right to left”. Om det inte redan finns ett element som innehåller det textavsnitt som har en viss språkriktning så kan du omsluta textpartiet med exempelvis elementet span.

Om det är hela stycken och inte bara enstaka ord som ska läsas från höger till vänster så kan stycket behöva högerställas med css (text-align: right;).

När vänster- och högerriktade språk blandas i samma textavsnitt rekommenderar vi att du även sätter dir=”ltr” (left-to-right) på alla vänster-höger-texter som ligger infällda i avsnitt med motsatt riktning. Detta kan exempelvis gälla information från myndigheter där svenska begrepp behöver presenteras i texter på främmande språk.

Observera att det är svårt för en person som inte behärskar ett främmande språk att upptäcka felaktigheter i presentationen. Detta gäller särskilt för språk som läses från höger till vänster. Därför rekommenderar vi någon med språkkunskaper granskar sådana sidor. Se Håll god kvalitet på översättningarna (R16).

Exempel

I följande text ska allt utom länken översättas till arabiska:

På sidan Hur ansöker jag? finns mer information (på svenska).

Skiljetecken riskerar att hanteras fel när vänsterriktat innehåll, som i detta fall, omges av högerriktat innehåll utan att riktningsförändringen anges i kod:

HTML

<span lang="ar" dir="rtl"> في الصفحة <a href="#" lang="sv">Hur ansöker jag? </a>العثور على مزيد من المعلومات (باللغة السويدية).
</span>

Presentation

في الصفحة Hur ansöker jag?العثور على مزيد من المعلومات (باللغة السويدية).

Om länken med avvikande riktning använder attributet dir="ltr" så hamnar skiljetecken rätt:

HTML

<span lang="ar" dir="rtl"> في الصفحة <a href="#" dir="ltr" lang="sv">Hur ansöker jag? </a>العثور على مزيد من المعلومات (باللغة السويدية).
</span>

Presentation

في الصفحة Hur ansöker jag?العثور على مزيد من المعلومات (باللغة السويدية).

Det går även att använda css-egenskaperna direction och bidi-override för att ange läsriktning:

CSS

.svenska {
direction: ltr;
unicode-bidi: bidi-override;
}

HTML

<span lang="ar" dir="rtl"> في الصفحة <a href="#" class="svenska" lang="sv">Hur ansöker jag? </a>العثور على مزيد من المعلومات (باللغة السويدية).
</span>

Presentation

في الصفحة Hur ansöker jag?العثور على مزيد من المعلومات (باللغة السويدية).

Lägg helst informationen i html om det är möjligt, eftersom det händer att css inte tillämpas (Se webbriktlinjen Se till att webbplatsen kan användas även utan stilmallar (R92)). Men om du inte har behörighet eller kunskap för att redigera html så kan css vara ett alternativ. Kanske kan du med hjälp av ditt publiceringssystem lägga till en viss css-klass på de avsnitt som har en avvikande språkriktning.

Läs mer om språkriktning hos W3C.

Språk- och läsriktning kan ha betydelse för interaktionsdesignen och hur webbplatsen uppfattas i ett responsivt läge. Exempelvis kan placeringen av knappar behöva anpassas när användaren läser sidan från höger till vänster. Kontrollera att de översatta sidorna fungerar med er interaktionsdesign, och se till att det fungerar bra för användare med en liten skärm.


Exempel: flerspråkiga webbplatserLänk hit


MätbarhetLänk hit

  • Utvärdera webbplatsens kod mot tekniska standarder som berör flerspråkighet. W3C har ett valideringsverktyg som utför sådan kontroll.
  • Utvärdera strukturen och navigationen för flerspråkiga användare genom att göra användningstester med personer som talar de olika språken.

FördjupningLänk hit


TerminologiLänk hit

Tänk på att det är skillnad mellan en internationell webbplats och en flerspråkig webbplats. En internationell webbplats är skapad för en internationell publik, medan en flerspråkig webbplats är en som innehåller sidor på flera språk.

Att anpassa ett system så att det fungerar internationellt kallas på engelska för internationalization, vilket brukar förkortas i18n (bokstaven ”i” följt av 18 tecken och därefter ”n”). Att anpassa för en specifik region (land/språk/kultur) kallas för localization, vilket med en liknande så kallad numeronym kan förkortas l10n.

När det gäller teckensnitt används även orden typsnitt eller fonter. Ett teckensnitt är en uppsättning bokstäver, siffror och tecken med ett genomgående utseende och ett gemensamt namn, till exempel Helvetica eller Times New Roman. Font är ett engelskt lånord som ofta används när man på svenska avser en teckensnittsfil i en dator, medan det på engelska även kan betyda typsnitt.

Meänkieli kallas ibland för tornedalsfinska.

Kommentarer till denna riktlinje

Kommentarer (11)

  • Besökare skriver:

    Andra punkten känns lite underlig. Naturligtvis ska man kontrollera resultatet i olika webbläsare. Men vilka problem har egentligen webbläsarna om man använder UTF-8? Jag har inte kunnat se några (bortsett från att äldre Apple-produkter har problem med etiopiska språk).

    Att lägga bilder som länkar och sedan alt-texter på engelska blir bara konstigt. Hur tillgängligt är det för den som har svårt att se bilder? Det stämmer dåligt med andra punkter i vägledningen…

    Och att för säkerhets skull även ha informationenden som pdf-er känns också som en nödläsning, minst sagt. Bättre är väl att göra rätt från början. (För att inte tala om att det skräpar ned i träfflistor med dubblerad information.)

    • webbriktlinjer skriver:

      Tack Tomas för viktiga kommentarer!
      Jag tar upp detta med arbetsutskottet för webbriktlinjerna, så blir det nog någon sorts justering sedan!

  • Besökare skriver:

    Bortsett från det jag skrev i förra kommentaren är innehållet vettigt. Men ett par punkter skulle kunna läggas till:

    -Vikten av att ange språk rätt i koden. Här syndar vi själva ibland på vår webbplats. Ibland sätter dessutom publiceringssystemet käppar i hjulen.

    – Kontrollera att språk som skrivs från höger till vänster renderas med rätt läsordning. Normalt är det inga problem. Men det finns tillfällen då det kan bli konstigheter när man blandar latinska tecken med t.ex. arabiska. Så man bör vara uppmärksam i de fallen. (Eller är vi nere på nördnivå nu?)

    • Besökare skriver:

      Bra information! Är liksom Thomas Kullberg skeptisk angående punkten om alt-text och bild istället, eftersom det känns som en nödlösning med målkonflikt. Men jag ser också att det var skrivet 2014, så troligen är det inte samma problem längre med icke-latinska språk i vanliga webbläsare och därför kan den punkten förhoppningsvis redigeras.

      Apropå din kommentar Thomas om problemet med blandade språk med olika textriktningar:
      sammanflatat.wordpress.com/2016/12/29/hogerstallda-sprakhjarngympa-for-webbredaktoren

      • Pär Lannerö skriver:

        Hej, tack för att du aktualiserat dessa frågor igen!
        Både här och i Facebookdiskussionen.
        Jag är rädd att jag 2014 tappade bort de punkter som Thomas tog upp.
        Ber om ursäkt och gör ett nytt försök nu.

    • Timo skriver:

      helt fel finska i kodexemplet, rätt form: Sinulla on oikeus käyttää kansallisia minoriteettikieliä.

  • Åsa Holmberg skriver:

    Några fler saker som kan vara bra att tänka på:

    – Siffror läses från vänster till höger även på arabiska (och troligen andra högerställda språk).

    – Om du har en ikon bredvid länkar, till exempel PDF-ikon så måste den ändras så att ikonen hamnar på rätt sida av länken så den blir logisk för en person som läser länken från höger till vänster.

    – Det är en fördel om du kan använda CSS som gör det möjligt att ha annat typsnitt som ger bättre kontrast för till exempel arabiska tecken. Detta eftersom tecknen kan se tunnare och mer otydliga ut med ert befintliga typsnitt.

    – Om ni gör en hel webbplats på högerställt språk behöver ni tänka om hela designen med logga och sökruta på motsatta sidor och så vidare.

    – Arabiskan använder ett annat procenttecken som ser lite smalare ut: I Unicode-uppsättningen finns ett särskilt arabiskt procenttecken: Arabic Percent Sign (٪) på positionen U+066A.

  • Anders Andersson skriver:

    Texten

    p{text-align:right;}
    //–>

    i slutet av artikeln ser ut som ett redigeringsfel i HTML-koden, särskild som det har insmugit sig ett tecken U+2013 EN DASH där det förmodligen skall stå två stycken U+002D HYPHEN-MINUS (–):

    p{text-align:right;}
    //–>


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)