אתגר האנגולר והנגישות!
מפתחי אנגולר ניצבים בפני אתגר משמעותי כאשר מצד אחד נדרשים לפתח אתר בעל חווית משתמש מבוססת על יישום בעל עמוד אחד (Single Page Application או בקיצור "SPA") ומצד שני נדרשים לעמידתו בתקני הנגישות לבעלי מוגבלויות. רכזנו מספר דגשים ותובנות אשר צברנו מהלך עבודתנו ויסייעו לכם לפצח את האתגר.
25/04/2016
לפני שנצלול למספר אתגרים מרכזיים להנגשת האפליקציות נציין כי האתגר מתחיל בעבודת עיצוב ממשק המשתמש (UI) אשר מחייבת את מאפיין חווית המשתמש (UX) להכיר ולשלוט בנושא הנגישות בנקודות התורפה שבהן יתקלו המפתחים במהלך הפיתוח ותפקידו לשלב זאת במערכת השיקולים בעת אפיון חווית המשתמש מחד ומצד שני להעביר את הידע והציפיות לאנשי הפיתוח בעת מסירת תוצרי עבודת העיצוב.
הרי בסופו של יום הצלחתו של פרויקט הוא ביכולת לממש את חווית המשתמש שתוכננה ולכן חשוב שיהיה חוט ידע מקשר לאורך כל חיי הפרויקט העובר בין אנשי העיצוב לאנשי הפיתוח ואנשי בדיקות האיכות.
בניה היררכית של הישויות בעמוד
בניה היררכית של הישויות בעמוד חשובה ביותר היות ומכשירים שמשמשים בעלי מוגבלויות כדוגמת קוראי מסך (Screen Readers) מתבססים על מבנה העמוד והיכולת לעבור בין מרכיבי העמוד באמצעות המקלדת. היות שאתרי SPA מבוססים על שפה סמנטית התומכת ברמות היררכיה הרי שמימוש יכולות אלו נתמכת אך ישנה חשיבות להקפיד ליצירת בסיס מוצק. לכן מומלץ לוודא כבר בשלב זה מעבר תקין והגיוני בין רכיב העמוד באמצעות מקש Tab ומקשי החיצים.
בניה נכונה של העמוד תאפשר בהמשך לממש התמקדות על רכיבים בהתאם לחווית המשתמש שהוגדרה בקלות.
מימוש מבנה העמוד נעשה באמצעות תגים כדוגמת <head>, <body>, <nav>, <main>, <footer>, תגי כותרות (h1,h2) וכמובן שימוש במקטעים מבוססי <div>.
כותרת העמוד
כותרת העמוד, אשר מוצגת בלשונית הדפדפן, נועדה לייצג את תוכן העמוד ורלוונטית לא רק לצרכי הנגשה אלא גם לצרכי לצרכי התמצאות וקידום אורגני.
למרות שבאתרי SPA אין החלפה של עמודים הרי שיש להקפיד על שינוי כותרת העמוד בהתאם לכל שינוי בתצוגת התוכן שנעשה ע"י הגולש.
שינוי התג <title> נעשה באמצעות הגדרת ה- root title, הגדרת הכותרות הנדרשות לכל ניתוב (route), האזנה לשינויים שנעשים ב- route ובהתאם לכך שינוי הערך של התג title.
ניווט באמצעות מקלדת
למרות התמיכה של אנגולר במאפיין ng-click אותו ניתן להוסיף כמעט לכל תג ומאפשר טיפול בעת הקלקה על התג הרי שהדפדפנים השונים אינם תומכים בהתמקדות (focus) על אלמנטים כדוגמת <div>. המלצתנו לממש כפתורים באמצעות תג הכפתור (<input type=button>) וקישורים באמצעות בתג הקישור (<a>). באופן זה הטיפול בהתמקדות יעשה ע"י הדפדפן ובמידת הצורך באמצעות באמצעות שינויי הגדרות css של האובייקט עליו הקליקו.
נושא נוסף שיש להקפיד בפיתוח אפליקציות אנגולר הוא מניעת הקלדה מיותרת באמצעות איתחול ערכים בשדות ושמירת ערכים שהוקלדו לשימוש חוזר. לדוגמא כאשר ישנם שדות חיפוש הרי שלאחר ביצוע החיפוש מומלץ לאתחל את השדות באותם ערכים שעלפיהם הוא בוצע.
התמקדות על אובייקטים (Focus Management)
אחד האתגרים המשמעותיים בפיתוח יישומי SPA או תמיכה בקוראי טקסט כאשר העמוד בעצם לא נטען כל פעם מחדש אלא מרכיבי תצוגה מסויימים בלבד. כתוצאה מכך לא תמיד נשמר המיקוד על האלמנט עליו התמקדו לאחרונה וגולש העושה שימוש בקורא טקסט מתקשה להבין מה השינוי שנעשה בעמוד.
הגדרות ההתמקדות הבסיסיות נעשות באמצעות המאפיין tabindex ופיתוח Javascript אשר מבצע את ההתמקדות על אובייקטים הנדרשים.
כמה דגשים ותובנות:
1. בעת טעינת העמוד מומלץ להתמקד בתג <h1> וכמובן לשנות את ערכו בכל שינוי שנעשה בעמוד ורלוונטי למלל המוצג בו.
2. בעת ביצוע פעולה כלשהיא (כדוגמת חזרה מעריכת רשומה בחלון לרשימת הרשומות) חשוב להחזיר את ההתמקדות לרכיב הרלוונטי (למשל כפתור העריכה ליד הרשומה שאותה ערכנו כרגע וממנה חזרנו לרכיב הרשימה).
3. בעת מחיקת מידע (כדוגמת מחיקת רשומה) יש להחזיר את ההתמקדות למקום רלוונטי כדוגמת הודעה כי הרשומה נמחקה בהצלחה.
4. בעת הסתרת מידע (כדוגמת צמצום או הרחבה של מקטעים) יש להחזיר את ההתמקדות לקישור באמצעותו צמצם הגולש או הרחיב את המקטע באופן שיאפשר לו המשך רציף.
מלל הנחיה
לרוב נעשה שימוש במאפיין title להגדרת מלל חליפי לתמונות, קישורים וכדומה אך בסביבת האנגולר מומלץ להשתמש במנגנוני הכללה של מלל שנתמך ע"י קוראי טקסט (טכניקה זו נקראת Visual Hidden Text).
נושא נוסף יש להקפיד עליו הוא כאשר יש מספר אלמנטים מאותו סוג בעמוד כדוגמת טבלה עם צלמיות לעריכת רשומות. מלל הנחיה של "עריכה" על כל צלמית לא יאפשר הבנה על איזה רשומה מדובר ולכן מומלץ להוסיף הנחיה המעידה גם על הרשומה עבורה לחיצה על הצלמית תאפשר עריכה.
ARIA live
אנגולר תומך בעדכון דו כיווני של תוכן בעמוד ומאפשר עדכון תכנים שונים בעת ובעונה אחת ללא טעינה מחודשת של העמוד. זו יכולת שמאפשרת לספק לגולש חווית משתמש ידידותית אך מצד שני מציבה אתגר כיצד הגולש ידע איזה מידע בדיוק התעדכן בתצוגה.
בכדי להתמודד עם אתגר זה מומלץ להתבסס על המאפיין aria-live אשר מודיע לקורא המלל איזה שינויים נעשה בתוכן של התג אליו הוא מוצמד.
סקרנו כאן דגשים בסיסיים אך חשובים לפיתוח יישומי SPA ובדגש על פיתוח מבוסס אנגולר אך ישנם היבטים רבים נוספים שיש להתייחס אליהם בכדי לספק יישומי SPA נגישים. הנכם מוזמנים לפנות אלינו לנשמח לשתף מניסיוננו בעיצוב ממשקים ליישומי SPA נגישים וליווי צוות הפיתוח במימושם.
