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