ל-JavaScript יש תפקיד חשוב כמעט בכל דבר שאנחנו יוצרים, החל מרכיבים דינמיים קטנים יותר ועד למוצרים מלאים שפועלים במסגרת JavaScript, כמו React או Angular.
השימוש (או השימוש יתר) ב-JavaScript גרם למגמות מדאיגות רבות, כמו זמני טעינה ארוכים בשל כמויות גדולות של קוד, שימוש ברכיבי HTML שאינם סמנטיים והחדרת HTML ו-CSS באמצעות JavaScript. אבל אולי לא ברור לכם איך הנגישות מתאימה לכל אחד מהרכיבים האלה.
ל-JavaScript יש השפעה עצומה על נגישות האתר. במודול הזה נציג כמה תבניות כלליות לנגישות ששופרו על ידי JavaScript, ונסביר פתרונות לבעיות נגישות שנובעות מהשימוש ב-frameworks של 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 או על מקש הרווח. הרבה פעמים שוכחים את ההוספה של אירועי טריגר לרכיבים לא סמנטיים. לצערנו, כאשר נשכחים, התוצאה היא רכיב שניתן לגשת אליו רק באמצעות עכבר. משתמשים עם הרשאת גישה למקלדת בלבד נותרים ללא גישה לפעולות המשויכות.
כותרות דפים
כפי שלמדנו במודול Document, כותרת הדף חיונית למשתמשים הנעזרים בקורא מסך. מציין את המשתמשים באיזה דף הם נמצאים ואם הם ניווטו לדף חדש.
אם אתם משתמשים במסגרת JavaScript, עליכם לשקול את האופן שבו אתם מטפלים בכותרות דפים. הדבר חשוב במיוחד לאפליקציות בדף יחיד (SPA) שנטענות מקובץ index.html יחיד, כי מעברים או נתיבים (שינויים בדף) לא כרוכים מחדש בטעינה מחדש של הדף. בכל פעם שמשתמש טוען דף חדש ב-SPA, הכותרת לא משתנה כברירת מחדל.
במקרה של שירותי SPA, אפשר להוסיף את הערך של document.title באופן ידני או באמצעות חבילת עזר (בהתאם למסגרת של JavaScript). ההכרזה על כותרות הדפים המעודכנות למשתמש בקורא מסך עשויה להימשך זמן נוסף, אבל החדשות הטובות הן שיש אפשרויות כמו תוכן דינמי.
תוכן דינמי
אחת מהפונקציות העוצמתיות ביותר של JavaScript היא היכולת להוסיף HTML ו-CSS לכל רכיב בדף. מפתחים יכולים ליצור אפליקציות דינמיות על סמך הפעולות וההתנהגויות של המשתמשים.
נניח שאתם צריכים לשלוח הודעה למשתמשים כשהם מתחברים לאתר או לאפליקציה שלכם. אתם רוצים שההודעה תבלוט מהרקע הלבן ותעביר את ההודעה: 'You are now linked in' (אתה מחובר עכשיו).
תוכלו להשתמש ברכיב innerHTML כדי להגדיר את התוכן:
document.querySelector("#banner").innerHTML = '<p>You are now logged 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 כדי להוסיף תוכן באופן דינמי לדף, ודאו שהוא פשוט ותמציתי, וכמובן שניתן לגשת אליו.
ניהול התמקדות
במודול 'מיקוד המקלדת', הסברנו את הסגנונות של סדר המיקוד ושל האינדיקטורים. ניהול התמקדות הוא היכולת לדעת מתי והיכן לצלם את הפוקוס ומתי לא.
התכונה 'ניהול מיקוד' היא כלי חיוני למשתמשים עם מקלדת בלבד.
רמת הרכיב
אפשר ליצור מכמונות מקלדת כשהמיקוד של רכיב כלשהו לא מנוהל כראוי. המלכודת במקלדת מתרחשת כשמשתמש עם מקלדת בלבד נתקע ברכיב, או כשהמיקוד לא נשמר כראוי.
אחד הדפוסים הנפוצים ביותר שבו משתמשים חווים בעיות בניהול המיקוד הוא רכיב מודולרי. כשמשתמש עם מקלדת בלבד נתקל בחלון מודאלי, המשתמש צריך להיות מסוגל לעבור בין הרכיבים שמאפשרים לבצע פעולות בחלון הקופץ, אבל אסור לאשר אותם מחוץ לחלון מבלי לסגור אותו באופן מפורש. JavaScript חיוני להשגת מיקוד הולם.
ברמת הדף
יש לשמור על המיקוד גם כשמשתמש מנווט מדף לדף. זה נכון במיוחד באפליקציות SPA, שבהן לא מתבצע רענון של הדפדפן וכל התוכן משתנה באופן דינמי. בכל פעם שמשתמש לוחץ על קישור כדי לעבור לדף אחר באפליקציה, המיקוד נשמר באותו מקום או עשוי להיות ממוקם במקום אחר לגמרי.
כשצוות הפיתוח עובר בין דפים (או בניתוב), הוא צריך להחליט איפה להתמקד כשהדף נטען.
יש כמה שיטות לעשות את זה:
- העברת המיקוד למאגר הראשי עם הכרזה על
aria-live. - מחזירים את המיקוד לקישור כדי לדלג לתוכן הראשי.
- מעבירים את המיקוד לכותרת ברמה העליונה של הדף החדש.
המקום שבו תחליטו להתמקד תלוי במסגרת שבה אתם משתמשים ובתוכן שאתם רוצים להציג למשתמשים. הסרטון יכול להיות תלוי הקשר או פעולה.
ניהול מדינה
תחום נוסף שבו JavaScript קריטי לנגישות הוא ניהול המצב, או כאשר המצב החזותי הנוכחי של רכיב או של דף מועבר למשתמשים לקויי ראייה, למשתמשים עיוורים או למשתמשים בטכנולוגיה מסייעת עיוורון.
לעיתים קרובות, המצב של רכיב או דף מנוהל באמצעות מאפייני ARIA, כפי שמתואר במודול ARIA ו-HTML. נסביר על כמה מהסוגים הנפוצים ביותר של מאפייני ARIA שעוזרים לנהל את המצב של רכיב.
רמת הרכיב
בהתאם לתוכן הדף ולמידע שהמשתמשים צריכים, יש מצבי ARIA רבים שצריך להביא בחשבון כשמעבירים למשתמש מידע על רכיב מסוים.
לדוגמה, אפשר להשתמש
במאפיין aria-expanded כדי
ליידע את המשתמש אם תפריט נפתח או רשימה נפתחת או מכווצת.
לחלופין, אפשר להשתמש ב-aria-pressed כדי לציין שבוצעה לחיצה על לחצן.
חשוב להיות סלקטיביים כשמחילים מאפייני ARIA. נסו לחשוב על זרימת המשתמשים כדי להבין איזה מידע חשוב צריך להעביר למשתמש.
ברמת הדף
לעיתים קרובות המפתחים משתמשים באזור מוסתר מבחינה ויזואלית שנקרא ARIA live region כדי להודיע על שינויים במסך ולשלוח התראות למשתמשי טכנולוגיה מסייעת (AT). ניתן להתאים את האזור הזה ל-JavaScript כדי להודיע למשתמשים על שינויים דינמיים בדף, בלי שיהיה צורך לטעון מחדש את כל הדף.
בעבר, טכנולוגיית JavaScript התקשה להכריז על תוכן ב-aria-live
ולהתריע על אזורים בשל האופי הדינמי שלה. הוספה אסינכרונית של תוכן ל-DOM מקשה על AT לאסוף את האזור ולהכריז עליו.
כדי שהתוכן ייקרא כראוי, האזור הפעיל או ההתראה צריכים להיות ב-DOM בזמן הטעינה, ואז אפשר להחליף את הטקסט באופן דינמי.
אם אתם משתמשים במסגרת JavaScript, החדשות הטובות הן שכמעט לכל אחת מהן יש חבילה של 'כרוז חי' שעושה את כל העבודה בשבילכם ושאפשר לגשת אליה באופן מלא. לא צריך לדאוג לגבי יצירת אזור פעיל וטיפול בבעיות שתוארו בקטע הקודם.
הנה כמה חבילות פעילות של מסגרות JavaScript נפוצות:
- תגובה: react-aria-live ו-react-a11y-announcer
- זוויתית:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript מודרני הוא שפה רבת עוצמה שמאפשרת למפתחי אינטרנט ליצור אפליקציות אינטרנט חזקות. כתוצאה מכך, לפעמים נוצרת הנדסה יתר, וכתוצאה מכך גם לדפוסים לא נגישים. אם תפעלו לפי התבניות והטיפים של JavaScript במודול הזה, תוכלו להפוך את האפליקציות שלכם לנגישות יותר לכל המשתמשים.
בדיקת ההבנה
בחינת הידע שלך ב-JavaScript
מהי הדרך הטובה ביותר לשנות סגנון של רכיב באמצעות JavaScript?
האם כל הפעולות של JavaScript יכולות לתמוך במשתמשים במקלדת?