נגישות: הכנת הטקסט והגרפיקה
8 דקות
גולשים בעלי ליקויי ראייה עלולים להתקשות להפריד בין התמונות והתוכן לבין הרקע של עמודי האתר, ולכן מומלץ לבדוק ולשנות את ניגודיות הצבעים באתר לפי הצורך.
ההמלצות שלנו
כדי לשפר את הנגישות עבור גולשים בעלי ליקויי ראייה שונים, אנחנו ממליצים על הדברים הבאים:
- לשנות את הניגודיות של צבע הטקסט וצבע הרקע ליחס של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.
- להשתמש ביחס ניגודיות של 3:1 לפחות לגרפיקה ולאלמנטים אחרים של ממשק המשתמש (כמו גבולות של שדות בטפסים, פלייסהולדרים וכו').
- להשתמש ביחס ניגודיות של 7:1 לפחות לטקסט רגיל ו-4.5:1 לטקסט גדול ברמה AAA.
כדאי לדעת:
טקסט נחשב גדול כשהוא מעל 14 נקודות (כ-18 פיקסלים) ומודגש או 18 נקודות (כ-24 פיקסלים).
איפה רואים את קודי הצבעים?
אתם יכולים למצוא את קודי הצבעים בכלי בניית האתרים שאתם משתמשים בו (Studio Editor או Wix Editor).
Studio Editor
Wix Editor
- בחרו את האלמנט הרלוונטי (טקסט, רקע של סטריפ, תיבת קונטיינר וכו ') וגלשו לבחירת הצבעים .
- עברו עם העכבר מעל הצבעים כדי לראות את הקודים שלהם.
בדיקת ניגודיות צבעים:
יש לא מעט אתרים ותוספים לדפדפנים (כמו Contrast Checker) שמאפשרים לבדוק את הניגודיות של הצבעים על ידי השוואה בין צבעי הרקע והחזית (באמצעות הקודים של הצבעים). כדי לבדוק את הניגודיות של צבעי הטקסט ותמונת הרקע, מומלץ להשתמש בכלי Colour Contrast Analyser, שמאפשר לכם לבחור את צבע הרקע ולבדוק אותו.
התאמת ניגודיות צבעים
אתם יכולים להשתמש באשף הנגישות ב-editor כדי למצוא ולהתאים ניגודיות צבעים נמוכה באתר - לא משנה אם אתם משתמשים ב-Wix Editor או ב-Studio Editor. האשף סורק את האתר כדי לבדוק אם יש בעיות נגישות פוטנציאליות, ומציג דרכים לשיפור נגישות האתר.
ברוב האלמנטים, אתם יכולים לבצע שינויים בתוך האשף עצמו. עם זאת, יש אלמנטים מסוימים (למשל אלמנטים של אפליקציות אתר) שאין כרגע אינטגרציה מלאה בינם לבין האשף, ויש צורך לבדוק או לשנות אותם ידנית.
Studio Editor
Wix Editor
- עברו ל-editor.
- הקליקו על Settings (הגדרות) בסרגל העליון של ה-editor.
- הקליקו על Accessibility Wizard (אשף הנגישות).
- בחרו ב-Scan Site (סריקת האתר).
- הקליקו על הלשונית Detected issues (בעיות שזוהו).
- בחרו עמוד מהרשימה.
- הקליקו על Improve color contrast (שיפור ניגודיות הצבעים).
- בחרו את האלמנט הרלוונטי והתאימו אותו לפי הצורך:
עריכת הניגודיות באשף
שינוי ידני של הניגודיות
.
בדיקה ידנית של ניגודיות הצבעים
יכול להיות שבאתר שלכם יש בעיית ניגודיות צבעים שהאשף לא זיהה. מומלץ לבדוק ידנית את תוכן האתר עם Wix Contrast Checker, ולכוונן את ניגודיות האתר לפי הצורך.
אתם יכולים להתקין את ה-Contrast Checker של פלטפורמת בניית האתרים שלכם (Wix Editor או Studio Editor). אם האלמנטים לא עומדים בדרישות, תוכלו גם לבדוק יחסי ניגודיות חדשים בעזרת כלי הבדיקה.
Studio Editor
Wix Editor
כדי לבדוק את הניגודיות:
- (בפעם הראשונה בלבד) התקינו את התוסף ב-editor שלכם.
- הקליקו על Tools
(כלים) מימין למעלה ב-editor. - הקליקו על Editor Add-ons (תוספים ל-Editor).
- הקליקו על Contrast Checker (בדיקת ניגודיות).
- השתמשו בתיבות הצבעים כדי לבחור את צבע האלמנט והרקע בכלי הבדיקה, או הדביקו את קודי הצבעים הרלוונטיים.
כדי לכוונן את הניגודיות:
- התאימו את צבעי החזית והרקע ב-Contrast Checker ליחס המומלץ.
- העתיקו את קודי הצבעים מהפינה הימנית התחתונה של פלטת הצבעים.
- הקליקו על האלמנט הרלוונטי ב-editor.
- פתחו את פלטת בחירת הצבעים מהגדרות העיצוב של האלמנט.
- הקליקו על Add (הוספה) ליד My colors (הצבעים שלי).
- הדביקו את הקוד שהועתק בשדה.
טיפ:
אופן פתיחת הגדרות העיצוב תלוי באלמנט, אבל בדרך כלל אפשר למצוא אותן על ידי בחירת האלמנט ואז לחיצה על אייקון העיצוב 
.
.באתר שלכם מוצגים תרשימים או נתונים?
מומלץ להשתמש בצבעים עם ניגודיות גבוהה לנתונים באתר. עם זאת, מומלץ גם להשתמש בסימונים ויזואליים אחרים (כמו מרקמים ודפוסים) כדי להבדיל בין הנתונים.
השלב הבא:
חזרו אל צ'קליסט הנגישות כדי להמשיך לשפר את נגישות האתר.