המדריך הזה נועד לעזור למשתמשים שמסתמכים בעיקר על טכנולוגיה מסייעת כמו קוראי מסך, לגשת אל כלי הפיתוח ל-Chrome ולהשתמש בהם. כלי הפיתוח ל-Chrome הם חבילה של כלים למפתחי אתרים שמובנים בדפדפן Google Chrome. אם אתם מחפשים תכונות של כלי הפיתוח שקשורות לשיפור הנגישות של דף אינטרנט, תוכלו לעיין בהפניה לנגישות.
אנחנו עדיין עובדים על הנגישות של כלי הפיתוח. יש חלוניות וכרטיסיות שמתאימים יותר לטכנולוגיה מסייעת מאחרים. במדריך הזה נסביר על החלוניות הכי נגישות, ונדגיש בעיות ספציפיות שאתם עלולים להיתקל בהן.
סקירה כללית
לפני שמתחילים, כדאי להבין איך ממשק המשתמש של כלי הפיתוח בנוי. כלי DevTools מחולק לסדרה של חלוניות שמסודרות בARIA tablist. לדוגמה:
- בחלונית Elements אפשר לראות ולשנות צמתי DOM או CSS.
- בחלונית Console אפשר לקרוא יומנים של JavaScript ולערוך אובייקטים בזמן אמת.
באזור התוכן של כל חלונית יש מספר כלים שונים, שלרוב נקראים כרטיסיות או חלוניות במסמכי התיעוד. לדוגמה, בחלונית Elements יש כרטיסיות נוספות לבדיקה של פונקציות event listener, עץ הנגישות ועוד. ההבחנה בין כרטיסיות לחלוניות היא שרירותית במידה מסוימת. הסיבה היחידה לכך שמופיע מונח אחד ולא השני היא כדי לשמור על עקביות עם שאר מסמכי התיעוד הרשמיים של DevTools.
מקשי קיצור
המדריך למקשי הקיצור של כלי הפיתוח הוא דף עזר שימושי. כדאי להוסיף אותו לסימניות ולחזור אליו כשבודקים את החלוניות השונות.
פתיחת כלי הפיתוח
כדי להתחיל, קוראים את המאמר פתיחת כלי הפיתוח ל-Chrome. יש כמה דרכים לפתוח את כלי הפיתוח, באמצעות מקשי קיצור או פריטי תפריט.
ניווט בין חלוניות
ניווט באמצעות המקלדת
- כשכלי הפיתוח פתוחים, מקישים על Control+] או על Command+] (ב-Mac) כדי להעביר את המיקוד לחלונית הבאה.
- מקישים על Control+[ או על Command+[ (ב-Mac) כדי להעביר את המיקוד לחלונית הקודמת.
- אפשר גם להשתמש ב-Shift+Tab כדי להעביר את המיקוד ל
tablistשל חלונית, ולהשתמש במקשי החיצים כדי לשנות את החלוניות, אבל יכול להיות שיהיה מהיר יותר להשתמש בקיצורי הדרך שצוינו קודם.
בעיות מוכרות
- יכול להיות שחלק מהחלוניות, כמו החלוניות Console ו-Performance, יעבירו את המיקוד לאזור התוכן שלהן ברגע שהן יופעלו. במקרים כאלה קשה לנווט באמצעות מקשי החיצים.
- השם של החלונית שנבחרה מוכרז, אבל רק אחרי שהתוכן הממוקד בחלונית נקרא. לכן קל מאוד לפספס את ההודעה.
ניווט באמצעות תפריט הפקודות
כדי להתמקד בחלונית ספציפית, משתמשים בתפריט הפקודות:
- כשכלי הפיתוח פתוחים, מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות. תפריט הפקודות הוא תיבת בחירה עם השלמה אוטומטית של חיפוש משוער.
- מקלידים את שם החלונית שרוצים לפתוח, ואז משתמשים במקש החץ למטה במקלדת כדי לנווט לאפשרות הנכונה.
- מקישים על Enter כדי להריץ פקודה.
לדוגמה, כדי לפתוח את החלונית Elements:
- פותחים את תפריט הפקודות.
- מקלידים E ואז L. האפשרות חלונית > הצגת רכיבים נבחרה.
- מקישים על Enter כדי להריץ את הפקודה שפותחת את החלונית.
כשפותחים חלונית בדרך הזו, המיקוד מועבר לתוכן של החלונית עצמה. במקרה של החלונית Elements, המיקוד עובר אל DOM Tree.
חלונית הרכיבים
בדיקת רכיב בדף
- מנווטים לרכיב שרוצים לבדוק באמצעות הסמן של קורא המסך.
- מדמה לחיצה ימנית בעכבר על הרכיב כדי לפתוח את תפריט ההקשר.
- בוחרים באפשרות בדיקה. פעולה זו פותחת את החלונית Elements ומתמקדת ברכיב בעץ ה-DOM.
עץ ה-DOM מוגדר כ-tree של ARIA. דוגמה מופיעה במאמר בנושא ניווט בעץ ה-DOM באמצעות מקלדת.
העתקת הקוד של רכיב בעץ ה-DOM
- כשמוצב מיקוד על צומת בעץ DOM, מציגים את תפריט ההקשר של הלחיצה הימנית.
- מרחיבים את האפשרות העתקה.
- בוחרים באפשרות העתקה של outerHTML.
בעיות מוכרות
- האפשרות Copy outerHTML לא תמיד בוחרת את הצומת הנוכחי, אלא את צומת האב שלו. עם זאת, התוכן של הרכיב עדיין צריך להיות ב-outerHTML שהועתק.
שינוי המאפיינים של רכיב בעץ ה-DOM
- כשהמיקוד נמצא על צומת בעץ ה-DOM, מקישים על Enter כדי להפוך אותו לניתן לעריכה.
- מקישים על Tab כדי לעבור בין ערכי המאפיינים. כששומעים את המילה "רווח", נמצאים בתוך שדה קלט טקסט ריק ואפשר להקליד ערך חדש של מאפיין.
- מקישים על Control+Enter או על Command+Enter (ב-Mac) כדי לאשר את השינוי ולשמוע את כל התוכן של הרכיב.
בעיות מוכרות
- כשמקלידים בשדה להזנת טקסט לא מקבלים משוב. אם תעשו טעות הקלדה ותשתמשו במקשי החיצים כדי לבדוק את הקלט, לא תקבלו משוב. הדרך הכי קלה לבדוק את העבודה היא לאשר את השינוי ואז להאזין להכרזה על כל הרכיב.
עריכת ה-HTML של רכיב בעץ ה-DOM
- כשהמיקוד נמצא על צומת בעץ ה-DOM, מקישים על Enter כדי להפוך אותו לניתן לעריכה.
- מקישים על Tab כדי לעבור בין ערכי המאפיינים. כששומעים את שם הרכיב, למשל h2, נמצאים בתוך קלט טקסט ויכולים לשנות את סוג הרכיב.
- מקישים על Control+Enter או על Command+Enter (ב-Mac) כדי לאשר את השינוי.
לדוגמה, אם מקלידים h3 ומקישים על Control+Enter או על Command+Enter (ב-Mac), תגי הפתיחה והסגירה של הרכיב ישתנו ל-h3.
כרטיסיות בחלונית הרכיבים
החלונית Elements מכילה כרטיסיות נוספות לבדיקת דברים כמו ה-CSS שמוחל על רכיב או המיקום שלו בעץ הנגישות.
- כשהמיקוד הוא על צומת בעץ ה-DOM, מקישים על Tab עד ששומעים שהחלונית Styles (סגנונות) נבחרה.
- כדי לעיין בכרטיסיות אחרות שזמינות, משתמשים בחץ שמאלה.
עץ ה-DOM הופך רכיבים עם מאפייני href לקישורים שאפשר להתמקד בהם, ולכן יכול להיות שתצטרכו להקיש על Tab יותר מפעם אחת כדי להגיע לחלונית Styles.
בעיות מוכרות
אי אפשר לגשת לכרטיסיות DOM Breakpoints (נקודות עצירה ב-DOM) ו-Properties (מאפיינים) באמצעות מקלדת.
חלונית הסגנונות
בחלונית סגנונות יש אמצעי בקרה לסינון סגנונות, להחלפת מצבי רכיבים (כמו :active ו-:focus), להחלפת מחלקות ולהוספת מחלקות חדשות. יש גם כלי עוצמתי לבדיקת סגנונות, שמאפשר לבדוק ולשנות סגנונות שמוחלים כרגע על הרכיב שנמצא במוקד בעץ ה-DOM.
המושג המרכזי שחשוב להבין לגבי החלונית Styles הוא שהיא מציגה רק סגנונות של הצומת שנבחר כרגע בDOM Tree. לדוגמה, נניח שסיימתם לבדוק את הסגנונות של צומת <header> ועכשיו אתם רוצים לבדוק את הסגנונות של צומת <footer>. כדי לעשות את זה, קודם צריך לבחור את הצומת <footer> בעץ ה-DOM. יכול להיות שיהיה לכם מהר יותר להשתמש בתהליך העבודה של בדיקה כדי לבדוק צומת שנמצא בסביבה הכללית של צומת footer (למשל, קישור בכותרת התחתונה), וכך להתמקד בעץ ה-DOM, ואז להשתמש במקלדת כדי לנווט לצומת המדויק שמעניין אתכם.
ניווט בחלונית Styles (סגנונות)
כל כלי הסגנון מתחברים בדרך כזו או אחרת לחלונית סגנונות, ולכן כדאי קודם להכיר את הכלי הזה לעומק.
- כשהמיקוד בחלונית סגנונות, מקישים על Tab כדי להעביר את המיקוד לתוך החלונית ולעיין בתוכן שלה.
- מקישים על Tab עד שהסגנון הראשון הופך לפעיל. אם אתם משתמשים בקורא מסך, הסגנון הראשון הזה יוכרז כ-"element.style {}".
- מקישים על החץ למטה כדי לנווט ברשימת הסגנונות לפי סדר הספציפיות. קורא מסך מכריז על כל סגנון, החל משם קובץ ה-CSS, מספר השורה שבה הסגנון מופיע ושם הסגנון עצמו. לדוגמה: "main.css:233 .card__img {}"
- מקישים על Enter כדי לבדוק סגנון בפירוט רב יותר. המיקוד מתחיל בגרסה שניתנת לעריכה של שם הסגנון.
- מקישים על Tab כדי לעבור בין הגרסאות הניתנות לעריכה של כל מאפיין CSS והערכים התואמים שלהן. בסוף כל בלוק סגנונות יש שדה טקסט ריק שניתן לעריכה, שאפשר להשתמש בו כדי להוסיף מאפייני CSS נוספים.
- אפשר להמשיך להקיש על Tab כדי לעבור בין הסגנונות ברשימה, או להקיש על Escape כדי לצאת מהמצב הזה ולחזור לניווט באמצעות מקשי החצים.
כדאי לעיין במקשי הקיצור בחלונית 'סגנונות' כדי לראות מקשי קיצור נוספים.
בעיות מוכרות
- אם משתמשים בשדה הטקסט הניתן לעריכה Filter, אי אפשר יותר לנווט ברשימת הסגנונות.
החלפת מצב הרכיב
כדי להחליף את מצב הרכיב, כמו :active או :focus:
- מנווטים לחלונית סגנונות ומקישים על Tab עד שהמיקוד עובר ללחצן החלפת מצב הרכיב.
- מקישים על Enter כדי להרחיב את אוסף מצבי הרכיבים. מצבי הרכיבים מוצגים כקבוצה של תיבות סימון.
- מקישים על Tab עד שהמצב הראשון,
:active, יהיה מודגש. - מקישים על מקש הרווח כדי להפעיל אותה. אם לרכיב שנבחר כרגע בעץ ה-DOM יש סגנון
:active, הוא מוחל עכשיו. - ממשיכים להקיש על Tab כדי לעבור בין כל המצבים הזמינים.
הוספת כיתה קיימת
לצד הלחצן החלפת מצב הרכיב נמצא הלחצן Element Classes (מחלקות של רכיבים). מעבירים את המיקוד אליו על ידי הקשה על Tab ואז על Enter. המיקוד עובר לשדה לעריכת טקסט עם התווית הוספת כיתה חדשה.
הכפתור Element Classes משמש בעיקר להוספת מחלקות קיימות לרכיב. לדוגמה, אם גיליון הסגנונות מכיל מחלקה מסייעת בשם .clearfix, אפשר להקיש על . בתוך שדה העריכה כדי לראות רשימת הצעות של מחלקות, ולהשתמש בחץ למטה כדי למצוא את ההצעה .clearfix. אפשר גם להקליד את שם הכיתה וללחוץ על Enter כדי להחיל אותו.
הוספת כלל סגנון חדש
לצד הכפתור Element Classes (מחלקות של רכיבים) נמצא הכפתור New Style Rule (כלל סגנון חדש). מקישים על Tab כדי להעביר את ההדגשה ללחצן ואז מקישים על Enter. המיקוד עובר לשדה טקסט שניתן לעריכה בתוך כלי הבדיקה של הסגנון. תוכן הטקסט הראשוני של השדה הוא שם התג של הרכיב שנבחר בעץ ה-DOM. אפשר להקליד בשדה הזה כל שם של מחלקה שרוצים ואז ללחוץ על Tab כדי להקצות לו מאפייני CSS.
הכרטיסייה 'מחושבים'
כשהמיקוד נמצא בכרטיסייה Computed, מקישים על Tab כדי להעביר את המיקוד לתוך הכרטיסייה ולעיין בתוכן שלה. בכרטיסייה Computed יש אמצעי בקרה שמאפשרים לבדוק אילו מאפייני CSS מוחלים בפועל על רכיב מסוים, לפי סדר הספציפיות.
צפייה בכל הסגנונות המחושבים
מקישים על Tab עד שמגיעים לאוסף של סגנונות מחושבים. הם מוצגים כ-ARIA tree. כשמרחיבים את תיבת הרשימה, אפשר לראות אילו סלקטורים ב-CSS מחילים את הסגנון המחושב. הסלקטורים האלה מסודרים לפי רמת הספציפיות שלהם. קורא המסך מכריז על הערך המחושב, על בורר ה-CSS שתואם כרגע, על שם הקובץ של גיליון הסגנונות שמכיל את הבורר ועל מספר השורה של הבורר.
בעיות מוכרות
- אם משתמשים בשדה הטקסט Filter, לא תהיה יותר אפשרות לבדוק סגנונות.
הכרטיסייה Event Listeners
בחלונית Elements אפשר לבדוק את מעבדי האירועים שמוחלים על רכיב באמצעות הכרטיסייה Event Listeners. כשהמיקוד הוא על החלונית Styles, מקישים על מקש החץ שמאלה כדי לעבור לכרטיסייה Event Listeners.
חיפוש פונקציות event listener
פונקציות event listener מוצגות כ-ARIA tree. אפשר להשתמש במקשי החיצים כדי לנווט ביניהם. קורא מסך מכריז על השם של אובייקט ה-DOM שאליו מצורף ה-event listener, וגם על שם הקובץ שבו מוגדר ה-event listener ועל מספר השורה שלו.
חלונית הנגישות
כשהמיקוד נמצא בחלונית הנגישות, מקישים על Tab כדי להעביר את המיקוד לתוך החלונית ולעיין בתוכן שלה. בחלונית Accessibility יש אמצעי בקרה לבדיקת עץ הנגישות, מאפייני ה-ARIA שחלים על רכיב מסוים ומאפייני הנגישות המחושבים שלו.
עץ הנגישות
עץ הנגישות מוצג כ-ARIA tree שבו כל treeitem תואם לרכיב ב-DOM. בתצוגת העץ, התפקיד המחושב של הצומת שנבחר מוכרז. רכיבים כלליים כמו div ו-span מוצגים בעץ כ-GenericContainer. משתמשים במקשי החצים כדי לעבור בעץ ולבדוק את הקשרים בין הורה לצאצא.
בעיות מוכרות
- יכול להיות שסוג עץ ה-ARIA שבו נעשה שימוש בחלונית נגישות לא נחשף בצורה תקינה ב-Chrome עבור קוראי מסך ב-macOS כמו VoiceOver. כדי לקבל עדכונים על הטיפול בבעיה הזו, אפשר להירשם למינוי בעיה מספר 868480 ב-Chromium.
- הקטעים מאפייני ARIA ומאפיינים מחושבים מסומנים כעצי ARIA, אבל כרגע אין להם ניהול מיקוד ולכן אי אפשר להפעיל אותם באמצעות המקלדת.
חלונית הביקורות
בחלונית Audits (בדיקות) אפשר להריץ סדרה של בדיקות באתר כדי לבדוק אם יש בעיות נפוצות שקשורות לביצועים, לנגישות, ל-SEO ולמספר קטגוריות אחרות.
הגדרה והרצה של ביקורת
- כשפותחים את החלונית ביקורות בפעם הראשונה, המיקוד הוא בלחצן הפעלת ביקורת בסוף הטופס. כברירת מחדל, הטופס מוגדר להפעלת ביקורות לכל קטגוריה באמצעות אמולציה לנייד בחיבור 3G מדומה.
- כדי לשנות את הגדרות הביקורת, מקישים על Shift+Tab או חוזרים אחורה במצב עיון.
- כשהכול מוכן להרצת הביקורת, חוזרים לכפתור Run Audit ולוחצים על Enter.
- המיקוד עובר לחלון מודאלי עם לחצן ביטול שמאפשר לצאת מהבדיקה. יכול להיות שתשמעו סדרה של צלילים קצרים בזמן שהביקורת פועלת והדף מתרענן כמה פעמים.
בעיות מוכרות
- בשלב הזה, הקטעים השונים בטופס ההגדרה לא מסומנים באמצעות רכיב
fieldset. יכול להיות שיהיה לכם קל יותר לנווט בהם במצב עיון כדי להבין אילו אמצעי בקרה משויכים לכל קטע. - אין אוזניות או הודעה על אזור פעיל כשביקורת מסיימת לפעול. בדרך כלל התהליך נמשך כ-30 שניות, ואחריו אפשר לעבור לתוצאות. הדרך הכי קלה להגיע לתוצאות היא באמצעות מצב העיון.
ניווט בדוח הביקורת
דוח הביקורת מאורגן לקטעים שתואמים לכל אחת מקטגוריות הביקורת. הדוח נפתח עם רשימת ציונים לכל קטגוריה. התוצאות האלה הן גם קישורים שאפשר להשתמש בהם כדי לדלג לקטעים הרלוונטיים. בכל קטע יש רכיבי details שניתן להרחיב, שמכילים מידע שקשור לביקורות שעברו או נכשלו. כברירת מחדל, מוצגות רק ביקורות שנכשלו. כל קטע מסתיים ברכיב details סופי שמכיל את כל הביקורות שעברו.
כדי להריץ ביקורת חדשה, משתמשים ב-Shift+Tab כדי לצאת מהדוח ומחפשים את הלחצן ביצוע ביקורת.