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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

    טבלה של רכיבים עם בעיות ניגודיות בכרטיסייה 'בעיות'.

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

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

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

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

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

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

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

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

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

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

    הקטע 'יחס ניגודיות' בבורר הצבעים.

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

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

    הצבע שהוחל עומד בהנחיות.

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

    בחירת גוון צבע מתחת לקו התחתון כדי להישאר ברמה AAA.

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

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

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

מה השלב הבא?

למידע נוסף: