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

רוב דודסון

Twitter GitHub Glitch דף הבית

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

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

סקירה כללית

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

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

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

מקשי קיצור

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

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

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

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

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

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

בעיות ידועות

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

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

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

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

לדוגמה, כדי לפתוח את החלונית רכיבים:

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

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

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

בדיקה של רכיב בדף

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

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

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

1. כשהמיקוד הוא בצומת בעץ DOM, מציגים את תפריט ההקשר שמופעל לחיצה ימנית.
2. מרחיבים את האפשרות העתקה.
3. בוחרים באפשרות Copy outerHTML (העתקת 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 Tree, מקישים על Tab עד ששומעים שחלונית סגנונות נבחרה.
• מקישים על החץ ימינה כדי לעבור בין כרטיסיות זמינות אחרות.

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

בעיות ידועות

אין גישה לכרטיסיות DOM Breakpoints ומאפיינים.

חלונית הסגנונות

בחלונית סגנונות אפשר למצוא פקדים לסגנונות סינון, החלפת מצבי רכיבים (כמו :active ו-:focus), החלפת מצב של מחלקות והוספת מחלקות חדשות. יש גם כלי מתקדם לבדיקת סגנונות, שמאפשר לחקור ולשנות סגנונות שמוחלים עכשיו על הרכיב שבו מתמקדים ב-DOM Tree.

הרעיון המרכזי שצריך להבין לגבי החלונית סגנונות הוא שמוצגים בה רק סגנונות עבור הצומת שנבחר כרגע ב-DOM Tree. לדוגמה, נניח שסיימתם לבדוק את הסגנונות של צומת ב-<header>, ועכשיו אתם רוצים לבדוק את הסגנונות של צומת ב-<footer>. לשם כך, קודם צריך לבחור את הצומת <footer> ב-DOM Tree. יכול להיות שיהיה מהיר יותר להשתמש בתהליך העבודה בדיקה כדי לבדוק צומת שנמצא בקרבת הצומת footer (כמו קישור בכותרת התחתונה), שמתמקד בעץ DOM ואז להשתמש במקלדת כדי לנווט לצומת המדויק שמעניין אתכם.

ניווט בחלונית 'סגנונות'

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

• כשהמיקוד הוא בחלונית סגנונות, מקישים על Tab כדי להעביר את המיקוד פנימה ולבחון את התוכן שלה.
• מקישים על Tab עד שהסגנון הראשון הופך לפעיל. אם אתם משתמשים בקורא מסך, הסגנון הראשון הזה יקרא "element.style {}".
• מקישים על חץ למטה כדי לנווט ברשימת הסגנונות לפי סדר ספציפיות. קורא מסך מכריז על כל סגנון החל בשם של קובץ ה-CSS, במספר השורה שבה מופיע הסגנון ובשם הסגנון עצמו. לדוגמה: "main.css:233 .card__img {}"
• מקישים על Enter כדי לבדוק סגנון בפירוט רב יותר. המיקוד מתחיל בגרסה של שם הסגנון שניתנת לעריכה.
• מקישים על Tab כדי לעבור בין גרסאות ניתנות לעריכה של כל נכס CSS והערכים התואמים שלהן. בסוף כל בלוק סגנון מופיע שדה טקסט ריק לעריכה, שאפשר להשתמש בו כדי להוסיף מאפייני CSS נוספים.
• אפשר להקיש על Tab כדי לעבור ברשימת הסגנונות או להקיש על Escape כדי לצאת מהמצב הזה ולחזור לניווט באמצעות מקשי החיצים.

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

בעיות ידועות

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

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

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

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

הוספת כיתה שעומדת לצאת

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

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

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

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

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

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

הצגת כל הסגנונות המחושבים

מקישים על Tab עד שמגיעים לאוסף של הסגנונות המחושבים. הם מוצגים בתור tree ARIA. הרחבה של תיבת רשימה חושפת אילו סלקטורים ב-CSS מחילים את הסגנון המחושב. הבוררים מסודרים לפי ספציפיות. קורא מסך מכריז על הערך המחושב, שאותו בורר CSS תואם כרגע, את שם הקובץ של גיליון הסגנונות שמכיל את הבורר ואת מספר השורה של הבורר.

בעיות ידועות

• אם משתמשים בשדה הטקסט מסנן, לא ניתן יותר לבדוק סגנונות.

הכרטיסייה Event listeners

בחלונית Elements אפשר לבדוק את הפונקציות event listener שהוחלו על רכיב כלשהו באמצעות הכרטיסייה Event Listeners. כשהמיקוד הוא בחלונית Styles, מקישים על החץ ימינה כדי לנווט לכרטיסייה Event Listeners.

פונקציות של event listener

פונקציות event listener מוצגות בתור tree ARIA. אפשר להשתמש במקשי החיצים כדי לנווט ביניהן. קורא מסך מכריז על שם אובייקט ה-DOM שאליו מצורף ה-event listener, וכן על שם הקובץ שבו מוגדר ה-event listener ואת מספר השורה שלו.

חלונית הנגישות

כשהמיקוד הוא בחלונית נגישות, מקישים על Tab כדי להעביר את המיקוד פנימה ולבחון את התוכן שלה. בחלונית Accessibility יש אמצעי בקרה לסקירת עץ הנגישוּת, מאפייני ה-ARIA שחלים על רכיב מסוים ומאפייני הנגישות המחושבים שלו.

עץ נגישות

עץ הנגישות מוצג כ-ARIA tree שבו כל treeitem תואם לרכיב ב-DOM. הכרזה על התפקיד המחושב של הצומת שנבחר בעץ. רכיבים גנריים כמו div ו-span מושווים בעץ כ-GeneralContainer (מאגר כללי). בעזרת מקשי החיצים אפשר לחצות את העץ ולחקור את הקשרים בין הורה-צאצא.

בעיות ידועות

• ייתכן שסוג עץ ה-ARIA שבו נעשה שימוש בחלונית נגישות לא ייחשף כראוי ב-Chrome עבור קוראי מסך של macOS, כמו VoiceOver. הירשמו לקבלת בעיה מס' 868480 ב-Chromium כדי לקבל הודעות על ההתקדמות בפתרון הבעיה.
• הקטעים ARIA Attributes ו-Computed Properties מסומנים כעצי ARIA, אבל הם לא כוללים כרגע ניהול מיקוד ולכן לא ניתן להפעיל אותם באמצעות המקלדת.

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

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

הגדרה והפעלה של ביקורת

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

בעיות ידועות

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

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

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

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