יצירת כפתור נגיש באתר אינטרנט

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

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

כיצד נראה כפתור במסגרת אתר האינטרנט? כפתור לרוב נראה בצורת אליפה, מלבן או ריבוע בהתאם לעיצוב האתר או למבנה הטופס הקיים בו

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

פוקוס נראה לעין בעת הניווט לאותו כפתור

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

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

כפתור ללא פוקוס

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

הצגת כיצד צריך להיראות כפתור נגיש לאחר קבלת פוקוס

כפתור כולל פוקוס

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

מה ההבדל בין קישור לכפתור?

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

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

מהי הדרך הנכונה ביותר להנגיש את הכפתורים באתר לטכנולוגיות מסייעות?

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

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

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

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

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

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

שתפו פוסט זה
Share on facebook
Share on whatsapp
Share on linkedin
Share on twitter
Share on email

פוסטים נוספים בנושא הנגשת אתרים

מאמר בנושא בניית אתר נגיש לאנשים עם מוגבלות

בניית אתר נגיש

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

מעוניין שנבדוק עבורך האם האתר שלך נגיש?

השאר פרטים ואנו מבטיחים לחזור אליך בשעות הקרובות
web-a הנגשת אתרים

חזרו אליי בבקשה לגבי
נגישות באינטרנט