alterno logo 2021-02

המלצות להנגשת יישומי SAPUI5

במהלך פיתוח יישומי UI5 ישנם מספר דגשים שכדאי לשים אליהם לב על מנת לאפשר הנגשה של יישומים אלה למשתמשים בעלי מוגבלויות שונות. ההמלצה הכי חשובה – ספקו כמה שיותר מידע שניתן במסכי היישום, כולל תיאור לשדות, כותרות, סיוע \ הסבר עבור השדות, כותרות עבור טבלאות וכו'. זה יעזור למי שקורא מהמסך לפרש ולהבין מה הכוונה מאחורי כל שדה/טופס.

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

2.     אל תדרסו Keyboard Handlers (לדוגמא עם jQuery)

3.     ספקו תיאורים בעלי משמעות לTooltips- ול-Placeholders לאלמנטים ללא טקסט. אל תשתמשו ב-Tooltips בשביל Layouts/Containers.

4.     לכל התמונות צריך להיות 'ALT Description' שמסביר מה משמעות התמונה (בעיקר על מנת לאפשר ל-Screen Reader להקריא את המשמעות שת אותה תמונה)

5.     תוודאו שלכל האלמנטים יש Label/Tooltip, אשר משמעותי ומדויק

6.     אל תקבעו גובה / רוחב קבוע לאלמנטים (אנשים עלולים לעשות זום וזה ישבור את היחס בין רכיבים).

7.     וודאו שזום של 200% לא גורם לאלמנטים לעלות אחד על השני, ושהכל מוגדל באופן יחסי.

8.    בקבצי ה-CSS – השתמשו ב-REM\EM במקום PX בתור יחידת מידה.

9.     השתמשו במבני מסך גמישים (Flexible) שיודעים להתאים את עצמם לשינויי מסך \ רזולוציה

10.  השתמשו בצבעים סטנדרטיים של SAP במקום בצבעים מותאמים אישית.

11.  אל תשנו או תגדירו כיוון זרימה לאלמנטים (צריך לטפל בכך דרך ה-Layout).

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

13.  שמרו על סדר קריאה הגיוני לכל האלמנטים.

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

15.  השתמשו בכותרות לקומפננטות מסובכות כך שמי שקורא מהמסך יוכל לפרש קבוצות על פי הכותרת.

16.  וודאו שלכל השדות יש תוויות (Labels), בנוסף לזה אתם יכולים להוסיף תיאור על מנת לספק מידע נוסף, כמו יחידת מידה לדוגמא.

17.  ברשימות\טבלאות הוסיפו Toolbar עם כותרת

18.  במידה ויש אודיו/סרטונים הם ילוו בכתוביות

19.  שמרו על טקסט ברור לקישורים, באופן שישקף את מטרת הקישור.

20.  שמרו על ניגודיות (contrast) מיטבית.

Any questions?

Just write us a message!

Fill out the form and we will be in touch as soon as possible!