הסבר על תכונות נגישות

Kayce Basques

Sofia Emelianova

בדף הזה מפורטות כל תכונות הנגישות בכלי הפיתוח ל-Chrome. הוא מיועד למפתחי אתרים ש:

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

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

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

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

סקירה כללית של תכונות הנגישות בכלי הפיתוח ל-Chrome

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

כשבודקים אם דף נגיש, צריך לזכור 2 שאלות כלליות:

1. האם אפשר לנווט בדף באמצעות מקלדת או קורא מסך?
2. האם הרכיבים בדף מסומנים בצורה נכונה לשימוש עם קוראי מסך?

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

ביקורת נגישות של דף

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

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

כדי לבדוק דף:

1. עוברים לכתובת ה-URL שרוצים לבדוק.

2. ב-DevTools, לוחצים על החלונית Lighthouse. ב-DevTools מוצגות אפשרויות שונות להגדרה.

   

   הערה: צילומי המסך בקטע הזה צולמו באמצעות Chrome 69. בצילומי המסך, החלונית עדיין נקראת Audits, אבל השם שלה שונה ל-Lighthouse ב-Chrome 83. אפשר לבדוק איזו גרסה מופעלת בכתובת chrome://version. ממשק המשתמש של החלונית Audits ייראה שונה בגרסאות קודמות או מאוחרות יותר של Chrome, אבל תהליך העבודה הכללי זהה.

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

4. בקטע Lighthouse, מוודאים שהאפשרות Accessibility (נגישות) מופעלת. משביתים את הקטגוריות האחרות אם רוצים להחריג אותן מהדוח. אם רוצים לגלות דרכים נוספות לשיפור האיכות של הדף, כדאי להשאיר את האפשרויות האלה מופעלות.

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

6. תיבת הסימון Clear Storage (ניקוי האחסון) מאפשרת לכם לנקות את כל האחסון לפני טעינת הדף, או לשמור את האחסון בין טעינות הדף. האפשרות הזו כנראה לא רלוונטית לציון הנגישות שלכם, אז אתם יכולים להשתמש במה שנוח לכם.

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

   

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

   

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

   

מידע נוסף: תוסף aXe

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

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

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

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

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

הכרטיסייה 'נגישות'

בכרטיסייה נגישות אפשר לראות את עץ הנגישות, מאפייני ARIA ומאפייני נגישות מחושבים של צמתי DOM.

כדי לפתוח את הכרטיסייה נגישות:

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

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

צפייה במיקום של רכיב בעץ הנגישות

עץ הנגישות הוא קבוצת משנה של עץ ה-DOM. הוא מכיל רק רכיבים מעץ ה-DOM שהם רלוונטיים ושימושיים להצגת התוכן של הדף בקורא מסך.

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

המתג הזה מחליף את עץ ה-DOM בחלונית Elements בעץ נגישות של הדף כולו. העץ הזה עוזר לכם להבין טוב יותר איך תוכן האינטרנט שלכם מוצג לטכנולוגיה מסייעת.

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

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

הצגת מאפייני ARIA של רכיב

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

אפשר לראות את מאפייני ה-ARIA של רכיב מסוים בכרטיסייה Accessibility.

הצגת סדר המקור של רכיבים במסך

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

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

1. בודקים רכיב בדף.
2. בקטע Elements (רכיבים) > Accessibility (נגישות) > Source Order Viewer (כלי לצפייה בסדר המקור), מסמנים את התיבה check_box Show source order (הצגת סדר המקור).

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

צפייה במאפייני הנגישות המחושבים של רכיב

הערה: אם אתם מחפשים מאפייני CSS מחושבים, כדאי לעיין בכרטיסייה Computed

.

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

אפשר לראות את מאפייני הנגישות המחושבים של רכיב מסוים בכרטיסייה Accessibility.

הכרטיסייה Rendering (עיבוד)

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

• אמולציה של לקויות ראייה כדי לראות את הדף דרך כמה לקויות ראייה שונות ומדומה.
• יצירת אמולציה של מדיה של CSS עם prefers-color-scheme כדי לראות איך הדף נראה עם מצב כהה או בהיר מופעל. רבים חושבים שהמצב הכהה הוא בחירה אסתטית, אבל המצב הכהה ככלי נגישות מוכיח שהוא שימושי גם בדרכים אחרות.
• יצירת אמולציה לסוג מדיה CSS כדי לראות את הדף בסגנון של מדיה להדפסה או של מסך.
• אמולציה של תכונת המדיה ב-CSS‏ forced-colors כדי לראות איך הדף נראה אם סוכן המשתמש הפעיל מצב של אילוץ צבעים.
• יצירת אמולציה של מדיה של CSS עם prefers-contrast כדי לראות את תוכן האינטרנט עם ערך ניגודיות גבוה יותר, נמוך יותר או ספציפי.
• יצירת אמולציה של מדיה של CSS עם prefers-reduced-motion כדי לראות את תוכן האינטרנט עם תנועה מופחתת. חלק מהמשתמשים מוסחים או חשים בחילה כתוצאה מתוכן מונפש. אפשר להשתמש באפשרות הזו כדי לראות איך הדף נראה בלי אנימציות או תכונות כמו גלילה חלקה.
• אפשר להשתמש בתכונת המדיה של CSS‏ prefers-reduced-transparency כדי לראות איך תוכן האינטרנט שלכם ייראה אם המשתמש יבקש לצמצם את האפקטים של השכבה השקופה או השקופה למחצה שמשמשים במכשיר.

איתור ותיקון של טקסט בניגודיות נמוכה

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