Osynlig – men ändå sidans viktigaste del?
Sidtiteln, alltså innehållet i html-elementet title, presenteras inte alls på själva webbsidan. Men den dyker upp på många andra ställen. Till exempel följande:
- På webbläsarens flik eller fönsterkarm
- I flödet när någon delar sidan i sociala medier
- Som rubrik när sidan visas i sökresultat
- I webbläsarens sidhistorik
- I bokmärken och genvägar
- I andra automatgenererade länkar
Dessutom brukar sidtiteln vara det första en skärmläsare säger när den presenterar en sida.
Det är alltså väldigt viktigt att skriva bra sidtitlar!
Resten av den här artikeln handlar om hur du bör göra - och hur du inte bör göra.
1. Glöm inte sajtnamnet!
När vi gör tillgänglighetsgranskningar hittar vi ibland sidor med sidtitlar som är identiska med sidornas visuella huvudrubriker, exempelvis "Nyheter" eller "Om oss". Eftersom sidtiteln ofta visas upp på egen hand, utan sajtens övriga kännetecken, är det inte tillräckligt!
Det finns nämligen många sajter som har sidor med just de rubrikerna. Därför är det viktigt att sidtiteln även innehåller sajtens namn.
Oftast är det enkelt att skriva en sidtitel
Följande enkla mönster brukar ge utmärkta sidtitlar:
<title>[sidans rubrik] [skiljetecken] [sajtens namn]</title>
[Sidans rubrik] motsvarar i regel den h1-rubrik som presenterar sidans syfte och innehåll. Om rubriken är väldigt lång så kan den behöva förkortas i sidtiteln så att även följande delar får plats:
[Skiljetecken] brukar vara någon typ av streck. Det finns flera olika sorters vågräta streck, men vanligast är nog ett vertikalt streck: |
[Sajtens namn] är ofta namnet på den organisation som äger sajten, men inte alltid. Ibland kan det vara namnet på en produkt eller en kampanj eller liknande.
Komplettera gärna sidtiteln med en favicon, alltså en grafisk symbol som hjälper användaren att uppfatta vilken sajt och/eller organisation sidan tillhör. De visas inte fullt lika ofta som sidtitlarna, men ganska ofta.
2. Använd sidtiteln för uppdateringar!
De flesta sidtitlarna följer det enkla grundreceptet ovan, och är alltså statiska. Men faktum är att sidtiteln även kan vara en utmärkt plats att ge viktiga meddelanden och statusuppdateringar!
Vid validering
<title>2 fel i formulär - Anmälan förskola - Krisby kommun</title>
I de fall sidan laddas om helt (kallas ibland "postback") brukar skärmläsare presentera sidtiteln, men om uppdateringar sker med javascript räcker det inte att uppdatera sidtiteln för att nå den som använder skärmläsare. Då behövs istället aria-live.
Vid sökresultat
<title>5 dokument matchar din sökning - Krisby kommun</title>
Ibland kan sökfrasen återges i sidtiteln, men det kan finnas säkerhetsrisker med det, så var försiktig eller anlita experter.
För att visa hur långt användaren kommit i en process
<title>Steg 3 av 5 - Boka idrottshall - Krisby kommun</title>
När användaren rör sig i en single page application (SPA)
Vissa webbplatser byter inte sida trots att användaren rör sig mellan helt olika innehåll och funktioner. Då kan det vara lämpligt att med hjälp av javascript uppdatera både adressfältet (window.history.pushState) och sidtiteln (document.title), så att en begriplig sidhistorik byggs upp i användarens webbläsare. Exakt hur en sådan sidtitel bör formuleras kan variera, men grundtipset i punkt 1 gäller oftast även här. Tänk även på vad som händer om användaren använder bokmärke till en adress som skapats med javascript. Hamnar de på samma ställe, med samma sidtitel?
När det kommit nya meddelanden
<title>(2) Meddelanden - Mina sidor - Krisby kommun</title>
3. Missbruka inte sidtiteln!
Är det okej att upprepade gånger ändra på title-elementet så att det liksom blinkar uppe i flik-raden? Eller att inleda sidtiteln med en siffra inom parentes för att antyda att det finns nya meddelanden?
En del sajter gör detta trots att det inte ens finns ett individuellt meddelande, utan bara för att de vill fånga besökarens uppmärksamhet.
Det kanske lyckas, men vi vill starkt avråda från det eftersom det kan bli mycket störande. Lyckligtvis är det ganska ovanligt, men det förekommer.
För att du ska få se hur irriterande en sidtitel kan bli har vi gjort ett exempel. (Do not try this at home!)
Skriv inte för långa titlar
Många användare har massor av flikar öppna i webbläsaren. Det kan innebära att varje flik får väldigt lite utrymme.
I extrema fall har vi bara plats för omkring fem tecken. Därmed inte sagt att sidtitlar inte kan vara längre. De visas ju på många andra ställen också, som inte kapar lika tidigt. Omkring 60 tecken brukar rekommenderas. Men var medveten om att det ibland bara är de allra första som syns.
Till sist: Blanda inte ihop title-element med title-attribut!
Elementet <title> är html-taggen som används för att skapa sidtiteln medan attributet title används främst för att skapa så kallade tooltips, alltså texter som visas när användaren för pekaren över ett område. Det sistnämnda avråder vi oftast från, men kan förtjäna en egen artikel så småningom.
