מבוא למיקוד

סקירה כללית של מיקוד המסך בנגישות

דייב גאש
דייב גאש
מגין קירני
מגין קירני

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

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

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

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

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

מה זה התמקדות?

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

מיקוד המקלדת בשדה טקסט.

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

לחצן הרשמה.

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

כמשתמשים, אתם יכולים לקבוע איזה רכיב נמצא כרגע במיקוד באמצעות Tab, Shift+Tab או מקשי החיצים. ב-Mac OSX זה עובד קצת בצורה שונה: בעוד ש-Chrome תמיד מאפשר לנווט באמצעות Tab, יש להקיש על Option+Tab כדי לשנות את המיקוד בדפדפנים אחרים כמו Safari. (ניתן לשנות את ההגדרה הזו בקטע 'מקלדת' ב'העדפות מערכת').

תיבת דו-שיח של העדפות המקלדת.

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

במה ניתן להתמקד?

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

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

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

לא כל האלמנטים ניתנים למיקוד,

להתמקד בחוויית השימוש

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

הדמיה של אתר חברת תעופה.

הפרמטרים של הכרטיס שצריך לציין הם:

  • כיוון אחד
  • למלבורן
  • יציאה ב-12 באוקטובר 2017 (12.10.2017)
  • חוזרים ב-23 באוקטובר 2017 (23.10.2017)
  • מושב ליד החלון
  • אני לא רוצה לקבל שוברי פרסום

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

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

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

בחירת סוג המושב תלויה גם במקשי החיצים, או שאפשר להקליד "w", "a" או "n" כדי לעבור לאפשרות המושב. לאחר מכן תוכל להשבית את מבצעי קידום המכירות ברירת המחדל על ידי לחיצה על מקש הרווח כאשר תיבת הסימון ממוקדת. לסיום, מעבירים את המיקוד ללחצן החיפוש ולוחצים על Enter כדי לשלוח את הטופס.

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