1. מבוא
ניגודיות גרועה היא בעיית הנגישות מס' 1 באינטרנט, בואו ללמוד איך כלי הפיתוח יכולים לעזור לכם להבין, לגלות ולתקן את הבעיות האלה.
מה'לי תלמדו
- הסבר על בעיית ניגודיות נמוכה
- איך למצוא טקסט בניגודיות נמוכה
- איך לתקן טקסט עם ניגודיות נמוכה
מה צריך להשתמש בו
- מחשב פעיל ו-Wi-Fi ניתן למימוש
- Chrome מגרסה 87 ואילך.
מה תעשו
פתרון בעיות של ניגודיות נמוכה בדף אינטרנט.
2. התחלה
לחץ על הקישור הבא כדי לפתוח את הדף עם טקסטים בניגודיות נמוכה:
לאחר מכן, בדף פותחים את כלי הפיתוח של Chrome.
3. הסבר על בעיית ניגודיות נמוכה
לפחות 1 מ-20 אנשים סובלים מחוסר ראייה קשיים כאלה מקשים על ההבחנה בין צבעים שונים, מה שיכול להגביר בעיות ניגודיות.
לדוגמה, כמפתח בעל ראייה קבועה, ייתכן שתראה את הטקסט בדף נראה לך בסדר.
בחלק מהמקרים עדיין אפשר לקרוא טקסט עם ניגודיות נמוכה, אבל לאנשים עם לקות ראייה אין את ההרשאה הזו.
כלי הפיתוח יכולים לעזור לכם להבין את הליקויים החזותיים האלה על ידי מתן הדמיה של לקות ראייה באפליקציית האינטרנט שלכם.
פותחים את תפריט הפקודה. מתחילים להקליד Rendering ובוחרים באפשרות Show Rendering. בכרטיסייה רינדור, גוללים למטה לאפשרות המולצת את ראייה שקופה.
כלי הפיתוח יכולים לבצע אמולציה של טשטוש ראייה והסוגים הבאים של לקות ראייה:
- עיוורון לאדום: חוסר יכולת להבחין בכל נורה אדומה.
- עיוורון לירוק: חוסר יכולת להבחין לאור ירוק.
- עיוורון לכחול: חוסר יכולת להבחין בכל תאורה כחולה.
- אכרומטופסיה: חוסר יכולת לקלוט כל צבע מלבד גוונים של אפור (נדיר ביותר).
אפשר לנסות לבחור אפשרויות אחרות ולחוות את הדף בעצמך. לדוגמה, כדאי לנסות לבחור בעיוורון לאדום. ניגודיות הצבעים של הטקסט חמורה עוד יותר – היא כמעט לא ניתנת לקריאה.
4. איך למצוא טקסט בניגודיות נמוכה
יש כמה דרכים לגלות טקסט עם ניגודיות נמוכה.
הסבר קצר על מצב בדיקה
הסבר קצר על מצב בדיקה שמופיע בחלק העליון של דף האינטרנט מציג את יחס הניגודיות של רכיבי טקסט.
לדוגמה, לוחצים על הסמל Check בפינה הימנית העליונה של כלי הפיתוח כדי לבדוק את המילה "very". יחס הניגודיות של הטקסט מוצג בהסבר הקצר. סמל הקריאה שלצד היחס מצביע על יחס ניגודיות נמוך.
.
יחס ניגודיות בבורר הצבעים
לחלופין, אפשר להציג את יחס הניגודיות בבוחר הצבעים.
בודקים את המילה "very;quot;. בחלונית סגנונות, לוחצים על התצוגה המקדימה של הצבע של נכס ה-CSS color. יחס הניגודיות מוצג בבורר הצבעים. סמל החסימה האדום מציין שיחס הניגודיות נמוך.
.
[ניסיוני] זיהוי בעיות הקשורות לניגודיות נמוכה בכל הדף באמצעות החלונית סקירה כללית של CSS
יהיה קשה מדי לעבור על כל רכיב בדף כדי לבדוק את יחס הניגודיות. החלונית סקירה כללית של CSS יכולה לעזור לכם לזהות את כל הטקסטים של הניגודיות הנמוכה בדף.
לאחר הצילום של הסקירה הכללית של שירות CSS, גוללים למטה לקטע צבעים כדי להציג את כל בעיות הניגודיות. לוחצים על אחד מהצבעים, למשל, הרקע הצהוב עם טקסט ליים ובכלי הפיתוח תוצג רשימה של רכיבים שיש בהם בעיה. לוחצים על רכיב ברשימה כדי לפתוח את הרכיב בחלונית רכיבים.
5. איך לתקן טקסט עם ניגודיות נמוכה
כלי הפיתוח מספקים הצעות לצבעי טקסט עם ניגודיות נמוכה.
קו ניגודיות מומלץ
בודקים את המילה "very;quot;. בחלונית סגנונות, לוחצים על התצוגה המקדימה של הצבע של נכס ה-CSS color. מרחיבים את הקטע יחס ניגודיות.
כלי הפיתוח מספקים דירוג של יחס צבע AAA ו-AA:
- AA: יחס הניגודיות של הצבעים עומד בהמלצה המינימלית
- AAA: ניגודיות הצבעים עומדת בהמלצה המשופרת.
בדוגמה שלנו, שתי שורות מופיעות בבורר החזותי בחלק העליון של בוחר הצבעים. מלמעלה:
- שורה ראשונה: AA. יש לבחור צבע מתחת לשורה הזו כדי לעמוד בהמלצה המינימלית.
- שורה שנייה: AAA. כדי להציג את ההמלצה המשופרת, יש לבחור צבע מתחת לשורה הזו.
לוחצים ומתקנים את הצבע באופן ידני:
- סימן וי אחד פירושו שהרכיב עומד בהמלצה המינימלית.
- שני סימני וי פירושם שהם עומדים בהמלצה המשופרת.
.
הצעות צבע נגישות
כלי הפיתוח מציעים גם צבעים נגישים עבור AA וגם עבור AAA, כך שיהיה לכם קל יותר ללחוץ ולתקן אותם.
לוחצים על הצבע המוצע לצד יחס ניגודיות וצבע הטקסט תוקנה!
.
עכשיו אפשר לנסות לתקן את כל הטקסטים של ניגודיות נמוכה בדף, ולתעד מחדש את הסקירה הכללית של CSS כדי לבדוק אם כל בעיות הניגודיות תוקנו.
6. מעולה!
מעולה! השלמת את מעבדת הקוד הזו!