שיפור הקריאוּת של האתר שלך

Sofia Emelianova

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

אפשר להשתמש בכלי הפיתוח כדי:

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

איך מוצאים טקסט בניגודיות נמוכה

כדי לזהות טקסט בניגודיות נמוכה:

1. פותחים את כלי הפיתוח בדף.

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

   • סקירה כללית של CSS
   • (תצוגה מקדימה) בעיות
   • ‫Lighthouse

אפשר להתנסות באמצעות פתיחת ה-CodePen שלנו.

בעיות בניגודיות בחלונית 'סקירה כללית של CSS'

כדי לקבל סקירה כללית:

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

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

   

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

(תצוגה מקדימה) בעיות ניגודיות בכרטיסייה 'בעיות'

כדי לקבל רשימה של בעיות:

1. מפעילים את הדיווח על בעיות בניגודיות בכרטיסייה בעיות:
   1. פותחים את הגדרות > ניסיוני.
   2. בסרגל הסינון, מחפשים contrast issue.
   3. בוחרים באפשרות הפעלת דיווח אוטומטי על בעיות בניגודיות דרך חלונית הבעיות.
   4. לוחצים על טעינה מחדש של כלי הפיתוח בהודעה שמופיעה בחלק העליון.
2. פותחים את הכרטיסייה 'בעיות'.

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

   

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

בעיות בניגודיות בדוח Lighthouse

כדי להפיק דוח:

1. בכלי הפיתוח, פותחים את > Lighthouse.

2. יוצרים דוח Lighthouse עם ההגדרות הבאות:

   • מצב: ניווט (ברירת מחדל)
   • קטגוריות: נגישות
   • מכשיר: מחשב

   

3. לוחצים על טעינת דף וממתינים עד ש-Lighthouse ייצור את הדוח.

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

   

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

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

כדי לפתור בעיה של ניגודיות נמוכה:

1. מאתרים בעיה שקשורה לניגודיות ולוחצים על קישור לרכיב מושפע בחלונית CSS Overview, בכרטיסייה Issues או בדוח Lighthouse. כלי הפיתוח מעבירים אתכם לחלונית Elements ובוחרים את הרכיב המתאים.

   

   לדוגמה, בהדגמה הלא נגישה שלנו ב-CodePen, הרכיב הראשון שמושפע הוא h1.line1.

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

   

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

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

   

   כלי בחירת הצבעים מציין שיחס הניגודיות לא עומד בדרישות של רמות AA או AAA של ההנחיות של WebAIM.

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

   

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

   

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

שמירת השינויים

כדי לשמור את השינויים שביצעתם בכלי הפיתוח:

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

מה השלב הבא?

למידע נוסף:

• מידע כללי על נגישות
• נגישות של צבע וניגודיות