ניווט בכלי הפיתוח ל-Chrome באמצעות טכנולוגיה מסייעת

Rob Dodson

המדריך הזה נועד לעזור למשתמשים שמסתמכים בעיקר על טכנולוגיה מסייעת (AT), כמו קוראי מסך, לגשת אל כלי הפיתוח ל-Chrome ולהשתמש בהם. כלי הפיתוח ל-Chrome הם חבילה של כלים למפתחי אתרים שמובנים בדפדפן Google Chrome. אם אתם מחפשים תכונות בכלי הפיתוח שקשורות לשיפור הנגישות של דף אינטרנט, כדאי לעיין בהפניה לנגישות.

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

סקירה כללית

כלי הפיתוח מחולקים לסדרה של חלוניות שמסודרות בARIA tablist. לדוגמה:

  • בחלונית Elements אפשר לראות ולשנות צמתי DOM או CSS.
  • בחלונית Console אפשר לקרוא יומנים של JavaScript ולערוך אובייקטים בזמן אמת.

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

מקשי קיצור

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

פתיחת כלי הפיתוח

כדי להתחיל, קוראים את המאמר פתיחת כלי הפיתוח ל-Chrome. יש כמה דרכים לפתוח את כלי הפיתוח, באמצעות מקשי קיצור או פריטי תפריט.

ניווט בין חלוניות

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

ניווט באמצעות המקלדת

  • כשכלי הפיתוח פתוחים, מקישים על Control+] או על Command+] (ב-Mac) כדי להעביר את המיקוד לחלונית הבאה.
  • מקישים על Control+[ או על Command+[ (ב-Mac) כדי להתמקד בחלונית הקודמת.
  • אפשר גם להשתמש ב-Shift+Tab כדי להעביר את המיקוד לtablist של חלונית, ולהשתמש במקשי החיצים כדי לשנות את החלוניות, אבל יכול להיות שיהיה מהר יותר להשתמש בקיצורי הדרך שצוינו קודם.

בעיות מוכרות

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

ניווט באמצעות תפריט הפקודות

כדי להתמקד בחלונית ספציפית, משתמשים בתפריט הפקודות:

  1. כשכלי הפיתוח פתוחים, מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac) כדי לפתוח את תפריט הפקודות. תפריט הפקודות הוא תיבת בחירה עם השלמה אוטומטית של חיפוש לא מדויק.
  2. מקלידים את שם החלונית שרוצים לפתוח, ואז משתמשים במקש החץ למטה במקלדת כדי לנווט לאפשרות הנכונה.
  3. מקישים על Enter כדי להריץ פקודה.

לדוגמה, כדי לפתוח את החלונית Elements:

  1. פותחים את תפריט הפקודות.
  2. מקלידים E ואז L. האפשרות חלונית > הצגת רכיבים נבחרה.
  3. מקישים על Enter כדי להריץ את הפקודה שפותחת את החלונית.

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

חלונית הרכיבים

בדיקת רכיב בדף

  1. מנווטים לרכיב שרוצים לבדוק באמצעות הסמן של קורא המסך.
  2. מדמה לחיצה ימנית בעכבר על הרכיב כדי לפתוח את תפריט ההקשר.
  3. בוחרים באפשרות בדיקה. פעולה זו תפתח את החלונית Elements ותמקד את הרכיב בDOM Tree.

עץ ה-DOM מוגדר כ-ARIA tree. דוגמה מופיעה במאמר ניווט בעץ ה-DOM באמצעות מקלדת.

העתקת הקוד של רכיב בעץ ה-DOM

  1. כשמוצב מיקוד על צומת בעץ ה-DOM, מציגים את תפריט ההקשר של הלחיצה הימנית.
  2. מרחיבים את האפשרות העתקה.
  3. בוחרים באפשרות העתקה של outerHTML.

בעיות מוכרות

  • העתקה 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 כדי לצאת מהמצב הזה ולחזור לניווט באמצעות מקשי החצים.

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

בעיות מוכרות
  • אם משתמשים בשדה הטקסט שאפשר לערוך Filter, אי אפשר לנווט ברשימת הסגנונות.

החלפת מצב הרכיב

כדי להחליף את המצב של רכיב, כמו :active או :focus:

  1. מנווטים לחלונית סגנונות ולוחצים על Tab עד שהמיקוד מגיע לכפתור החלפת מצב הרכיב.
  2. מקישים על Enter כדי להרחיב את אוסף מצבי הרכיבים. מצבי הרכיבים מוצגים כקבוצה של תיבות סימון.
  3. לוחצים על Tab עד שהמיקוד מגיע למצב הראשון, :active.
  4. מקישים על מקש הרווח כדי להפעיל אותה. אם לרכיב שנבחר כרגע בעץ ה-DOM יש סגנון :active, הוא יוחל עכשיו.
  5. ממשיכים ללחוץ על Tab כדי לראות את כל המצבים הזמינים.

הוספת כיתה קיימת

לצד הלחצן החלפת מצב הרכיב נמצא הלחצן Element Classes (סיווג רכיבים). כדי להעביר את המיקוד אליו, מקישים על Tab ואז על Enter. המיקוד עובר לשדה לעריכת טקסט עם התווית הוספת כיתה חדשה.

הלחצן Element Classes (מחלקות של רכיבים) משמש בעיקר להוספת מחלקות קיימות לרכיב. לדוגמה, אם גיליון הסגנונות שלכם מכיל מחלקה מסייעת בשם .clearfix תוכלו להקיש על . בתוך שדה הטקסט לעריכה כדי לראות רשימת הצעות של מחלקות, ולהשתמש בחץ למטה כדי למצוא את ההצעה .clearfix. אפשר גם להקליד את שם הכיתה וללחוץ על Enter כדי להחיל אותו.

הוספת כלל סגנון חדש

לצד הלחצן Element Classes נמצא הלחצן New Style Rule. מקישים על Tab כדי להעביר את ההדגשה ללחצן, ואז מקישים על Enter. המיקוד עובר לשדה טקסט שניתן לעריכה בתוך כלי הבדיקה של הסגנון. תוכן הטקסט הראשוני של השדה הוא שם התג של הרכיב שנבחר בתצוגת העץ של ה-DOM. אפשר להקליד בשדה הזה כל שם של מחלקה שרוצים, ואז ללחוץ על Tab כדי להקצות לה מאפייני CSS.

כרטיסייה מחושבת

כשהמיקוד הוא על הכרטיסייה 'מחושב', מקישים על 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 שבו נעשה שימוש בחלונית Accessibility לא יהיה זמין בקוראי מסך של Chrome ל-macOS, כמו VoiceOver. כדי לקבל עדכונים על התקדמות הטיפול בבעיה הזו, אפשר להירשם לבעיה מספר 868480 ב-Chromium.
  • הקטעים ARIA Attributes ו-Computed Properties מסומנים כעצי ARIA, אבל הם לא כוללים ניהול של המיקוד. כלומר, אי אפשר להשתמש במקלדת כדי להפעיל את הקטעים האלה.

חלונית הביקורות

בחלונית Audits (בדיקות) אפשר להריץ סדרה של בדיקות באתר כדי לבדוק בעיות נפוצות שקשורות לביצועים, לנגישות, ל-SEO ולמספר קטגוריות אחרות.

הגדרה והרצה של ביקורת

  1. כשפותחים את החלונית ביקורות בפעם הראשונה, המיקוד הוא בלחצן הפעלת ביקורת בסוף הטופס. כברירת מחדל, הטופס מוגדר להפעלת ביקורות לכל קטגוריה באמצעות הדמיה של נייד בחיבור 3G מדומה.
  2. כדי לשנות את הגדרות הביקורת, משתמשים ב-Shift+Tab או חוזרים אחורה במצב עיון.
  3. כשמוכנים להריץ את הביקורת, חוזרים לכפתור Run Audit (הפעלת ביקורת) ולוחצים על Enter.
  4. המיקוד עובר לחלון מודאלי עם לחצן ביטול שמאפשר לצאת מהביקורת. יכול להיות שתשמעו סדרה של צלילים קצרים כשהביקורת תפעל ותבצע רענון של הדף כמה פעמים.

בעיות מוכרות

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

ניווט בדוח הביקורת

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

כדי להריץ ביקורת חדשה, משתמשים בצירוף המקשים Shift+Tab כדי לצאת מהדוח ומחפשים את הלחצן ביצוע ביקורת.