Gör det enkelt att ringa upp telefonnummer

Använd standardiserad uppmärkning av telefonnummer. Det kan till exempel göra att användare kan ringa upp ett telefonnummer genom att klicka på det.


Rekommendationer för länkade telefonnummerLänk hit

  • Markera telefonnummer i koden som telefonlänkar (tel:). Det ger möjlighet att direkt ringa upp numret, på samma sätt som e-postlänkar (mailto:) ger möjlighet att skicka e-post.
  • Ange det fullständiga telefonnumret, inklusive det internationella prefixet, i länken – även om det nummer som visas på sidan bara innehåller den lokala delen. Då fungerar länken oavsett varifrån användaren ringer.
  • Överväg att använda strukturerade data även när telefonnummer inte är länkade.

ExempelkodLänk hit

Följande kod gör telefonnumret till en länk för att ringa upp det direkt:

<a href="tel:+46855050000">08 – 55 05 00 00</a>

Ni kan styra utseendet på länkarna med stilmallar. I exemplet har länken en egen stilmallsklass.

Vissa mobiltelefoner och webbläsare hittar automatiskt sifferkombinationer som ser ut som telefonnummer. De gör det alltså möjligt att ringa ett nummer även utan kodlänkning. Risken är dock att näraliggande siffror, som inte ingår i telefonnumret, ändå tolkas som en del av numret, till exempel ett klockslag. Därför är länkar att rekommendera.

För fler rekommendationer om länkar (till exempelvis e-postadresser), se R5. Skriv tydliga länkar.


MätbarhetLänk hit

Pröva att ringa telefonnummer genom att klicka på länkarna.


Överväg att använda strukturerad dataLänk hit

Det kan finnas anledning att märka upp telefonnummer – även när de inte är länkade – med metadata som exempelvis attributet itemprop="telephone" (mer om uppmärkning av telefonnummer hos schema.org). Då kan nämligen sökrobotar lättare indexera innehållet och presentera till exempel kontaktuppgifter på ett tydligt sätt. Även andra robotar och ai-system kan, åtminstone i teorin, dra nytta av sådan strukturerad data.

Google erbjuder ett verktyg för test av strukturerade data.


Märk upp inmatningsfält för telefonnummer på rätt sättLänk hit

När du gör formulär som efterfrågar telefonnummer är det ofta nödvändigt att märka upp inmatningsfält med uppgift om att det gäller just telefonnummer. Då används attributet autocomplete, med värden som hämtas från en standardlista hos W3C. Detta för att användare ska kunna få bra automatiska förslag av sin webbläsare, och kanske även kognitivt stöd med symboler eller översättningar. Se R154. Märk upp vanliga formulärfält i koden.

Det kan även vara lämpligt att märka upp inmatningsfält med type="tel" om de efterfrågar telefonnummer. Det är värdefullt inte minst för användare med mobiltelefon, som då kan visa ett särskilt anpassat virtuellt tangentbord som underlättar inmatning av just telefonnummer.

Tangentbord med siffrorna  0-9, specialtecken +*# och radera-knapp.

Virtuellt tangentbord på mobiltelefon anpassat för inmatning av telefonnummer.


Kommentarer till denna riktlinje

Kommentarer (9)

  • Besökare skriver:

    Om man väljer att länka telefonnummer, vad tänker man sig ska hända på enheter som inte är telefoner om användaren klickar på det? I bästa fall associerar webbläsaren och/eller operativsystemet klicket med att starta, eller erbjuda sig att starta, ett telefon-kapabelt program som t.ex. Skype. I värsta fall öppnas en telefonapplikation som användaren inte nyttjar eller så visas ett felmeddelande om att enheten saknar något.

    Många användare hanterar givetvis detta utan problem och kopierar telefonnumret om hen t.ex. vill lägga in det i en kontaktbok eller klistra in det i en telefon-applikation som inte webbläsaren har som förstaval. För den som använder kontextmenyn och väljer ”Kopiera länk” är det inga problem – annat än att hen kan behöva rensa bort protokoll-texten ”tel:” i början av numret – men många användare kopierar text genom att markera den. Att markera texten i en länk är hopplöst, pekaren går över till att bli något man klickar med och inte markerar text med. Samma sak med touch-enheter, ett fingertryck triggar en länk lättare än att markera texten i den.

    På smarta mobiler fungerar det oftast bra för de flesta användare med länkade telefonnummer, i alla fall om hen vill använda enhetens egen telefonfunktion. Det finns dock en hel del som använder andra telefoni-kapabla appar för att ringa.

    Om man ska förlita sig på en smart telefons webbläsares egen tolkning av vad som är ett telefonnummer är skrivsättet det avgörande. I vissa enheter beror det på språkinställningarna. Bäst i längden är antagligen att använda rekommenderade standarder för hur man skriver telefonnummer på aktuellt språk och att deklarera språket i HTML-koden. Skrivsättet av telefonnumret i texten ovan, ”08 – 55 05 00 00”, använder mellanslag runt ett tankstreck (U+2013) som avdelare. Safari och Chrome i iOS 10 identifierar t.ex. inte detta som ett telefonnummer. Skrivet med ett bindestreck (U+2010) utan mellanslag runt, fungerar det. Bindestreck utan mellanslag är också vad Språkrådgivningen[1] rekommenderar – och tidigare Språknämndens Svenska skrivregler. Det är också vad Christer Hellmark rekommenderar i Typografisk Handbok och vad PTS använder i sina kontaktuppgifter som länkas som exempel ovan.

    [1] http://www.sprakochfolkminnen.se/sprak/sprakradgivning/frageladan.html?url=-27634753%2Fcgi-bin%2Fsrfl%2Fvisasvar.py%3Fsok%3DTelefonnummer%26svar%3D61433&sv.url=12.c17e514db30bb2a810ea

  • Besökare skriver:

    Angående rekommendationen ”e-postlänkar (mailto:) ger möjlighet att skicka e-post” ovan.

    Trots att länkade e-postadresser har använts sen 90-talet är det problematiskt för många användare. För att det ska hjälpa användaren ska webbläsaren eller operativsystemet associera mailto-länkar med det e-postprogram som användaren använder på aktuell enhet. De som använder webbmail kan bli rätt förvirrade eller irriterade när ett e-postprogram som operativsystemet startar öppnar en dialogruta där hen ska fylla i SMTP-uppgifter och annat. Inte alla greppar vad som hände. Andra blir irriterade.

    Vad användaren måste göra i ovanstående fall är att kopiera e-postadressen och klistra in i det e-postprogram hen använder. För den som använder kontextmenyn och väljer ”Kopiera länk” är det inga problem men många användare kopierar text genom att markera den. Att markera texten i en länk är hopplöst, pekaren går över till att bli något man klickar med och inte markera text med. Samma sak med touch-enheter, ett fingertryck triggar en länk lättare än att markera text.

    Alternativet är givetvis att inte vara alltför ambitiös i viljan att försöka hjälpa användaren utan istället skriva ut e-postadressen som ren text som hen kan markera och kopiera in i till-fältet i det e-postprogram hen använder, webb-baserat eller inte. En del webbläsare, i synnerhet på touch-enheter, väljer att göra e-postadresser till en länkar ändå, men det kan vi inte påverka.

    • Projektledare webbriktlinjer skriver:

      Tack för en tänkvärd kommentar! Vi jobbar just nu med en ny text om länkar till e-postadresser. Återkommer!

  • Besökare skriver:

    I koden som är ovan så är det inlagt felaktiga citattecken. Använder man koden som det står så kommer länken inte fungera eftersom det är två olika typografiska citattecken snarare än det korrekta som man använder i kod osv. Ni använder ” och ″ medan det ska vara två stycken ”.

  • Besökare skriver:

    PS. Är säkert en funktion i ert CMS som gör om detta, för nu blev mina också förvrängda. Bör finnas en funktion för att kunna klistra in kod-snuttar etc på korrekt sätt.

  • Karin skriver:

    Post- och telestyrelsens kontaktsida har inte (i alla fall just nu) sina telefonnummer klickbara.


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)