סמנים

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

סמנים

דפדפנים מטפלים אוטומטית בכמה תרחישי שימוש נפוצים של סמנים.

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

ככל שתבנו אתרים אינטראקטיביים יותר, כך תרצו להתאים אישית את הסמן כדי שהמשתמשים יוכלו להבין בקלות רבה יותר את האינטראקציות.

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

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

סימני קרט

סמן הכנסה משמש להצגת המיקום שלכם בטקסט שניתן לעריכה. הוא שונה מהסמן, כי הוא לא עוקב אחרי העכבר. אפשר לשנות את הצבע באמצעות caret-color.

תגובה לקלט של משתמשים באמצעות מצביע

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

בעיות נפוצות כוללות כפתורים קטנים מדי או רכיבים אינטראקטיביים שקרובים מדי זה לזה. הם מקשים על המשתמשים לבצע אינטראקציה עם האלמנט הנכון.

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

התכונה pointer מדיה מתייחסת למכשיר הקלט הראשי של המשתמש, ואילו any-pointer מתייחסת לכל מכשירי הקלט. אפשר להתאים מכשירים כמו עכברים ל-fine ומכשירים כמו מסכי מגע ל-coarse. הערך none מציין שהמשתמש לא משתמש במכשיר קלט עם מצביע.

אירועי מגע וסמן

השבתה של תנועות ספציפיות במסך המגע

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

כדי להחריג פעולות מסוימות מטיפול הדפדפן, צריך לציין את הפעולות שרוצים שהרכיב יטפל בהן. ‫pan-x ו-pan-y מאפשרות תנועות הזזה עם אצבע אחת. אפשר להפעיל אותן יחד עם pinch-zoom, שמפעילה שינוי מרחק תצוגה והזזה בכמה אצבעות.

מילת המפתח manipulation שוות ערך למילת המפתח pan-x pan-y pinch-zoom. manipulation לא כולל התנהגויות אחרות של מגע שמצריכות כמה נגיעות בזמן קצר, כמו הקשה כפולה להגדלה.

אחרי שמשביתים את הטיפול של הדפדפן בפעולה מסוימת על ידי החרגתה מ-touch-action, אפשר להגדיר אירועי הצבעה לפעולה הזו.

השבתה של כל האירועים והפעולות

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

בדיקת ההבנה