Share
Nu voi începe acest sfat rapid cu vechiul "aceste zile oamenii văd site-urile dvs. pe o multitudine de dispozitive" spiel, dar este Adevărat. Multe dispozitive mobile vor face o treabă bună de a recunoaște numerele de telefon în codul HTML, făcându-le clickabile pentru a putea apela direct acest număr - dar nu întotdeauna.
Ce se întâmplă dacă un telefon mobil al unui utilizator nu recunoaște un număr de telefon ca fiind "apelabil"? Poate că, de exemplu, modul în care ați introdus numărul nu este recunoscut de platformă. Șanse pierdute!
(Verificați lista de modele a lui Mark Hammond, care sunteți recunoscut pentru iOS și Android ...)
Acest lucru e mort ușor: împachetați numerele de telefon în ancore, dar în loc de a folosi http * protocolul (sau orice altceva ar trebui să lipiți în mod normal într-o ancoră) utilizați tel: sau tel: //. În acest fel, chiar dacă ați utilizat un model nerecunoscut, dispozitivul va ști încă ce trebuie să facă:
+44 (0) 111 - 222 333 44
Navigatoarele fără suport (de exemplu, desktop-ul dvs.) nu știu ce să facă cu tel: protocol - cu excepția cazului în care utilizatorul are un fel de extensie activată care permite Skype să recunoască numerele de telefon. Google Chrome va ignora fericit clicul, dar în momentul de față alte browsere majore încep să plângă. Alte dispozitive non-telefon (cum ar fi iPad) vor recunoaște numărul, solicitând utilizatorului să adauge un contact la agenda lor - aceasta ar fi o abordare sensibilă și pentru browserele desktop.
Ca o opțiune suplimentară, permiteți-le chiar mai clar utilizatorilor să se uite la o legătură telefonică prin modelarea fiecăruia. Vom folosi un selector de valoare de atribut pentru aceasta, direcționând numai la :inainte de pseudo element al legăturilor care conțin șirul tel: în cadrul lor href atribut:
a [href ^ = "tel:"]: înainte de content: "\ 260E"; afișare: bloc; margin-dreapta: 0,5;
Caratul de acolo ^ indică faptul că caută orice elemente ale căror atribute href începe cu șirul specificat. tel: și tel: // va fi așadar acoperită aici. Am introdus un mic telefon unicod \ 260E;, așa că nu trebuie să folosim nici măcar o pictogramă webfont. Frumos.
Bună nuanță eh? 
Accentsconagua
culoare: roșii crezi sau nu… Am terminat aici, în numele accesibilității încercați!
