הדף הזה מכיל מידע מקיף על תכונות הנגישות בכלי הפיתוח ל-Chrome. התוכנית מיועדת למפתחי אתרים:
- הבנה בסיסית בכלי הפיתוח, למשל איך לפתוח אותם.
- אתם מכירים את עקרונות הנגישות והשיטות המומלצות.
המטרה של ההפניה הזו היא לעזור לכם לגלות את כל הכלים הזמינים ב-DevTools שיכולים לעזור לכם לבדוק את הנגישות של דף.
במאמר ניווט ב-Chrome DevTools With Assistive Technology מוסבר איך מנווטים ב-DevTools באמצעות טכנולוגיה מסייעת כמו קורא מסך.
אפשר לעיין במאמר מידע על נגישות כדי ללמוד איך לפתח אתרים נגישים.
סקירה כללית של תכונות הנגישות בכלי הפיתוח ל-Chrome
בקטע הזה מוסבר איך כלי הפיתוח משתלבים בערכת הכלים הכוללת לנגישות.
כדי להחליט אם דף מסוים נגיש, צריך להביא בחשבון שתי שאלות כלליות:
- האם אפשר לנווט בדף באמצעות מקלדת או קורא מסך?
- האם רכיבי הדף מסומנים כראוי לקוראי מסך?
באופן כללי, כלי הפיתוח יכולים לעזור לתקן שגיאות שקשורות לשאלה 2, כי קל לזהות אותן באופן אוטומטי. שאלה מס' 1 חשובה לא פחות, אבל לצערנו כלי הפיתוח לא יכולים לעזור בעניין. הדרך היחידה למצוא שגיאות שקשורות לשאלה מס' 1 היא לנסות להשתמש בדף עם מקלדת או קורא מסך בעצמכם. למידע נוסף, ראו ביצוע בדיקת נגישות.
בדיקת הנגישות של דף
באופן כללי, אפשר להשתמש בבדיקות הנגישות בחלונית Lighthouse כדי לקבוע אם:
- דף מסומן כראוי לקוראי מסך.
- לרכיבי הטקסט בדף יש יחס ניגודיות מספיק. כדאי לעיין גם במאמר איך לשפר את הקריאוּת של האתר.
כדי לבדוק דף:
- עוברים אל כתובת ה-URL שרוצים לבדוק.
בכלי הפיתוח, לוחצים על הכרטיסייה Lighthouse. כלי הפיתוח מציגים מגוון אפשרויות להגדרה.
עבור מכשיר, בוחרים באפשרות נייד אם רוצים לדמות מכשיר נייד. האפשרות הזו משנה באופן שונה את מחרוזת סוכן המשתמש ומשנה את הגודל של אזור התצוגה. אם הגרסה לנייד של הדף מוצגת באופן שונה מהגרסה למחשב, לאפשרות הזו עשויה להיות השפעה משמעותית על תוצאות הביקורת.
בקטע Lighthouse, מוודאים שהאפשרות נגישות מופעלת. משביתים את הקטגוריות האחרות אם רוצים להחריג אותן מהדוח. אם אתם רוצים לגלות דרכים אחרות לשפר את איכות הדף, השאירו אותן מופעלות.
בקטע Throttling אפשר לווסת את הרשת ואת המעבד (CPU), המידע הזה שימושי לניתוח ביצועי עומסים. האפשרות הזו לא צריכה להיות רלוונטית לציון הנגישות שלכם, כך שתוכלו להשתמש בכל מה שתבחרו.
תיבת הסימון Clear Storage מאפשרת לפנות את כל נפח האחסון לפני טעינת הדף, או לשמור נפח אחסון בין טעינות של הדף. גם האפשרות הזו ככל הנראה לא רלוונטית לציון הנגישות שלכם, כך שתוכלו להשתמש בכל מה שמעדיפים.
לוחצים על יצירת דוח. אחרי 10 עד 30 שניות, כלי הפיתוח מפיק דוח. בדוח שלכם מופיעים טיפים שונים לשיפור הנגישות של הדף.
אפשר ללחוץ על ביקורת כדי לקבל מידע נוסף עליה.
כדי לעיין במסמכי הביקורת, לוחצים על מידע נוסף.
למידע נוסף: תוסף aXe
מומלץ להשתמש בתוסף aXe או בתוסף של Lighthouse במקום בחלונית של Lighthouse שזמינה כברירת מחדל ב-Chrome. בדרך כלל הם מספקים את אותו המידע, כי aXe הוא המנוע הבסיסי שמפעיל את חלונית Lighthouse. לתוסף aXe יש ממשק משתמש שונה, והוא מתאר את הביקורות בצורה מעט שונה.
אחד היתרונות של תוסף aXe בחלונית הביקורות הוא שהוא מאפשר לבדוק צמתים שנכשלו ולהדגיש אותם.
החלונית 'נגישות'
בחלונית הנגישות אפשר לראות את עץ הנגישות, מאפייני ה-ARIA ומאפייני הנגישות המחושבים של צומתי DOM.
כדי לפתוח את חלונית הנגישות:
- לוחצים על הכרטיסייה רכיבים.
- בעץ DOM, בוחרים את הרכיב שרוצים לבדוק.
- לוחצים על הכרטיסייה נגישות. יכול להיות שהכרטיסייה הזו מוסתרת מאחורי הלחצן More Tabs
.
הצגת מיקום של רכיב בעץ הנגישות
עץ הנגישות הוא קבוצת משנה של עץ ה-DOM. הוא מכיל רק רכיבים מעץ ה-DOM שרלוונטיים ושימושיים להצגת תוכן הדף בקורא מסך.
ניתן לבדוק מיקום של רכיב בעץ הנגישות מחלונית הנגישות.
התצוגה הזו מאפשרת לחקור רק צומת אחד ואת ישויות האב שלו. כדי לבחון את כל עץ הנגישות, בצעו את השלבים הבאים.
(תצוגה מקדימה) בוחנים את עץ הנגישות במסך מלא
תצוגת הדף המלא של עץ הנגישות מאפשרת לחקור את כל העץ ועוזרת להבין טוב יותר איך תוכן האינטרנט חשוף לטכנולוגיה מסייעת.
כדי לחקור את עץ הנגישות:
- מסמנים את האפשרות
הפעלת עץ נגישות בדף מלא. בסרגל הפעולות שלמעלה, לוחצים על טעינה מחדש של כלי הפיתוח.
בפינה השמאלית העליונה של חלונית רכיבים, מחליפים את מצב הלחצן
מעבר לתצוגת עץ נגישות.
מעיינים בעץ הנגישות. אפשר להרחיב את הצמתים או ללחוץ כדי לראות פרטים בקטע נכסים מחושבים.
יש לבחור צומת וללחוץ על הלחצן
מעבר לתצוגת עץ DOM כדי לחזור לעץ DOM.צומת ה-DOM המתאים נבחר עכשיו. זוהי דרך מצוינת להבין את המיפוי בין צומת DOM לבין צומת עץ הנגישות שלו.
הצגת מאפייני ARIA של רכיב
מאפייני ARIA מבטיחים שקוראי המסך יקבלו את כל המידע שהם צריכים כדי לייצג בצורה נכונה את תוכן הדף.
להציג מאפייני ARIA של רכיב בחלונית הנגישות.
הצגת סדר המקורות של הרכיבים במסך
הרכיבים בדף לא תמיד מופיעים בסדר שבו הם היו במקור. מצב כזה עלול לבלבל משתמשים שמסתמכים על טכנולוגיה מסייעת לניווט באינטרנט.
כדי להציג את סדר המקורות באתר ולנפות באגים בו:
- בדיקת רכיב בדף.
- בקטע רכיבים > נגישות > מציג סדר המקור, מסמנים את האפשרות
הצגה של סדר המקורות.
באזור התצוגה, כלי הפיתוח מתווה רכיבים מקוננים עם גבולות ומסמן אותם במספרים שתואמים לסדר המקור שלהם.
הצגת מאפייני נגישות מחושבים של רכיב
חלק ממאפייני הנגישות מחושבים באופן דינמי על ידי הדפדפן. ניתן להציג את המאפיינים האלה בקטע Computed Properties (מאפיינים מחושבים) בחלונית Accessibility (נגישות).
להציג מאפייני נגישות מחושבים של רכיב בחלונית הנגישות.
חיפוש ותיקון של טקסט עם ניגודיות נמוכה
כלי הפיתוח יכולים לאתר באופן אוטומטי בעיות של ניגודיות נמוכה ולהציע צבעים טובים יותר, שיעזרו לכם לפתור אותן. מידע נוסף זמין במאמר איך משפרים את הקריאוּת באתר.