עיצוב מותאם למשתמש – סיכום אתגרים בעיצוב

זהו תרגום של המאמר:

Considering the User Perspective: A Summary of Design Issues
(© 2012, WebAIM)

תוכן המאמר:
עיוורון
עיוורון צבעים
בעיות ראיה
חירשות
מוגבלויות מוטוריות
מוגבלויות קוגנטיביות

עיוורון

אתגר פתרונות
תמונות וגרפיקה אינן נגישות ספקו תיאורים טקסטואליים באמצעות תגית ה-<alt> ובמידת הצורך, גם הסבר ארוך יותר (באותו עמוד או באמצעות קישור לעמוד אחר).
משתמשים פעמים רבות מאזינים לעמודי תוכן באינטרנט באמצעות שימוש בקורא מסך הוסיפו קישור המאפשר למשתמשים לדלג על תפריטי ניווט, רשימות ארוכות, אמנות ASCII ורכיבים אחרים שעשויים לפגוע בחווית המשתמש במידה והוא נדרש להאזין להן.
משתמשים לרוב עוברים בין קישרים על ידי שימוש במקש ה-Tab. יש לוודא שלקישור יש משמעות מתוך ההקשר ("לחץ כאן" הוא טקסט קישור בעייתי).
משתמשים לרוב לא עושים שימוש בעכבר. אל תכתבו סקריפטים שדורשים שימוש בעכבר. ספקו אפשרות להשתמש במקלדת (למשל שימוש ב- onFocus במקום onMouseover.
משתמשים עשויים להתקשות להבין את מיקומם בתוכן העמוד כאשר הם מאזינים למידע בטבלה או תוכן תא. ספקו כותרות לטורים ועמודות <th>) לטבלאות מידע. המנעו מאיחוד תאים בטבלאות ככל הניתן.
טבלאות וגרפים מסובכים אשר אשר ניתנים להבנה ויזואלית בלבד אינם שימושיים למשתמשים ללא יכולת ויזואלית. ספקו סיכומים או תיאורים טקסטואלים, עדיף באותו עמוד בו מוצגים הטבלה או הגרף, או קישור לעמוד אחר כאלטרנטיבה.
לא ניתן לצפות במספר פריימים במקביל. הגישה אליהן היא בנפרד, מה שעשוי להוביל לאיבוד האוריינטציה בעמוד. אל תשתמשו בפריימים אלא אם אין אפשרות אחרת. אם אתם משתמשים בהם, ספקו כותרת לכל פריים שמתארת את מטרת הפריים (למשל "תפריט", "תוכן").
אין שימוש בצבעים. אל תסתמכו על צבע בלבד להעברת משמעות או מידע.
משתמשים מצפים שקישורים יובילו לעמוד מסוים. אל תכתבו סקריפטים בקישורים שאין להם יעד אמיתי המקושר אליהם. המנעו מהשימוש בסקריפט כגון

href="javascript: function(this)"
קוראי מסך קוראים תוכן אינטרנטי לפי הסדר בו הוא מופיע בקוד. וודאו שקטעי קוד כמו CSS מורכב או טבלאות שנועדו לעיצוב פריסת העמוד מופיעים נכון בקוד כמו גם על המסך.
משתמשים לא יכולים לצפות באירועים המתרחשים בסרטון וידאו. הוסיפו תיאורי אודיו לסרטוני וידאו במקרים בהם הוידאו בליווי האודיו המקורי לא מספיקים להבנה של הסרטון (למשל קריין המתאר אירועים בסרטון שאינם מלווים בדיאלוג).

עיוורון צבעים

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

ראיה לקויה

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

חירשות

אתגר פתרונות
אודיו אינו שימושי. ספקו תמלולים לקטעי אודיו.
ספקו כתוביות סינכרוניות לקטעי וידאו.

מוגבלות מוטורית

אתגר פתרונות
יתכן והמשתמשים לא מסוגלים לעשות שימוש בעכבר. וודאו שכל השימושיות זמינה באמצעות המקלדת (נסו לעבור בין קישורים באמצעות מקש ה-Tab).
וודאו שסדר הטאבים הגיוני.
משתמשים עלולים להתעייך משימוש בטכנולוגיית "puff-and-sip" או טכנולוגיות דומות. ספקו אפשרות לדילוג על רשימות ארוכות של קישורים או סוגים נוספים של רשימות תוכן.
יתכן ומשתמשים עושים שימוש בתוכנה שמאפשרות שימוש בפקודות קוליות. תוכנות שמאפשרות שימוש בפקודות קוליות לא יכולות לדמות שימוש בעכבר באותו דיוק כפי שהן מסוגלות לדמות שימוש במקלדת. לכן יש לוודה שכל הפונקציונליות זמינה באמצעות המקלדת.

מוגבלות קוגנטיבית

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