דיון: שיפור נגישות האתר

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

שלום,

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

כיצד נוכל אנחנו לעזור לאותם כלים לנתח ולתרגם באופן טוב יותר את האתר? הפרד ומשול. ואני אסביר:
1. הפרדה בין הקוד לעיצוב - כל הקוד ירוכז ב HTML והעיצוב ירוכז בקובץ CSS חיצוני. בצורה כזו, כאשר פרטי והגדרות העיצוב אינן חלק מהקוד עצמו, אנו מקטינים משמעותית את החלק שדורש תרגום ומפחיתים את השגיאות שעלולות להיווצר בתרגום מוטעה.

2. חלוקה היררכית נכונה של האתר - מבנה היררכי תקין לאתר, עם סרגל ניווט או תפריט ברורים לגולש, גם מקלים על הבנת מבנה האתר לכלי ההנגשה והתרגום השונים.

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

4. אי שימוש בפריימים iframe - בעבר היה נהוג להשתמש בפריימים שחלקו את דפי האתר לחלקים שונים, אך כיום השימוש ידוע כבעייתי ואינו מומלץ שכן הוא מחלק את העמוד למבנה היררכי לא ברור.

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

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

תודה,
דוד