נגישות באתר ראשון לנוער: איך בונים דף שכולם יכולים להשתמש בו
אתר טוב מאפשר לאנשים שונים לקרוא, לנווט ולבצע פעולות. כבר בפרויקט הראשון אפשר לקבל החלטות קטנות שהופכות את הדף לברור ונוח יותר לכולם.
מה בעצם הופך אתר לנגיש?
דמיינו שבניתם אתר לחידון. התשובות נראות נהדר, אבל אי אפשר לבחור אותן בלי עכבר. עבור חלק מהמשתמשים זה אומר שהחידון פשוט לא עובד. נגישות מתחילה בשאלה פשוטה: האם אפשר להבין את המידע ולהשתמש באתר בדרכים שונות?
לא צריך לחכות לפרויקט גדול. בחירת רכיבי HTML מתאימים, שמות ברורים ובדיקה קצרה במקלדת משפרות גם את האתר הראשון שבונים בקורס או בבית.
אפשר להגיע לכל פעולה במקלדת
עוברים עם Tab בין קישורים, כפתורים ושדות. המשתמש צריך לראות היכן המיקוד נמצא ולהפעיל את הפעולה בלי עכבר.
כותרות מספרות את הסיפור
כותרת ראשית אחת וכותרות משנה לפי סדר עוזרות להבין את מבנה הדף גם כשסורקים אותו במהירות.
לתמונה חשובה יש חלופה כתובה
טקסט alt קצר מתאר מידע שהתמונה מוסיפה. אם התמונה דקורטיבית בלבד, משתמשים ב-alt ריק.
לכל שדה יש שם ברור
תווית מסבירה מה מקלידים בשדה. הוראות ושגיאות צריכות להישאר מובנות גם בלי להסתמך רק על צבע.
מתחילים ב-HTML הנכון
אם משהו מפעיל פעולה, בוחרים בכפתור אמיתי. אם הוא מוביל לדף אחר, בוחרים בקישור. כך הדפדפן יודע איך להפעיל אותו במקלדת, ומשתמשים בטכנולוגיות מסייעות מקבלים תיאור מתאים. טקסט שנראה כמו כפתור אבל בנוי כרכיב רגיל לא מקבל את ההתנהגות הזו מעצמו.
גם בטופס, טקסט ליד השדה אינו תמיד מספיק. מחברים לשדה תווית מפורשת, ואז ברור מה צריך להקליד. מציין מקום שנעלם בזמן ההקלדה אינו תחליף טוב לתווית.
<label for="player-name">שם השחקן</label>
<input id="player-name" name="player-name" />
<button type="button">התחילו משחק</button>ניסוי של דקה
מה עושים עם תמונות וצבעים?
אם תמונה מציגה מידע חשוב, כתבו בתכונת alt את המידע שהקורא צריך להבין. לדוגמה, בתרשים ניקוד אפשר לתאר מי מוביל, ולא לכתוב רק ״תרשים״. לתמונה שמקשטת בלבד אפשר לתת alt ריק כדי שלא תפריע לקריאה.
צבע יכול לעזור, אבל אינו צריך להיות הסימן היחיד. הודעה כמו ״השדה המסומן באדום שגוי״ פחות ברורה מהודעה שאומרת במפורש איזה שדה דורש תיקון. כדאי גם לבדוק שהטקסט קריא על הרקע שבחרתם.
בדיקה לפני שמשתפים את האתר
- עברו על הדף עם Tab בלבד: האם מגיעים לכל פעולה בסדר הגיוני?
- בדקו שרואים בבירור איזה כפתור או שדה נבחר כרגע.
- קראו רק את הכותרות: האם אפשר להבין מה יש בכל חלק?
- כבו את התמונות בדמיון: האם מידע חשוב עדיין מובן מהטקסט?
- שלחו טופס ריק: האם הודעת השגיאה מסבירה מה צריך לתקן?
פרויקט קטן להתחלה
בנו חידון עם שאלה אחת, שתי תשובות והודעת תוצאה. השתמשו בכפתורים אמיתיים, כותרת ברורה וטקסט שמסביר איזו תשובה נבחרה. אחר כך נסו להשלים אותו בלי עכבר. כל תיקון שתגלו הוא חלק מהפיתוח.