→ חזרה לבלוג

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

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

למה נגישות חנות אונליין חשובה במיוחד?

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

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

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

נגישות דפי מוצר

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

תמונות מוצר: כל תמונת מוצר צריכה טקסט חלופי (alt text) שמתאר את המוצר. לא מספיק לכתוב "חולצה" - כתבו "חולצת כותנה כחולה עם צווארון V, הדפס פרחוני". אם יש גלריית תמונות, ודאו שהיא ניתנת לניווט במקלדת ושכל תמונה מתוארת.

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

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

כפתור "הוסף לסל": הכפתור צריך להיות בולט, ניתן למיקוד במקלדת ובעל טקסט ברור. כשהמוצר מתווסף לסל, המשתמש צריך לקבל אישור - הודעה שמוקראת על ידי קורא המסך באמצעות aria-live.

מערכת סינון וחיפוש נגישה

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

• סינון במקלדת: כל מסנן צריך להיות ניתן לתפעול במקלדת. צ'קבוקסים, סליידרים של טווח מחיר ותפריטי בחירה - כולם צריכים לעבוד עם Tab ו-Enter.
• עדכון תוצאות: כשהמשתמש מפעיל מסנן, הוא צריך לדעת שהתוצאות השתנו. השתמשו ב-aria-live="polite" כדי להכריז "נמצאו 24 מוצרים" לאחר סינון.
• שדה חיפוש: שדה החיפוש צריך להיות מסומן בתווית ברורה ולתמוך בהשלמה אוטומטית נגישה. תוצאות ההשלמה האוטומטית צריכות להיות ניתנות לניווט במקלדת.
• מצב נוכחי: המסננים הפעילים צריכים להיות מוצגים בצורה ברורה, עם אפשרות להסיר כל מסנן בנפרד. ודאו שקורא מסך יכול לזהות אילו מסננים פעילים.

סל קניות נגיש

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

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

עדכון כמויות: אם יש כפתורי + ו-minus לעדכון כמויות, הם צריכים להיות מסומנים בצורה ברורה (aria-label="הוספת יחידה", aria-label="הסרת יחידה"). כשהכמות משתנה, הסכום הכולל צריך להתעדכן ולהיקרא.

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

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

תהליך תשלום (Checkout) נגיש

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

טפסי מילוי פרטים: כל שדה צריך תווית ברורה ומשויכת. שדות חובה צריכים להיות מסומנים עם aria-required="true". הסדר הלוגי של השדות צריך להתאים לסדר הניווט במקלדת. קבצו שדות קשורים ב-<fieldset> עם <legend> - למשל "כתובת למשלוח" ו"פרטי תשלום".

ולידציה והודעות שגיאה: כשהמשתמש עושה טעות בטופס, ההודעה צריכה להיות ברורה, ספציפית ומשויכת לשדה הנכון. "שגיאה" לא מספיק - כתבו "מספר כרטיס האשראי חייב להכיל 16 ספרות". השתמשו ב-aria-describedby כדי לקשר את הודעת השגיאה לשדה, וב-aria-invalid="true" לסמן שדה שגוי.

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

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

דרישות חוקיות לחנויות אונליין בישראל

חנות אונליין בישראל כפופה לאותן דרישות נגישות כמו כל אתר שנותן שירות לציבור. אבל יש כמה נקודות ספציפיות שכדאי להכיר:

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

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

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

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

איך מנגיש עוזר לחנויות אונליין?

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

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

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

סיכום - רשימת בדיקה לחנות אונליין נגישה

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

1. כל תמונות המוצרים כוללות טקסט חלופי מתאר.
2. בוררי מידה, צבע ואפשרויות מוצר נגישים למקלדת ולקורא מסך.
3. מערכת הסינון והחיפוש עובדת עם מקלדת בלבד.
4. סל הקניות ניתן לעדכון ולניווט בלי עכבר.
5. כל שדות הטופס בתהליך התשלום כוללים תוויות.
6. הודעות שגיאה ברורות ומשויכות לשדה הנכון.
7. אישור הזמנה מוצג בצורה נגישה וברורה.
8. סרגל נגישות (כמו מנגיש) מותקן ופועל בכל הדפים.
9. הצהרת נגישות מפורסמת באתר.
10. קיים ערוץ תקשורת חלופי להשלמת רכישות.

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

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