במשך שנים רבות, דפדפנים לנייד הפעילו עיכוב של 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, ולכן מומלץ להשתמש בתג viewport.
האם אובדן האפשרות להקיש פעמיים כדי להתקרב או להתרחק מהווה בעיה של נגישות?
לא. התכונה 'הגדלת התצוגה באמצעות צביטה' ממשיכה לפעול, ותכונות מערכת ההפעלה מתאימות למשתמשים שקשה להם לבצע את התנועה הזו. ב-Android, תנועות הגדלה פותרות את הבעיה. כלים כאלה פועלים גם מחוץ לדפדפן.
מה קורה בדפדפנים ישנים יותר?
התכונה FastClick by FT Labs משתמשת באירועי מגע כדי להפעיל לחיצות מהר יותר, ומבטלת את הצורך בתנועת הקשה כפולה. כדי להבדיל בין גלילה לבין הקשה, המערכת בודקת את המרחק שהאצבע עברה בין touchstart
ל-touchend
.
הוספת מאזין touchstart
לכל דבר משפיעה על הביצועים, כי אינטראקציות ברמה נמוכה יותר, כמו גלילה, מושהות בגלל הקריאה למאזין כדי לבדוק אם הוא event.preventDefault()
. למרבה המזל, FastClick ימנע הגדרת מאזינים במקרים שבהם הדפדפן כבר מסיר את העיכוב של 300 אלפיות השנייה, כך שתוכלו ליהנות מהיתרונות של שתי השיטות.