ל-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 כדי להוסיף תוכן לדף באופן דינמי, הקפידו שהקוד יהיה פשוט וקצר, וכמובן נגיש.
ניהול המיקוד
במודול ההתמקדות במקלדת, התייחסנו לסדר ההתמקדות ולסגנונות של הסמנים. ניהול מיקודים הוא לדעת מתי ואיפה למקד את המיקוד ומתי לא צריך להיכנע.
ניהול המיקוד חיוני למשתמשים שמשתמשים רק במקלדת.
רמת הרכיב
אם לא מנהלים כראוי את המיקוד של רכיב, אפשר ליצור מלכודות מקלדת. מלכודת מקלדת מתרחשת כשמשתמש שמשתמש רק במקלדת נתקע ברכיב, או כשהמיקוד לא נשמר כראוי.
אחד מהדפוסים הנפוצים ביותר שבהם משתמשים נתקלים בבעיות בניהול המיקוד הוא רכיב מודלי. כשמשתמש עם מקלדת בלבד נתקל בחלון מודאלי, צריך לאפשר לו לעבור בין הרכיבים שבהם אפשר לבצע פעולה בחלון העזר, אבל אסור לאשר אותם מחוץ לחלון העזר בלי לסגור אותו באופן מפורש. JavaScript חיוני כדי "ללכוד" את המיקוד הזה בצורה תקינה.
ברמת הדף
צריך לשמור על המיקוד גם כשהמשתמש עובר מדף לדף. זה נכון במיוחד ב-SPA, שבו אין רענון של הדפדפן וכל התוכן משתנה באופן דינמי. בכל פעם שמשתמש לוחץ על קישור כדי לעבור לדף אחר באפליקציה, המיקוד נשאר באותו מקום או עשוי להיות ממוקם במקום אחר לגמרי.
כשעוברים בין דפים (או כשמנתבים), צוות הפיתוח צריך להחליט איפה יהיה המיקוד כשהדף ייטען.
יש כמה שיטות להשגת המטרה הזו:
- מעבירים את המיקוד לקונטיינר הראשי באמצעות הודעה
aria-live
. - כדי לדלג לתוכן הראשי, מעבירים את המיקוד בחזרה לקישור.
- מעבירים את המיקוד לכותרת ברמה העליונה של הדף החדש.
המקום שבו תחליטו להתמקד תלוי במסגרת שבה אתם משתמשים ובתוכן שאתם רוצים להציג למשתמשים. הוא עשוי להיות תלוי בהקשר או בפעולה.
ניהול המצב
תחום נוסף שבו JavaScript חיוני לנגישות הוא ניהול המצב, כלומר העברת המצב החזותי הנוכחי של רכיב או דף למשתמש בטכנולוגיה מסייעת עם לקות ראייה, עיוור או עיוור-חירש.
לעיתים קרובות, המצב של רכיב או של דף מנוהל באמצעות מאפייני ARIA, כפי שמוסבר במודול ARIA ו-HTML. נבחן כמה מהסוגים הנפוצים ביותר של מאפייני ARIA שמשמשים לניהול המצב של רכיב.
ברמת הרכיב
בהתאם לתוכן הדף ולמידע שהמשתמשים שלכם זקוקים לו, יש הרבה מצבי ARIA שצריך להביא בחשבון כשמעבירים מידע על רכיב למשתמש.
לדוגמה, אפשר להשתמש במאפיין aria-expanded
כדי להודיע למשתמש אם תפריט נפתח או רשימה מורחבים או מכווצים.
אפשר גם להשתמש ב-aria-pressed
כדי לציין שלחצן כלשהו נלחץ.
חשוב לבחור במאפייני ARIA כשמחילים מאפיינים מסוג ARIA. חשבו על תהליך העבודה של המשתמש כדי להבין איזה מידע קריטי צריך להעביר למשתמש.
ברמת הדף
מפתחים משתמשים לעיתים קרובות באזור מוסתר מבחינה חזותית שנקרא אזור פעיל של ARIA כדי להודיע על שינויים במסך ולהציג הודעות התראה למשתמשים בטכנולוגיה מסייעת (AT). אפשר להתאים את האזור הזה ל-JavaScript כדי להודיע למשתמשים על שינויים דינמיים בדף בלי שתצטרכו לטעון מחדש את הדף כולו.
בעבר, JavaScript היה קשה להודיע על תוכן ב-aria-live
ולהתריע באזורים בגלל אופיו הדינמי. הוספה אסינכררונית של תוכן ל-DOM מקשה על AT לזהות את האזור ולהודיע עליו.
כדי שהתוכן יהיה קריא, האזור הפעיל או האזור של ההתראה צריכים להיות ב-DOM בזמן הטעינה, ואז אפשר להחליף את הטקסט באופן דינמי.
אם אתם משתמשים במסגרת JavaScript, החדשות הטובות הן שלכמעט כולן יש חבילת 'קריין בשידור חי' שמבצעת את כל העבודה בשבילכם, והיא נגישה לחלוטין. אין צורך ליצור אזור פעיל ולטפל בבעיות שמתוארות בקטע הקודם.
ריכזנו כאן כמה חבילות קיימות של מסגרות JavaScript נפוצות:
- תגובה: react-aria-live וגם react-a11y-announcer
- Angular:
LiveAnnouncer
- Vue: vue-a11y-utils
JavaScript מודרני הוא שפה חזקה שמאפשרת למפתחי אינטרנט ליצור אפליקציות אינטרנט חזקות. לפעמים זה מוביל לתכנון מוגזם, וכתוצאה מכך לדפוסים שלא נגישים. בעזרת התבניות והטיפים ל-JavaScript שמפורטים במודול הזה, תוכלו להפוך את האפליקציות שלכם לנגישות יותר לכל המשתמשים.
בדיקת ההבנה
בוחנים את הידע שלכם ב-JavaScript
איזו דרך הכי טובה לשנות את הסגנון של רכיב באמצעות JavaScript?
האם כל הפעולות ב-JavaScript תומכות במשתמשים במקלדת?