כפתור פשוט בטופס יצירת קשר או חיפוש עשוי להיראות מושלם על המסך, אך עבור אדם הנעזר בתוכנת הקראה הוא עלול להישמע כ"כפתור ללא תווית" או לא להישמע כלל. קורא מסך הוא תוכנה טכנולוגית מסייעת המתרגמת מידע חזותי המוצג על גבי הצג לפלט קולי או לתצוגת ברייל מתחדשת. כאשר אלמנט אינטראקטיבי אינו מוגדר כראוי, המערכת אינה מעבירה שום מידע על ייעודו, והגולש נתקל במחסום בלתי עביר דווקא בשלב שבו הוא מבקש לפנות אליכם או לבצע רכישה.
במדריך זה תלמדו מה הכפתור שלכם באמת אומר למבקרים הנעזרים בטכנולוגיה מסייעת, כיצד פרט עיצובי קטן בדף הבית מכריע את חוויית השימוש של לקוחות רבים, ואיך מבצעים בדיקה ראשונית פשוטה שמבטיחה שהאתר שלכם פתוח, מזמין ומכבד כל אדם.
מה קורה כאשר כפתור לא מספר מה הוא עושה?
דמיינו שאתם מגיעים למבנה ציבורי חדש, עומדים מול דלת הכניסה, ולידה לוח בקרה עם שלושה מקשים חלקים לחלוטין ללא שום כיתוב, סימון או צבע. אין לכם דרך לדעת איזה מקש פותח את הדלת, איזה מקש מפעיל אזעקה ואיזה מקש מכבה את האור. תחושת חוסר האונים הזו היא בדיוק מה שחווה גולש עיוור או לקוי ראייה כאשר הוא מגיע לטופס יצירת הקשר באתר שלכם ושומע רק את המילה "כפתור".
טכנולוגיות מסייעות סורקות את מבנה הדף ומקריאות לגולש את הנתונים המוגדרים בקוד. כאשר מעצב או מפתח משתמש באייקון של מעטפה או זכוכית מגדלת מבלי להצמיד לו טקסט נלווה, הדפדפן אינו מסוגל לנחש את הכוונה. עבור מי שרואה את המסך, המשמעות של סמל זכוכית המגדלת ברורה מאליה; אך עבור מי שמקשיב לאתר, הכפתור הוא חידה.
המצב הזה אינו נובע מחוסר אכפתיות, אלא מחוסר מודעות לאופן שבו מחשב מפרש עיצוב חזותי. כאשר מבינים איך האתר שלכם נשמע באמת, קל להבין מדוע אלמנט שנראה נקי ומינימליסטי למבט עין יכול להפוך למלכודת שמונעת פניות מלקוחות שרוצים לקבל מכם שירות.
בדיקת נגישות ראשונית לדף הבית: למה להתחיל מטפסים וכפתורים?
דף הבית הוא חלון הראווה של העסק, והטפסים והכפתורים שבו הם הדלת הראשית שדרכה מתבצעת הפעולה. בין אם מדובר בהרשמה לניוזלטר, חיפוש בקטלוג או שליחת הודעה, הכפתורים הם נקודת המפגש הקריטית ביותר בין הגולש לבין השירות שלכם. כשל בדף הבית מאותת למבקר ששאר חלקי האתר אינם ערוכים לקבל אותו.
בדיקה ראשונית אינה דורשת ידע טכני מעמיק או הרצת סקריפטים מסובכים. היא מתחילה בהבנה של האופן שבו המידע זורם. על פי עקרונות הנגישות הבינלאומיים המוגדרים במסמך W3C Web Content Accessibility Guidelines, לכל רכיב פעיל באתר חייב להיות שם נגיש (Accessible Name). השם הנגיש הוא המונח המדויק שמערכת ההפעלה מעבירה לתוכנת ההקראה כדי לייצג את הרכיב.
כאשר אנחנו עורכים בדיקה מקיפה ובוחנים מה אנחנו בודקים באתרים של נותני שירות, חנויות ועמותות, אנחנו רואים שוב ושוב שכפתורים בטפסים מייצרים את אחוזי הנטישה הגבוהים ביותר בקרב משתמשי טכנולוגיה מסייעת. תיקון נקודתי של רכיבים אלו פותר לעיתים קרובות את החסימה המרכזית באתר כולו.
מה הכפתור שלכם אומר בעת מעבר מקלדת?
רבים מבעלי האתרים מופתעים לגלות שלא רק משתמשי קורא מסך נתקלים בבעיות עם כפתורים. משתמשים עם מוגבלות מוטורית, אנשים המתאוששים מפציעה ביד, או אפילו אדם שמחזיק תינוק ביד אחת וגולש בלפטופ, מוותרים לעיתים קרובות על העכבר ומנווטים באמצעות מקלדת בלבד.
כאשר לוחצים על מקש ה-Tab כדי לעבור בין שדות הטופס בדף הבית, המקלדת צריכה לעצור על הכפתור ולהדגיש אותו באמצעות מסגרת ויזואלית ברורה המכונה חיווי פוקוס (Focus Indicator). אם הכפתור נבנה מתגית תמונה פשוטה או מאלמנט עיצובי שאינו כפתור תקני, הפוקוס של המקלדת ידלג עליו לחלוטין. הגולש ימלא את שמו, הטלפון וההודעה, אך לא יוכל לשלוח את הטופס לעולם.
| רכיב בטופס | המראה לעין | מה שקורא המסך מקריא (ללא הנגשה) | החוויה הנגישה הנכונה |
|---|---|---|---|
| כפתור שליחת טופס | אייקון של חץ | "כפתור" או "ריק" | "שליחת הודעה, כפתור" |
| שדה חיפוש | אייקון של זכוכית מגדלת | "כפתור ללא תווית" | "חיפוש באתר, כפתור" |
| סגירת חלון קופץ | אייקון איקס (X) | ללא קריאה כלל | "סגירת חלון, כפתור" |
| הסרת מוצר מהסל | אייקון פח אשפה | "תמונה" | "הסרת מוצר מהעגלה, כפתור" |
שלושה כשלים נפוצים בכפתורים שאנחנו פוגשים בבדיקות
כשבוחנים אתרים קיימים, הכשלים הללו חוזרים על עצמם שוב ושוב. הם אינם נובעים מכוונת זדון אלא מבחירות עיצוב מודרניות ששוכחות את הפונקציונליות הבסיסית של הרשת.
- שימוש באייקונים בלבד ללא טקסט חלופי: עיצובים מודרניים מעדיפים לעיתים מינימליזם, ולכן מציגים כפתור חיפוש עם אייקון זכוכית מגדלת בלבד. אם לא מוסיפים בקוד תווית טקסט סמויה, האלמנט נשאר חסר שם.
- כפתורים שאינם כפתורים: שימוש באלמנטים עיצוביים כמו
<div>או<span>שעוצבו להיראות כמו כפתורים אך אינם מקבלים פוקוס מקלדת ואינם מוגדרים ככפתור במערכת הנגישות של הדפדפן. תיעוד רשמי של MDN Web Docs אודות תפקיד כפתור מדגיש כי רכיב תקני של דפדפן כולל התנהגויות מקלדת מובנות שקשה לשחזר בצורה ידנית. - מלל עמום וגנרי: כפתור שעליו כתוב "לחץ כאן", "קרא עוד" או "המשך", מנותק מההקשר שבו הוא נמצא. כאשר משתמש קורא מסך מבקש מהתוכנה להקריא לו רשימה של כל הכפתורים בדף כדי לקפוץ ישירות לפעולה הרצויה, הוא שומע שוב ושוב "לחץ כאן, לחץ כאן, לחץ כאן" – ללא כל הבחנה בין הרשמה לסדנה לבין מחיקת חשבון.
איך לתקן את הכפתורים ולהפוך את האתר למזמין ונגיש
תיקון הכפתורים באתר אינו דורש תכנון מחדש של כל הממשק, אלא דיוק של מספר החלטות הנדסיות ועיצוביות פשוטות. כאשר מיישמים את ההנחיות הללו, חוויית השימוש משתפרת עבור כולם – כולל גולשים מהטלפון הנייד ואנשים מבוגרים שמסתמכים על קריאות ברורה.
- העדיפו כפתור עם טקסט גלוי: המלל הברור ביותר הוא מלל שכולם רואים. במקום להסתפק באייקון של מעטפה, הוסיפו את המילה "שליחה" או "שליחת טופס". הבהירות הזו מסייעת לכלל המשתמשים, כולל אנשים עם קשיים קוגניטיביים או הבנת הנקרא.
- השתמשו באלמנטים סמנטיים תקניים: ודאו שכל כפתור באתר נבנה באמצעות תגית הכפתור המקורית של HTML. תגית זו מבטיחה תמיכה אוטומטית בהקשות מקלדת, במקש הרווח ובמקש האנטר.
- הוסיפו תיאור טקסטואלי סמוי היכן שחייבים: אם העיצוב מחייב כפתור אייקון בלבד (כמו כפתור תפריט המבורגר במובייל או כפתור סגירה של חלונית), דאגו שהמפתח יוסיף תווית טקסטואלית ברורה שנקראת רק על ידי טכנולוגיות מסייעות.
- שמרו על ניגודיות צבעים מספקת: ודאו שצבע הטקסט או האייקון שעל גבי הכפתור בולט בבירור על רקע הכפתור עצמו, ושהכפתור כולו בולט על רקע האתר. מידע נוסף על התאמת הצבעים והמבנה תוכלו למצוא במאמר שלנו על איך לפתוח את האתר לכולם: מדריך מעשי לבדיקת נגישות ידידותית.
בדיקה פשוטה אחת של כפתורי דף הבית עשויה להאיר צדדים שלמים באתר שלכם שלא הייתם מודעים לקיומם. אתר אינטרנט נגיש הוא לא עניין של סיסמאות מורכבות, אלא של תשומת לב אנושית לפרטים הקטנים שמאפשרים לכל אדם להשתמש בו בכבוד ובנוחות.
אם אתם רוצים לוודא שדף הבית שלכם והאתר כולו מדברים בקול ברור לכל גולש ופותחים את הדלת לכולם, אנו מזמינים אתכם ליצור איתנו קשר לבדיקת נגישות מקיפה ומקצועית בכתובת negishut.app.
שאלות נפוצות
למה קורא מסך לא מקריא כפתור עם אייקון מעטפה?
קורא מסך אינו יכול לפענח תמונות או גרפיקה וקטורית באופן אוטונומי ללא הנחיה מפורשת בקוד. אם לכפתור אין טקסט נלווה או הגדרת תווית נגישה, התוכנה אינה מזהה תוכן טקסטואלי ומקריאה רק את סוג האלמנט, כלומר "כפתור", מבלי להסביר למשתמש לאן לחיצה עליו תוביל.
האם כפתור נגיש חייב לכלול טקסט גלוי על המסך?
לא תמיד, אך טקסט גלוי הוא הפתרון המומלץ והאינטואיטיבי ביותר לכלל המשתמשים. אם מגבלות עיצוב מחייבות שימוש באייקון בלבד, ניתן להטמיע תווית נגישות טכנית בקוד האתר המיועדת אך ורק למערכות ההקראה, כך שהיא אינה משנה את המראה החזותי של העיצוב.
איך אני יכול לבדוק בעצמי את הכפתורים בדף הבית?
הבדיקה הפשוטה ביותר מתבצעת באמצעות המקלדת בלבד. הניחו את העכבר בצד ועברו בין האלמנטים בדף באמצעות מקש ה-Tab. ודאו שאתם רואים בבירור היכן הפוקוס נמצא, ושאתם מסוגלים להפעיל כל כפתור ולשלוח את הטופס באמצעות לחיצה על מקש Enter או מקש הרווח.
מה ההבדל בין קישור לבין כפתור מבחינת נגישות?
קישור נועד להעביר את הגולש למיקום חדש, כמו עמוד אחר באתר או כתובת חיצונית. כפתור נועד לבצע פעולה בתוך העמוד, כגון שליחת נתונים, פתיחת תפריט או מחיקת פריט. ערבוב ביניהם מטעה משתמשי טכנולוגיות מסייעות המצפים להתנהגות מערכתית מוגדרת בהתאם לסוג הרכיב.