המדריך לעיצוב אתרים נגיש

שימוש בהיררכיית כותרות תקינה

היררכיית הכותרות הינה חלק מרכזי וחשוב לאנשים המסתייעים באמצעות טכנולוגיות מסייעות.  המשתמשים הללו מדלגים לרוב בין הכותרות כדי להבין מהו המידע החשוב בעמוד וכיצד הוא מופיע במסגרת האתר. בעת שלב העיצוב יש להוסיף כותרת מרכזית אחת, גדולה וברורה שתתויג ככותרת לאחר כותרת זו, יש להשתמש בכותרות נוספות בסדר עקבי והיררכי כגון כותרות H2, H3  וכו".

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

שימוש בהיררכיה תוכן תקינה

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

אופן הצגת הטקסט במסגרת האתר

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

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

ארגון התקינה הבינלאומיWCAG  פרסם המלצה שאומרת שכדאי להשתמש בכל שורה בפחות מ-80 תווים. ההמלצה באה להקל על אופן התפיסה והקריאה של המידע למשתמשים שונים בכל הפלטפורמות האפשריות.

הצגת תמונה המכילה טקסט

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

בעת עיצוב של אתר אינטרנט, יש תמיד לחשוב על אפשרות כזו שהתוכן עצמו לא יהיה על תמונה או על רקע מסוים אלא העדיפות היא שהרקע יהיה לבן ובהיר ככל שניתן ואילו הצבע של הטקסט יהיה כהה. במידה ובכל מקרה החלטתם להוסיף תוכן על גבי תמונה, יש ליישם שני נושאים מרכזיים:

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

עיצוב ריספונסיבי מסודר

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

במסגרת גרסת המובייל תמיד יש שינויים ויזואליים של רכיבים מסוימים, לדוגמה:

1. רכיב התפריט לרוב משתנה מתפריט שורה לתפריט המבורגר (המכיל שלושה קווים אנכיים).
2. חלק מהתוכן הקיים בגרסת הדסקטופ נעלם לגמרי.
3. התמונות דורסות את המידע או להיפך.
4. הכפתורים עלולים להיחתך.
5. הנראות של הפוטר (החלק התחתון של האתר) משתנה ולעיתים אף מתעוותת.

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

לסיכום המדריך לעיצוב אתרים נגיש

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

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