JavaScript

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

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

כותרות דפים

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

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

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

תוכן דינמי

אחת מהפונקציות העוצמתיות ביותר של JavaScript היא היכולת להוסיף HTML ו-CSS לכל רכיב בדף. מפתחים יכולים ליצור אפליקציות דינמיות על סמך הפעולות או ההתנהגות של המשתמשים.

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

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

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

ניהול מיקוד

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

ניהול הריכוזים חיוני למשתמשים שמשתמשים במקלדת בלבד.

רמת הרכיב

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

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

רמת הדף

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

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

יש כמה שיטות לעשות את זה:

• מתמקדים במאגר הראשי עם ההודעה aria-live.
• כדי לדלג לתוכן הראשי, צריך להחזיר את המיקוד לקישור.
• מעבירים את המיקוד לכותרת ברמה העליונה של הדף החדש.

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

ניהול מדינה

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

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

רמת הרכיב

בהתאם לתוכן הדף ולמידע שהמשתמשים צריכים, יש הרבה מצבי ARIA שיש להביא בחשבון כשמעבירים מידע על רכיב למשתמש.

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

לחלופין, אפשר להשתמש ב-aria-pressed כדי לציין שנלחץ על לחצן.

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

רמת הדף

בדרך כלל מפתחים משתמשים באזור סמוי שנקרא אזור פעיל של ARIA הודעה על שינויים במסך והתראה על הודעות לטכנולוגיה מסייעת משתמשי (AT). אפשר להתאים את האזור הזה ל-JavaScript כדי להודיע למשתמשים על משתנה בדף בלי שתידרש טעינה מחדש של כל הדף.

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

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

הנה כמה חבילות פעילות ל-frameworks נפוצות של JavaScript:

• תגובה: react-aria-live וגם react-a11y-anuncer
• זוויתי: LiveAnnouncer
• מקום: vue-a11y-utils

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

בדיקת ההבנה

בוחנים את הידע שלכם ב-JavaScript