השהיה של 300 אלפיות השנייה בהקשה, נעלם

Jake Archibald
Jake Archibald

במשך שנים רבות, דפדפנים לנייד הפעילו עיכוב של 300-350 אלפיות השנייה בין touchend ל-click בזמן שהמתינו כדי לראות אם מדובר בהקשה כפולה, מפני שהקשה כפולה הייתה תנועה לשינוי מרחק התצוגה של הטקסט.

מאז ההשקה הראשונה של Chrome ל-Android, ההשהיה הזו הוסרה אם גם השינוי באמצעות תנועת צביטה הושבת. עם זאת, זום באמצעות תנועת צביטה היא תכונת נגישות חשובה. החל מגרסה 32 של Chrome (החל מ-2014), העיכוב הזה נעלם באתרים המותאמים לנייד, בלי להסיר את שינוי מרחק התצוגה מתנועת צביטה. זמן קצר לאחר מכן עשו זאת גם ב-Firefox וב-IE/Edge, ובמרץ 2016 בוצע תיקון דומה ב-iOS 9.3.

ההבדל בביצועים הוא אדיר!

ממשק משתמש שמגיב באופן מיידי מאפשר למשתמשים ללחוץ במהירות על כל לחצן בראש שקט, במקום להשהות ולהמתין לתגובה. מידע נוסף על ההשפעה של זמני תגובה אנושיים ועל הביצועים באינטרנט זמין במבוא ל-RAIL.

כדי להסיר את ההשהיה של 300-350 אלפיות השנייה, כל מה שצריך ב<head> של הדף הוא:

<meta name="viewport" content="width=device-width">

כך רוחב אזור התצוגה זהה לזה של המכשיר, ובדרך כלל זוהי שיטה מומלצת לאתרים מותאמים לניידים. באמצעות התג הזה, דפדפנים מניחים שהפכתם את הטקסט לקריא בנייד, והתכונה 'הקשה כפולה לשינוי מרחק התצוגה' פוחתת לטובת קליקים מהירים יותר.

אם מסיבה כלשהי אין לכם אפשרות לבצע את השינוי הזה, אפשר להשתמש ב-touch-action: manipulation כדי להשיג את אותו השפעה בכל הדף או באלמנטים מסוימים:

html {
    touch-action: manipulation;
}

השיטה הזו לא נתמכת ב-Safari, ולכן התג של אזור התצוגה עדיף בהרבה.

האם איבוד הגישה בהקשה כפולה לשינוי מרחק התצוגה הוא בעיית נגישות?

לא. אפשר לעשות זום עם תנועת צביטה, והפיצ'רים של מערכת ההפעלה מתאימים למשתמשים שמתקשים לבצע את התנועה הזו. ב-Android, צריך להשתמש בתנועות הגדלה. כלים כאלה פועלים גם מחוץ לדפדפן.

מה לגבי דפדפנים ישנים?

FastClick by FT Labs משתמש באירועי מגע כדי להפעיל קליקים מהר יותר ומסיר את תנועת ההקשה הכפולה. התכונה בודקת את מידת התנועה של האצבע שלך בין touchstart ל-touchend, כדי להבחין בין גלילות להקשות.

הוספת אוזן touchstart להכול משפיעה על הביצועים, כי אינטראקציות ברמה נמוכה יותר, כמו גלילה, מתעכבות על ידי קריאה למאזינים כדי לבדוק אם הם event.preventDefault(). למרבה המזל, FastClick יימנע מהגדרת מאזינים במקרים שבהם הדפדפן כבר מסיר את העיכוב של 300 אלפיות השנייה, כך שניתן ליהנות משניהם!