Share
Jag kommer inte att börja detta snabba tips med den gamla "dessa dagar ser folk dina webbplatser på en mängd enheter" spiel, men det är Sann. Många mobila enheter kommer att göra ett bra jobb med att känna igen telefonnummer i din HTML, så att de kan klickas så att du direkt kan ringa det numret - men inte alltid.
Vad händer om en användares mobil inte känner igen ett telefonnummer som "kallbart"? Kanske, till exempel, har sättet som du angett numret inte erkänts av plattformen. Missad möjlighet!
(Kolla in Mark Hammonds lista över mönster som är erkänd för iOS och Android ...)
Den här är död lätt: Sätta in dina telefonnummer i ankare, men istället för att använda http * protokoll (eller vad som helst du normalt skulle hålla i ett ankare) använda tel: eller tel: //. På så vis kan du, även om du har använt ett okänt mönster, veta vad du ska göra:
+44 (0) 111 - 222 333 44
Icke-stödjande webbläsare (t.ex. skrivbordet) vet inte vad man ska göra med tel: protokoll än - om inte användaren har någon typ av tillägg aktiverat som tillåter Skype att känna igen telefonnummer. Google Chrome kommer glatt att ignorera klicket, men för närvarande börjar andra stora webbläsare gråta. Andra enheter som inte är telefoner (t.ex. iPad) kommer att känna igen numret och uppmanar användaren att lägga till en kontakt i sin adressbok - detta skulle vara en förnuftig inställning för skrivbords-webbläsare också.
Som en extra tillägg, låt oss göra det ännu tydligare för användaren att de tittar på en telefonlänk genom att utforma var och en. Vi använder en attributvärdesväljare för detta, med inriktning på endast :innan pseudoelement av länkar som innehåller strängen tel: inom deras href attribut:
a [href ^ = "tel:"]: före innehåll: "\ 260E"; display: block; marginal-höger: 0.5em;
Den lilla karat där ^ betyder att det letar efter några element vars href attribut Börja med strängen vi specificerar. tel: och tel: // kommer därför båda att omfattas här. Vi har slagit in en liten unicode-telefon \ 260E;, så vi behöver inte ens använda en webfontikon. Trevlig.
Trevlig nyans eh? 
Accentsconagua
färg: tomat tro det eller ej… Vi är alla gjorda här, i tillgänglighetens namn, försök!
