הנגשת אתר Shopify

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

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

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

מה החוק דורש מחנות Shopify

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

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

מה	מי מטפל	איפה זה ב-Shopify
מבנה התבנית, ניווט במקלדת, תפריטים, סינונים, עגלה וקופה	צוות פיתוח	קוד התבנית (Theme) ואפליקציות
צבעים, ניגודיות, גודל טקסט ומרווחים	מעצב ומתכנת	הגדרות התבנית וקובצי העיצוב
שם מוצר, תיאור, כותרות ורשימות	מנהלי התוכן	Products > עריכת מוצר
טקסט חלופי לתמונות מוצר ובאנרים	מנהלי התוכן	Products > תמונה > Edit > Add alt text
כותרת ותיאור לסרטונים וחלופה טקסטואלית	מנהלי התוכן	רכיב הווידאו בעורך התבנית
כותרת עמוד, תיאור וכתובת	מנהלי התוכן	Search engine listing
הצהרת נגישות	בעל החנות ורכז הנגישות	עמוד קבוע באתר, עם קישור מכל עמוד

3 שלבים בהנגשת אתר Shopify

שלב 1: בדיקה אוטומטית ובדיקה ידנית

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

שלב 2: תיקונים בתבנית ובתוכן

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

שלב 3: הצהרת נגישות

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

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

עמוד מוצר נגיש: שם, כותרות, רשימות וקישורים

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

• שם המוצר: הדבר הראשון שהלקוח פוגש. כתבו אותו ברור ומפורט, למשל "חולצת טי שרט עם שרוולים ארוכים", לא קוד פנימי.
• כותרות משנה: שם המוצר הוא H1. בתוך התיאור מסמנים כותרות משנה דרך תפריט Paragraph > Heading 2 (ו-Heading 3 לתת נושא). לא מדלגים רמות, ולא מדגישים טקסט במקום להגדיר כותרת.
• רשימות: צבעים, מידות ורכיבים מסמנים כרשימת תבליטים. שלבי שימוש לפי סדר מסמנים כרשימה ממוספרת. קורא המסך מודיע כמה פריטים יש ברשימה.
• קו תחתון רק לקישורים: לא מדגישים מילים בקו תחתון. קו תחתון שמור לקישורים, כדי שהם יהיו מזוהים.
• צבעים: בעורך יש בחירת צבע לטקסט. בחרו צבעים כהים על רקע בהיר, כדי לעמוד ביחס הניגודיות שהתקן דורש.
• קישורים: טקסט הקישור מתאר את היעד ("פרטי הבד והכביסה"), ולא "לחצו כאן".

עברית ב-Shopify: הצמדה לימין

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

בסרטון: עמוד מוצר נגיש ב-Shopify

• 0:32 השדות בעמוד עריכת המוצר, ושם מוצר ברור ומפורט.
• 2:39 הצמדת הטקסט לימין עם Ctrl+Shift.
• 3:41 תיוג כותרות משנה ב-Heading 2 מתוך תפריט Paragraph.
• 5:51 רשימת תבליטים לצבעים ולרכיבי המוצר.
• 9:34 קו תחתון רק לקישורים, וצבעים כהים לניגודיות תקינה.
• 11:36 הוספת קישור עם כותרת שמתארת את היעד.

מבנה מומלץ לתיאור מוצר

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

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

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

בסרטון: מבנה של שלושה חלקים

• 2:35 מבנה אחיד של שלוש פסקאות מרכזיות לכל מוצר.
• 3:05 הפסקה השיווקית: ארבעה עד שישה משפטים.
• 4:08 רכיבי המוצר, לפי סוג המוצר.
• 4:40 המשפט המסכם שמוביל להחלטה.

טקסט חלופי לתמונות מוצר ב-Shopify

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

איך מוסיפים טקסט חלופי לתמונת מוצר

1. במערכת הניהול עברו ל-Products ובחרו את המוצר.
2. גללו עד אזור התמונות (Media).
3. רחפו מעל התמונה ולחצו Edit.
4. לחצו על Add alt text, בצד ימין של החלון.
5. כתבו תיאור קצר ומדויק של מה שרואים בתמונה.
6. לחצו Save כדי לשמור.

איך כותבים טקסט חלופי טוב לתמונת מוצר

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

בסרטון: Add alt text בשתי דקות

• 0:00 למה כל תמונה באתר צריכה טקסט חלופי.
• 1:04 Edit מעל תמונת המוצר, ואז Add alt text.
• 1:34 כתיבת תיאור מדויק של המוצר ושמירה.

הנגשת סרטוני וידאו בחנות

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

1. Heading: כותרת שמסבירה במשפט אחד על מה הסרטון.
2. טקסט חלופי לתמונת הרקע (Cover image): התמונה שמופיעה מתחת לכפתור ההפעלה. כתבו שלחיצה מפעילה סרטון, ועל מה הוא.
3. חלופה טקסטואלית (Video alt text): תיאור מלא של מה שנאמר ומוצג בסרטון, כולל שמות ונתונים שמופיעים על המסך.

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

בסרטון: שלושת השדות של רכיב הווידאו

• 1:00 שדה Heading: כותרת הסרטון.
• 2:05 טקסט חלופי לתמונת הרקע דרך Cover image > Edit.
• 3:09 חלופה טקסטואלית מלאה לסרטון.

כותרת עמוד, תיאור וכתובת: Search engine listing

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

• Page title: כותרת העמוד. שם המוצר ושתיים או שלוש מילות מפתח שלקוח באמת מחפש. כל מוצר מקבל כותרת ייחודית.
• Meta description: תיאור קצר, שניים עד ארבעה משפטים ממוקדים. השדה מוגבל ל-320 תווים.
• URL handle: הכתובת של העמוד. קצרה, עם מילת המפתח המרכזית.

בסרטון: שלושת השדות של תוצאת החיפוש

• 1:02 איפה נמצא Search engine listing בעמוד המוצר.
• 2:07 כתיבת Page title עם מילות מפתח רלוונטיות.
• 5:45 Meta description, עד 320 תווים.
• 6:48 URL handle עם מילת המפתח המרכזית.

צ׳קליסט לפני שמוצר עולה לאוויר

• שם מוצר ברור ומפורט.
• תיאור עם כותרות משנה ורשימות, מוצמד לימין.
• טקסט חלופי לכל תמונה, ייחודי לכל אחת.
• קישורים עם טקסט שמתאר את היעד.
• סרטון עם כותרת, טקסט חלופי לתמונת הרקע וחלופה טקסטואלית.
• Page title, Meta description ו-URL handle מלאים.

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

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