עזרה
התחברות

נגישות עבור ערכות נושא

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

ההנחיות להלן נוצרו בהתחשב ב-Web Content Accessibility Guidelines (WCAG). מכיוון שישנם גורמים רבים שיש לקחת בחשבון בעת יצירת אתר אינטרנט נגיש, מעקב אחר ההנחיות להלן בלבד אינו מבטיח שהחנות המקוונת שלך תהיה נגישה במלואה. ניתן ללמוד עוד על נגישות באינטרנט על-ידי ביקור באתר של WCAG, או על-ידי עיון ב-משאבים המפורטים להלן.

בעמוד זה

נגישות טקסט

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

ניגודיות צבעים

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

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

בלוק טקסט באפור בהיר על רקע לבן אחיד.

בדוגמה הבאה, יחס הניגודיות של הטקסט הוא 4.8:1, ולקוחות רבים ימצאו אותו קל יותר לקריאה.

בלוק טקסט באפור כהה על רקע לבן אחיד.

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

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

כותרות טקסט

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

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

גודל ויישור טקסט

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

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

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

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

בלוק טקסט המיושר לשמאל. קיים ריווח עקבי בין המילים.

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

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

קישורי טקסט

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

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

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

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

טקסט חלופי לתמונות

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

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

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

שני חברים לובשים תרמילים, חובקים זה את זה ומביטים באוקיינוס

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

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

נגישות של מצגות וסרטונים

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

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

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

מצגות

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

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

סרטונים

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

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

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

תמיכה במקלדת

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

מסך כניסת לקוחות בחנות מקוונת המציג שדות למילוי דוא"ל וסיסמה. שדה הדוא"ל מוקף במסגרת כחולה.

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

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

משאבים

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

משאבים בנושא ניגודיות צבעים

  • Colors with Good Contrast, מאמר מתוך יוזמת הנגישות באינטרנט (Web Accessibility Initiative)
  • Contrast Ratio, כלי מקוון שבו ניתן להשתמש כדי למצוא את יחס הניגודיות בין שני צבעים
  • Color Contrast Analyzer, יישום יחס ניגודיות להורדה שפותח על ידי Paciello Group

משאבים בנושא טקסט

משאבים בנושא טקסט חלופי

משאבי מצגות וסרטונים

משאבים בנושא תמיכת מקלדת

בסעיף זה