JavaScript

ל-JavaScript יש תפקיד מרכזי כמעט בכל מה שאנחנו יוצרים – מרכיבים דינמיים קטנים ועד למוצרים מלאים שפועלים על JavaScript framework, כמו 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 framework, אתם צריכים לחשוב איך אתם מטפלים בכותרות של דפים. זה חשוב במיוחד לאפליקציות של דף יחיד (SPA) שנטענות מקובץ index.html יחיד, כי מעברים או מסלולים (שינויים בדף) לא כוללים טעינה מחדש של הדף. בכל פעם שמשתמש טוען דף חדש באפליקציית SPA, הכותרת לא משתנה כברירת מחדל.

ב-SPA, אפשר להוסיף את הערך document.title באופן ידני או באמצעות חבילת עזר (בהתאם ל-JavaScript framework). יכול להיות שיידרש קצת יותר מאמץ כדי להודיע למשתמש בקורא מסך על כותרות הדפים המעודכנות, אבל החדשות הטובות הן שיש לכם אפשרויות, כמו תוכן דינמי.

תוכן דינמי

אחת מהפונקציות הכי שימושיות של 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 כדי ליצור תוכן שלא נגיש. ריכזנו כאן כמה דוגמאות לשימוש לא תקין:

ב-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 באופן אסינכרוני מקשה על טכנולוגיות מסייעות לזהות את האזור ולהכריז עליו. כדי שהתוכן ייקרא בצורה תקינה, האזור של השידור החי או ההתראה צריך להיות ב-DOM בזמן הטעינה, ואז אפשר להחליף את הטקסט באופן דינמי.

אם אתם משתמשים ב-JavaScript framework, החדשות הטובות הן שכמעט לכולם יש חבילה של 'הודעה בזמן אמת' שמבצעת את כל העבודה בשבילכם ונגישה באופן מלא. אין צורך לדאוג ליצירת אזור פעיל (live region) ולטפל בבעיות שמתוארות בקטע הקודם.

הנה כמה חבילות של שידור חי למסגרות JavaScript נפוצות:

• ‫React: react-aria-live ו-react-a11y-announcer
• ‫Angular: LiveAnnouncer
• ‫Vue: ‏ vue-a11y-utils

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