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

Sofia Emelianova

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

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

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

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

איתור טקסט בניגודיות נמוכה

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

1. פותחים את כלי הפיתוח בדף. במדריך הזה אפשר להשתמש בדף ההדגמה הזה.

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

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

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

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

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

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

   

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

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

הערה: זוהי תכונה בתצוגה מקדימה שמושבתה כברירת מחדל.

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

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

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

   

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

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

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

1. ב-DevTools, פותחים את כרטיסיות נוספות > Lighthouse.
2. יוצרים דוח Lighthouse עם ההגדרות הבאות:
   • מצב: ניווט (ברירת המחדל)
   • קטגוריות: נגישות
   • מכשיר: מחשב
3. לוחצים על ניתוח טעינת הדף וממתינים ליצירת הדוח על ידי Lighthouse.
4. גוללים למטה לקטע ניגודיות, וברשימה של הרכיבים לוחצים על קישור לרכיב מושפע.
5. פותרים את הבעיה כפי שמתואר בקטע תיקון טקסט עם ניגודיות נמוכה.

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

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

1. מוצאים בעיה של ניגודיות ולוחצים על קישור לרכיב מושפע בחלונית סקירה כללית של CSS, בכרטיסייה בעיות או בדוח Lighthouse. חלון DevTools יעביר אתכם לחלונית Elements (רכיבים) ויבחור את הרכיב המתאים. לדוגמה, בדף הדגמה הזה, הרכיב הראשון מושפע מ-h1.line1.

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

   

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

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

   

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

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

   

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

   

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

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

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

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

מה השלב הבא?

למידע נוסף:

• מידע נוסף על נגישות באופן כללי
• במיוחד נגישות של צבע וניגודיות