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

סופיה אמליאנובה

GitHub

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

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

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

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

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

כדי לגלות טקסט עם ניגודיות נמוכה:

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

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

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

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

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

   

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

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

   

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

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

   

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

   

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

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

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

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

מה השלב הבא?

למידע נוסף:

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