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

Sofia Emelianova

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

בעזרת כלי הפיתוח אפשר:

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

חיפוש טקסט בניגודיות נמוכה

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

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

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

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

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

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

1. פותחים את הדף CSS Overview.
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, בכרטיסייה בעיות או בדוח Lighthouse. כלי הפיתוח יעבירו אתכם לחלונית Elements ויבחרו את הרכיב המתאים. לדוגמה, בדף ההדגמה הזה, הרכיב הראשון שמושפע הוא h1.line1.

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

   

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

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

   

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

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

   

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

   

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

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

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

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

מה השלב הבא?

מידע נוסף:

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