8 טיפים לעיצוב אתר נגיש שחובה להכיר!
כשמדברים על עיצוב אתרים, נגישות היא יותר מסתם הפיכת תכונות מפתח לאמינות ונוחות.
זה גם מדידה של כמה בקלות אנשים עם מוגבלות יכולים לחקור, להשתמש ולהפיק תועלת מהאתר שלך.
עיצוב אתר עם מחשבה על נגישות – במיוחד עבור משתמשים עם מוגבלויות – לא רק ימקסם את פוטנציאל התנועה ותדמית המותג של האתר שלך, אלא גם ישפר את נאמנות המותג.
הנה שמונה טיפים שיעזרו לכם לעצב אתר נגיש:
1. השתמשו בפלטפורמה שיש בה כלים להנגשה
אלא אם כן אתה מפתח אתרים מנוסה שיכול לקודד הכל מאפס, מה שאתה יכול לעשות עם האתר שלך תלוי במגבלות של פלטפורמת האתר שלך.
לכן מומלצת מערכת ניהול תוכן (CMS) כמו וורדפרס.
וורדפרס תומכת ביותר מ-30,000 ערכות נושא והרבה יותר מ-59,000 תוספים המוסיפים פונקציונליות. חלק ניכר מהם הם בוני דפים שמקלים מאוד על מי שאינם מפתחים להפוך את רעיונות עיצוב האתרים שלהם למציאות.
עבור מפתחים מנוסים, וורדפרס כוללת גם עורך קוד מובנה עבור קובצי HTML, CSS, PHP ו-JavaScript.
2. התחל עם בודק נגישות
יוזמת הנגישות לאתרים (W3C) מכילה דפים על גבי דפים של הנחיות נגישות אתרים.
ביצוע כל שלב עשוי לקחת לך מספר שבועות, אם לא חודשים.
אם כבר יש לך אתר קיים, השתמש בודק נגישות כדי להבין היכן האתר שלך עומד כרגע. כלים אלה פועלים על ידי סריקת אתר האינטרנט שלך לאיתור בעיות נגישות ויצירת דוחות מפורטים.
חלק מהכלים המתקדמים יותר מיישמים גם מערכת ניקוד כדי לתת לך תצוגה ברורה של רמת הנגישות הנוכחית של האתר שלך. לעתים קרובות זה מגיע עם המלצות ניתנות לפעולה ורשימת רכיבי האתר הספציפיים הדורשים אופטימיזציה.
3. שימו לב לבחירות הצבע שלכם
דמוגרפיה אחת שאתה צריך לשים לב אליה בעת עיצוב האתר שלך, היא משתמשים עם לקות ראייה.
ראשית, ודא שלעיצוב שלך יש ניגודיות מספקת בין טקסט הקדמי לצבע הרקע. אם הניגודיות נמוכה מדי, או אם צבעי הרקע והקדמה דומים מדי, ייתכן שחלק מהמשתמשים יתקשו לקרוא את המידע.
חשוב גם להימנע משימוש רק בצבע להעברת מידע. לדוגמה, בעת יצירת לחצנים או רכיבים הניתנים ללחיצה בתוך אפליקציית אינטרנט, כלול תמיד שכבות טקסט מנוגדות כדי לעזור למשתמשים להבין מה הם.
4. הוסף טקסט חלופי לתמונות
תמונות המכילות תצלומים ומידע מונחה צבע צריכות לכלול גם תגי טקסט חלופי תיאוריים (\"טקסט חלופי\"). תגים אלה מועילים לא רק לקידום אתרים, אלא גם למשתמשים המשתמשים בטכנולוגיה מסייעת כגון קוראי מסך.
תוכנת הכתבה, במיוחד, קוראת תמונה בקול באמצעות התגים הללו. עם זאת, השתמש בתיאורים פשוטים כמו:
- תמונה של כדור אדום על רקע לבן.
- תמונה של אייפון ורוד על שולחן שחור.
- תמונה של יער.
5. ליישם מבנה תוכן ברור
מבנה תוכן ברור חשוב גם לא רק למטרות נגישות, אלא לשיפור הקריאות הכוללת של תוכן אינטרנט.
השתמש באפשרויות עיצוב כמו כותרות ראשיות וכותרות משנה כדי ליצור קיבוץ מקטעים ברורים. זה מקל על כל המשתמשים לסרוק את התוכן עבור המידע שהם צריכים.
להלן מספר טיפים נוספים ליצירת היררכיית תוכן ולשיפור הנגישות של האתר שלך:
- השתמש בכותרת H1 אחת עבור כל עמוד.
- הימנע משימוש בתגי כותרת שאינם מכילים טקסט.
- תיוג תגי כותרת מבוססי טקסט ככותרות עבור קוראי מסך.
- השתמש בסדר הנכון של תגי הכותרת (השתמש ב-H2 תחילה, ב-H3 שני, וכן הלאה).
בנוסף, השתמש ברווח לבן כדי ליצור חלוקות ברורות בין חלקי תוכן שונים. זה יגרום לאתר שלך להיראות פחות עמוס וקל יותר לקריאה.
6. הפוך את הטפסים לידידותיים יותר למשתמש
טפסים הם מרכיב חיוני בחוויית המשתמש, והם צריכים להיות בראש סדר העדיפויות שלך בכל הנוגע לנגישות.
בעת יצירת טפסים, כל שדה טופס צריך להיות מסומן כראוי וברור. על המשתמשים לזהות בקלות היכן להזין מידע כגון שם פרטי, שם משפחה, כתובת דואר אלקטרוני וכו\'.
הימנע מהדברים הבאים בעת יצירת טפסים עבור האתר שלך:
- שימוש בבוררי זיהוי כפולים עבור רכיבי טופס שונים
- הצבת תוויות טופס במיקומים מעורפלים שאינם סמוכים ישירות לשדות התואמים להן
- יצירת טפסים עם כפתורי \"שלח\" שקשה למצוא
כדי לשפר עוד יותר את השימושיות של טפסים, שקול להציב מצייני מיקום עם טקסט לדוגמה. זה יעזור למשתמשים להבין למה מיועד כל שדה טופס.
7. היזהר בעת שימוש ב-CAPTCHA
CAPTCHA (קיצור של \"מבחן טיורינג ציבורי אוטומטי לחלוטין להבדיל בין מחשבים לבני אדם\") הפך להליך אימות סטנדרטי בתעשייה שיכול להגן על האתר שלך מפני תעבורה מזיקה. זה מעניק לאתרים שכבת אבטחה נוספת מפני האקרים ובוטים זדוניים המשמשים בהתקפות סייבר – מהתקפות DDoS ועד כניסות לכוח גס.
עם זאת, חידות CAPTCHA מסוימות, כמו בעיות מתמטיקה ושאלות המבוססות על מילים, אינן ידידותיות לנגישות.
אם ברצונך להשתמש ב-CAPTCHA, עליך להיות מודע לכללי ה-WCAG, שקובעים כתוצאה מכך, מותרים CAPTCHA תחת הנחיות הנגשת תוכן אינטרנט (WCAG) של W3C בתנאי שחלופות טקסט המזהות ומתארות את מטרת ה-W3C. תוכן טקסט מסופק, וצורות חלופיות של CAPTCHA המשתמשות במצבי פלט עבור סוגים שונים של תפיסה חושית מסופקות כדי להתאים ללקויות שונות.\"
יתר על כן, "חשוב להבין את המגבלה של הפטור של WCAG CAPTCHA. זה חל רק על התוכן של ה-CAPTCHA. WCAG עדיין דורש שטקסט חלופי יזהה את האובייקט הגרפי כ-CAPTCHA. ההתאמה לכל שאר הנחיות ה-WCAG נותרה קריטית גם לנגישות האינטרנט."
8. הטמעת היענות ניידת
עצבו את האתר שלכם מתוך מחשבה על התאמה לניידים כדי להפוך אותו לנגיש יותר בסמארטפונים ובטאבלטים.
ידידותיות לנייד היא לא רק חיונית לנגישות. זה גם חובה אם אתה רוצה דירוג גבוה במנועי חיפוש, במיוחד עכשיו כשיותר משתמשי אינטרנט מגיעים ממכשירים ניידים מאשר מחשבים שולחניים.
פתרון בשימוש נרחב הוא שימוש בעיצוב אתר רספונסיבי, שממקם מחדש ומתאים אוטומטית את רכיבי האתר בהתאם לתצוגה שבה נעשה שימוש.
אם אתה משתמש בוורדפרס, החדשות הטובות הן שיש טונות של ערכות נושא נתמכות זמינות המשתמשות בעיצוב מגיב לנייד ישירות מהקופסה.
גהר את הקמטים עם כלי כמו מבחן ההתאמה לניידים של גוגל עצמו . פשוט הזן את כתובת האתר או הקוד של האתר שלך כדי לזהות במהירות בעיות של ידידותיות לנייד ומידע כיצד לתקן אותן.
סיכום
עיצוב אתרים מתוך מחשבה על נגישות לא רק טוב לחוויית המשתמש; מספר עקרונות נגישות חופפים לאסטרטגיות אופטימיזציה להגברת הרווחיות של אתר אינטרנט.
בעזרת הטיפים שלמעלה, אתה לא רק משפר את החוויה של משתמשים עם מוגבלויות. אתה גם ממקם את האתר שלך להצלחה אמינה לטווח ארוך. זה win-win.