פשוט להנגיש

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

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

הנה דוגמא: תגית Tab Index הוצגה בגרסת HTML 4.01 – גרסה זו של HTML הגיחה לאוויר העולם כבר בשנת 1999. בגרסתה המוקדמת התווית שימשה בעיקר לניווט מקלדת בטפסים – כל שדה בטופס קיבל ערך Tab Index נומרי, השדה הראשון קיבל הערך tabindex="1" השדה השני את הערך tabindex="2" וכל הלאה, בעוד כפתור השליחה (השדה האחרון בטופס) קיבל את הערך הנומרי הגבוה ביותר. על ידי לחיצות על מקש Tab במקלדת ניתן היה לעבור בין השדות בטופס לפי הסדר שנקבע. לחיצה על מקשי Shift + Tab אפשרה לנווט בטופס בסדר הפוך, כלומר מהסוף להתחלה.

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

הנגשת תוכן דינאמי עשיר

התקן שנקבע על ידי W3C להנגשת אתרים בעלי תוכן דינאמי ועשיר (למשל אתרים העושים שימוש ב-Ajax) נקרא WAI-ARIA, והוא מאפשר הצמדת "תפקיד" (Role) לכל אלמנט שנרצה להנגיש לטובת ציבור בעלי המוגבלויות, אבל גם כדי להפוך את ממשק האתר לשימושי ונוח יותר עבור כלל הגולשים.

תגית Role  מאפשרת לנו להצמיד תפקיד ייעודי לכל אלמנט HTML בעמוד, כך, למשל, במקרה שבו יש לנו שתי כותרות באתר, אחת משמשת כתמונה או לוגו והשנייה ככותרת טקסטואלית:

<header role="banner">

הנגשת התוכן

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

פרקטיקה מומלצת נוספת היא שימוש ברשימות רגילות וברשימות תיאוריות (Descriptive). רשימות רגילות מוגדרות באמצעות תגית UL עבור רשימה הכוללת בולטים (Unordered List) או רשימות ממוספרות באמצעות תגית OL או Ordered List כאשר כל פריט ברשימה מושם בתגית משנה LI או List Item. עבור רשימות תיאוריות נשתמש בתגית DL שמשמעה Descriptive List שתגיות המשנה שלה כוללות את DT או Define Term ואת תגית DD שמשמעה Describe Term. וכך, רשימה הכוללת תיאורים תיראה למשל כך:

<dl>

<dt>סוס</dt>

<dd>בעל חיים מבוית, תת-מין של הסוס הרמכי ממשפחת הסוסיים</dd>

<dt>שחף</dt>

<dd>עוף ימי מתלהק, בעל כנפיים ארוכות וקרומי שחייה</dd>

</dl>

הדוגמאות של WAI-ARIA באתר W3C כוללות עוד אינספור דרכים בהן ניתן להנגיש את התכנים והניווט באתר, חלק לא מבוטל מהן ידועות לכל מעצב Ui/UX בעל רקע וניסיון בתחום. כך, למשל, אחת ההנחיות קובעת כי באתרים גדולים השימוש בתפריטי ניווט נגללים (dropdown menus) היא הדרך המומלצת לחשיפת תכנים שנמצאים בעומק האתר כבר מתפריט הניווט הראשי, טכניקה שמרבית האתרים הגדולים משתמשים בה בצורה כזו או אחרת כבר שנים.

כמו כן, ההנחיות קובעות גם כללים לעיצוב פונטים באתר, גודלם והיכולת של הגולש להקטין או להגדיל את הפונט בעמוד. עבור גולשים כבדי ראיה המשתמשים בקורא מסך (תוכנה המנסה לתרגם את הטקסט בעמוד האינטרנט לפלט קולי או כתב ברייל) קיימות תגיות ARIA ייעודיות דוגמת aria-haspopup="true" שמעבירה לקורא המסך מידע אודות תת תפריט בתפריט הניווט למשל והיכולת להגדיל או להקטין פונטים קיימות בחלק ממערכות ניהול התוכן, דוגמת Joomla, כבר בעת התקנת ברירת המחדל.

 

סיכום

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

לקראת סיום נזכיר רק במעט גם את schema.org –מיזם משותף לגוגל, מיקרוסופט, יאהו ויאנדקס שקבע תקנים לתיוג תכנים באתרי אינטרנט, תקנים שהם חלק מ-HTML5. בקרו הקישור הזה כדי לבדוק את הסכמות בהן ניתן להשתמש בעת בניית אתר מונגש, ואנו סבורים ששימוש מושכל בסכמות אלו עשוי לתרום גם לקידום האורגני של האתר.

לפגישת ייעוץ חינם בנושא הנגשת אתר קיים או חדש, אנא בקרו בעמוד זה.