עיצוב עבור אתר אינטרנט נגיש
עבודת העיצוב של האתר חייבת לקחת בחשבון את נושא הנגשת אתרים, במיוחד היום כשרוב מערכות בניית האתר מאפשרות עיצוב ופיתוח במקום אחד כמו אלמנטור למשל.
במאמר זה נציג מספר שיקולים בסיסיים שיש לקחת בחשבון כאשר אנו רוצים להפוך ממשק המשתמש והעיצוב החזותי של האתר לנגישים יותר לאנשים עם מוגבלויות.
הדוגמאות שמובאות במאמר נלקחו מאתר W3C המאגד דרישות הנחיות נגישות תוכן אתר אינטרנט (WCAG).
ספקו ניגודיות מספקת בין צבע החזית לצבע הרקע
לטקסט הקדמי חייבת להיות ניגודיות מספקת לעומת צבעי הרקע. זה כולל טקסט על תמונות, מעברי רקע, לחצנים ואלמנטים אחרים.
ההנחיה לא חלה על לוגואים, או טקסט מוטמע, כמו למשל טקסט שנמצא בתמונה.
WCAG משתמשת ביחס ניגודיות בהירות על מנת לבדוק עמידה בתנאי.
ניתן להשתמש בכלים רבים לבדיקת הניגודית כמו גם פלאג אין רבים של כרום בינהם Color contrast analyzer.
אל תשתמשו בצבע בלבד להעברת מידע
שימוש בצבע להעברת מסר או מידע יכולה להיות שימושית אך לא יכולה להיות הדרך היחידה להעברת מידע. כאשר משתמשים בצבע כדי להבדיל בין אלמנטים, ספקו גם זיהוי נוסף שאינו מסתמך על תפיסת צבע. לדוגמה, השתמשו בכוכבית בנוסף לצבע כדי לציין שדות טפסים נדרשים, והשתמשו בתוויות כדי להבחין בין אזורים בגרפים או תמונות שונות.
בדוגמה זו למשל, תראו את ההבדל שקיים כאשר אנו מוסיפים הנחיות פשוטות על גבי העיצוב
ודאו שקל לזהות אלמנטים אינטראקטיביים
ספק וסגנונות שונים עבור אלמנטים אינטראקטיביים, כגון קישורים וכפתורים, כדי שיהיה קל לזהות אותם. לדוגמה, שנו את המראה של קישורים בריחוף עם העכבר, מיקוד מקלדת והפעלת מסך מגע. ודאו כי נעשה שימוש עקבי בסגנונות ובשמות עבור אלמנטים אינטראקטיביים ברחבי האתר.
עשו שימוש בתגית Area-label על מנת לאפשר לתוכנות של בעלי מוגבלויות להבין מה עומד מאחורי כל כפתור או אייקון.
ספקו אפשרויות ניווט ברורות ועקביות
ודאו שלניווט בין דפי האתר יש שמות, סגנון ומיקום עקביים. ספקו יותר משיטה אחת לניווט באתר, כגון חיפוש באתר או מפת אתר. עזרו למשתמשים להבין היכן הם נמצאים באתר או בדף על ידי מתן רמזים למיקומם, כגון כותרות ברורות הוללות היררכיה של גדלים ופירורי לחם.
ודאו שרכיבי הטופס כוללים תוויות משויכות
ודאו שלכל השדות יש תווית תיאור (label) בצמוד לשדה. עבור שפות משמאל לימין, התוויות ממוקמות בדרך כלל משמאל או מעל השדה, למעט תיבות סימון ולחצני בחירה שבהן הן בדרך כלל מימין. הימנעו ממרווח רב מדי בין תוויות ושדות.
ספקו משוב שניתן לזהות בקלות
ספקו משוב על אינטראקציות, כגון אישור שליחת טופס, התראה למשתמש כשמשהו משתבש או הודעה למשתמש על שינויים בדף. ההוראות צריכות להיות פשוטות וקלות להבנה.
יש להציג באופן בולט משוב הדורש פעולת משתמש.
שימו לב כי בדרך כלל הטפסים שלכם יכילו בדיקת שדות אוטומטית (ולידציה) שמקורה בדפדפן של הגולש ובשפת המערכת שלו.
השתמשו בכותרות ובמרווחים כדי לקבץ תוכן קשור
עשו שימוש ברווחים בין אזור לאזור ובתוך אזורים בין אלמנטים שונים כדי להפוך את הקשר בין התוכן לברור יותר.
עשו שימוש בהיררכיה של כותרות וקיבוץ תוכן על מנת להפחית את העומס ולהקל על הסריקה וההבנה של התוכן.
צרו עיצוב רספונסיבי
כיום רוב המערכות לבניית אתרים תומכות בהתאמות לרזולוציות מרכזיות – דסקטופ, טאבלט ונייד.
בדקו כיצד נראה העיצוב שלכם בגדלים שונים, גם מוקטן וגם לאחר הגדלה. ניתן לשנות את המיקום וההצגה של אלמנטים עיקריים, כמו כותרות, ניווט או תמונות רקע כדי לנצל את השטח בצורה הטובה ביותר. ודאו שגודל הטקסט ורוחב השורות מוגדרים כראוי כדי למקסם את הקריאה של התוכן ושהמרחק בין האלמנטים הלחיצים השונים מספק.
צרו חלופות לתמונות ומדיה
קחו בחשבון שיש מערכות או סיטואציות בהן לא ניתן יהיה להפעיל את הסרטונים או המדיה שלכם, ובמקרים כאלו תצטרכו לספק הסבר מה קיים בסרטון.
חשוב לדעת שיש אתרים שמסתירים את הסרטונים בתמונה (כיסוי תמונה) ובמקרה זה תיאור התמונה יעשה את העבודה.
רוצים שנבדוק ונבצע לכם התאמה לנגישות ?
בשמחה. אנו עוברים על האתר באמצעות הכלים המתקדמים שנו, בודקים את המערכת בה נבנה האתר, כשלים שלה ומבצעים התאמות.
בנוסף, אנו מתקינים לכם תוסף מתקדם לביצוע נגישות, עורכים לכם הצהרת נגישות ומתקינים באתר ונותנים לכם הדרכה (בזום) על תפעול נכון של האתר.
מלאו את הטופס ונשמח לעמוד לרשותכם.
