ל-JavaScript יש תפקיד חשוב כמעט בכל מה שאנחנו יוצרים – החל מרכיבים דינמיים קטנים ועד למוצרים מלאים שפועלים על מסגרת JavaScript, כמו React או Angular.
השימוש (או השימוש המוגזם) ב-JavaScript הוביל למגמות מדאיגות רבות, כמו זמני טעינה ארוכים עקב כמויות גדולות של קוד, שימוש ברכיבי HTML לא סמנטיים והזרקה של HTML ו-CSS דרך JavaScript. יכול להיות שאתם לא בטוחים איך נגישות משתלבת בכל אחד מהרכיבים האלה.
ל-JavaScript יכולה להיות השפעה עצומה על נגישות האתר. במודול הזה נשתף כמה דפוסים כלליים של נגישות שמשופרים באמצעות JavaScript, וגם פתרונות לבעיות נגישות שנובעות משימוש במסגרות JavaScript.
טריגרים לאירועים
אירועי JavaScript מאפשרים למשתמשים לבצע אינטראקציה עם תוכן אינטרנט ולבצע פעולה ספציפית. אנשים רבים, כמו משתמשים בקוראי מסך, אנשים עם מוגבלויות מוטוריות עדינות, אנשים ללא עכבר או משטח מגע ועוד, מסתמכים על תמיכה במקלדת כדי לקיים אינטראקציה עם האינטרנט. חשוב מאוד להוסיף תמיכה במקלדת לפעולות ה-JavaScript, כי היא משפיעה על כל המשתמשים האלה.
נבחן אירוע לחיצה.
אם נעשה שימוש באירוע onClick() ברכיב HTML סמנטי כמו <button> או <a>, הוא כולל באופן טבעי גם פונקציונליות של עכבר וגם פונקציונליות של מקלדת. עם זאת, הפונקציות של המקלדת לא חלות באופן אוטומטי כשאירוע onClick() מתווסף לאלמנט לא סמנטי, כמו <div> גנרי.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
אפשר לראות תצוגה מקדימה של ההשוואה הזו ב-CodePen.
אם נעשה שימוש ברכיב לא סמנטי כאירוע מפעיל, צריך להוסיף אירוע keydown/keyup כדי לזהות את הקשה על מקש Enter או על מקש הרווח. לרוב שוכחים להוסיף אירועי טריגר לאלמנטים לא סמנטיים. לצערי, אם שוכחים להוסיף את הקוד הזה, התוצאה היא רכיב שאפשר לגשת אליו רק באמצעות עכבר. משתמשים שמשתמשים במקלדת בלבד לא יכולים לגשת לפעולות המשויכות.
כותרות דפים
כפי שלמדנו במודול המסמך, כותרת הדף חיונית למשתמשים בקורא מסך. הוא מאפשר למשתמשים לדעת באיזה דף הם נמצאים ואם הם מנווטים לדף חדש.
אם אתם משתמשים במסגרת JavaScript, עליכם להחליט איך לטפל בשמות הדפים. הדבר חשוב במיוחד לאפליקציות דף יחיד (SPA) שנטענות מקובץ index.html יחיד, כי מעברים או מסלולים (שינויי דפים) לא כוללים טעינה מחדש של הדף. בכל פעם שמשתמש טוען דף חדש ב-SPA, השם לא ישתנה כברירת מחדל.
ב-SPA, אפשר להוסיף את הערך document.title באופן ידני או באמצעות חבילת עזר (בהתאם למסגרת JavaScript). יכול להיות שתצטרכו להשקיע קצת עבודה נוספת כדי להודיע למשתמש בקורא מסך על כותרות הדפים המעודכנות, אבל החדשות הטובות הן שיש לכם אפשרויות, כמו תוכן דינמי.
תוכן דינמי
אחת מהפונקציות החזקות ביותר של JavaScript היא היכולת להוסיף HTML ו-CSS לכל רכיב בדף. מפתחים יכולים ליצור אפליקציות דינמיות על סמך הפעולות או ההתנהגויות של המשתמשים.
נניח שאתם צריכים לשלוח הודעה למשתמשים כשהם נכנסים לאתר או לאפליקציה שלכם. אתם רוצים שההודעה תבלוט על רקע לבן ותציג את ההודעה: "עכשיו נכנסת לחשבון".
אפשר להשתמש ברכיב innerHTML כדי להגדיר את התוכן:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
אפשר להחיל CSS באופן דומה, באמצעות setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
כוח גדול מחייב אחריות גדולה. לצערנו, הזרקת JavaScript של HTML ו-CSS שימשה בעבר לשימוש לרעה ליצירת תוכן שלא נגיש. ריכזנו כאן כמה דוגמאות לשימוש לרעה נפוץ:
| שימוש לרעה אפשרי | שימוש נכון |
|---|---|
| רינדור של קטעי HTML גדולים שאינם סמנטיים | רינדור של קטעים קטנים יותר של HTML סמנטי |
| לא נותנים מספיק זמן לטכנולוגיה מסייעת לזהות תוכן דינמי | שימוש בהשהיה של setTimeout() שניות כדי לאפשר למשתמשים לשמוע את ההודעה במלואה |
החלת מאפייני סגנון על onFocus() באופן דינמי |
משתמשים ב-:focus לרכיבים הקשורים בגיליון הסגנונות של ה-CSS |
| החלת סגנונות בתוך שורות עלולה לגרום לכך שגיליון סגנונות המשתמש לא יקרא כראוי | שמירת הסגנונות בקובצי CSS כדי לשמור על עקביות העיצוב |
| יצירת קובצי JavaScript גדולים מאוד שמאטים את הביצועים הכוללים של האתר | להשתמש בפחות JavaScript. יכול להיות שתוכלו לבצע פונקציות דומות ב-CSS (כמו אנימציות או ניווט דביק), שהניתוח שלהן מהיר יותר והביצועים שלהן טובים יותר |
ב-CSS, משתמשים במצב החלפת מצב של כיתות CSS במקום להוסיף סגנונות בתוך שורה, כי כך אפשר לעשות שימוש חוזר בקלות. שימוש בתוכן מוסתר בדף ובשינוי מצב של כיתות כדי להסתיר ולהציג תוכן ב-HTML דינמי. אם אתם צריכים להשתמש ב-JavaScript כדי להוסיף תוכן לדף באופן דינמי, הקפידו שהקוד יהיה פשוט וקצר, וכמובן נגיש.
ניהול המיקוד
במודול ההתמקדות במקלדת, דיברנו על סדר ההתמקדות ועל סגנונות של סמנים. ניהול המיקוד הוא היכולת לדעת מתי ואיפה לכוון את המיקוד ומתי לא כדאי לעשות זאת.
ניהול המיקוד חיוני למשתמשים שמשתמשים רק במקלדת.
ברמת הרכיב
אם לא מנהלים כראוי את המיקוד של רכיב, אפשר ליצור מלכודות מקלדת. מלכודת מקלדת מתרחשת כשמשתמש שמשתמש רק במקלדת נתקע ברכיב, או כשהמיקוד לא נשמר כראוי.
אחד מהדפוסים הנפוצים ביותר שבהם משתמשים נתקלים בבעיות בניהול המיקוד הוא רכיב מודלי. כשמשתמש שמשתמש רק במקלדת נתקל בחלון דו-שיח, הוא אמור להיות מסוגל להקיש על Tab בין הרכיבים שניתן לבצע בהם פעולה בחלון הדו-שיח, אבל אף פעם לא צריך לאפשר לו לצאת מחלון הדו-שיח בלי לסגור אותו במפורש. JavaScript חיוני כדי לתפוס את המיקוד הזה בצורה נכונה.
ברמת הדף
צריך לשמור על המיקוד גם כשהמשתמש עובר מדף לדף. זה נכון במיוחד ב-SPA, שבו אין רענון של הדפדפן וכל התוכן משתנה באופן דינמי. בכל פעם שמשתמש לוחץ על קישור כדי לעבור לדף אחר באפליקציה, המיקוד נשאר באותו מקום או יכול להיות ממוקם במקום אחר לגמרי.
כשעוברים בין דפים (או כשמנתבים), צוות הפיתוח צריך להחליט איפה יהיה המיקוד כשהדף ייטען.
יש כמה שיטות להשגת המטרה הזו:
- מעבירים את המיקוד לקונטיינר הראשי באמצעות הודעת
aria-live. - מעבירים את המיקוד בחזרה לקישור כדי לדלג לתוכן הראשי.
- מעבירים את המיקוד לכותרת ברמה העליונה של הדף החדש.
איפה תבחרו להתמקד תלוי במסגרת שבה אתם משתמשים ובתוכן שאתם רוצים להציג למשתמשים. הוא עשוי להיות תלוי בהקשר או בפעולה.
ניהול המצב
תחום נוסף שבו JavaScript חיוני לנגישות הוא ניהול המצב, כלומר העברת המצב החזותי הנוכחי של רכיב או דף למשתמש בטכנולוגיה מסייעת עם לקות ראייה, עיוור או עיוור-חירש.
לרוב, המצב של רכיב או דף מנוהל באמצעות מאפייני ARIA, כפי שמתואר במודול ARIA ו-HTML. נבחן כמה מהסוגים הנפוצים ביותר של מאפייני ARIA שמשמשים לניהול המצב של רכיב.
ברמת הרכיב
בהתאם לתוכן הדף ולמידע שהמשתמשים שלכם זקוקים לו, יש הרבה מצבי ARIA שצריך להביא בחשבון כשמעבירים מידע על רכיב למשתמש.
לדוגמה, אפשר להשתמש במאפיין aria-expanded כדי להודיע למשתמש אם תפריט נפתח או רשימה מורחבים או מכווצים.
אפשר גם להשתמש ב-aria-pressed כדי לציין שלחצן כלשהו נלחץ.
חשוב להיות סלקטיביים כשמחילים מאפייני ARIA. כדאי לחשוב על תהליך השימוש כדי להבין איזה מידע קריטי צריך להעביר למשתמש.
ברמת הדף
מפתחים משתמשים לעיתים קרובות באזור מוסתר מבחינה חזותית שנקרא אזור ARIA פעיל כדי להודיע על שינויים במסך ולשלוח התראות למשתמשים בטכנולוגיה מסייעת (AT). אפשר להתאים את האזור הזה ל-JavaScript כדי להודיע למשתמשים על שינויים דינמיים בדף בלי שתצטרכו לטעון מחדש את כל הדף.
בעבר, היה קשה להשתמש ב-JavaScript כדי להציג תוכן באזורים של aria-live והתראות בגלל האופי הדינמי שלו. הוספה אסינכררונית של תוכן ל-DOM מקשה על AT לזהות את האזור ולהודיע עליו.
כדי שהתוכן יהיה קריא, האזור הפעיל או האזור של ההתראה צריכים להיות ב-DOM בזמן הטעינה, ואז אפשר להחליף את הטקסט באופן דינמי.
אם אתם משתמשים במסגרת JavaScript, החדשות הטובות הן שלכמעט כולן יש חבילת 'קריין בשידור חי' שמבצעת את כל העבודה בשבילכם, והיא נגישה לחלוטין. אין צורך ליצור אזור פעיל ולטפל בבעיות שמתוארות בקטע הקודם.
ריכזנו כאן כמה חבילות קיימות של מסגרות JavaScript נפוצות:
- React: react-aria-live ו-react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript מודרנית היא שפה חזקה שמאפשרת למפתחי אתרים ליצור אפליקציות אינטרנט חזקות. לפעמים זה מוביל לתכנון מוגזם, וכתוצאה מכך לדפוסים שלא נגישים. בעזרת התבניות והטיפים ל-JavaScript שמפורטים במודול הזה, תוכלו להפוך את האפליקציות שלכם לנגישות יותר לכל המשתמשים.
בדיקת ההבנה
בדיקת הידע שלכם ב-JavaScript
איזו דרך היא הטובה ביותר לשנות את הסגנון של רכיב באמצעות JavaScript?
האם כל הפעולות ב-JavaScript תומכות במשתמשים במקלדת?