הפלט של קורא המסך יהיה "שם דרגה מס' סידורי [קלט][קלט][קלט]".

עיצוב נגיש

אפשר לעצב בצורה נגישה, על ידי הסרת הטבלה לגמרי:

שם: דרגה: מס' סידרי:

או:

שם:
דרגה:
מס' סידורי:

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

שם:
דרגה:
מס' סידורי:

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

הפלט של קורא המסך יהיה: "שם [קלט] דרגה [קלט] מס' סידורי [קלט]".

דוגמאות נוספות לעיצוב לא נגיש

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

חלק מהמשתמשים עשויים לראות:

תן ציון לסרט:

1 | 2 | 3 | 4 | 5

ואחרים יראו:

תן ציון לסרט:

1  | 2  | 3  | 4  | 5

באופן כללי, כאשר משתמשי בכפתורי רדיו או בתיבות סימון, כדאי לשים אותם בדיוק משמאל או מימין לתוית, לדוגמא:

[ רווק/ה] [ נשוי/ה] [ גרוש/ה]

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

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

דוגמא לעיצוב נגיש

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

<tr>
<td valign="top" align="right">
<label for="fullname">Name:</label>
</td>
<td valign="top">
<input type=text name="name" size=40 id="fullname">
</td>
</tr>
<tr>
<td valign="top" nowrap align="right">
<label for="email">E-mail (required):</label>
</td>
<td valign="top">
<input type=text name="email" size=30 id="email">
</td>
</tr>

נושא - כפתורי עיצוב גרפיים

אל תשכחו להוסיף תכונת ALT אם אתם משתמשים בכפתורים גרפיים במקום הכפתור הרגיל  .

שימו לב לתכונת ה- ALT בדוגמא הבאה:

<img src="imgs/find.gif" alt="Find" id="Find" width="37" height="16" border="0">

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

נושא - אלמנטי שליטה בלתי תלויים בהתקן

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

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

צרו סדר טאבים הגיוני בסידור הטפסים. בדקו את הסדר ע"י מעבר בטאבים לאורך הטופס. אם סדר הטאבים אינו הגיוני, השתמשו ב- TABINDEX על מנת לקבוע את סדר הטאבים:

<input tabindex="2" type="text" name="lastname">
<input tabindex="1" type="text" name="firstname">
<input tabindex="3" type="submit" name="submit">

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

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

כמו כן, אם אתם משתמשים ב- javascript על מנת לעורר פעולה כלשהי, השתמשו באירוע מפעיל (trigerring event) שאינו תלוי בעכבר, לדוגמא, אל תשתמשו ב- OnSelect בתפריטי בחירה, אלא השתמשו בכפתור "Submit" שצמוד לתפריט. מידע נוסף בנושא זה ניתן למצוא בפרק העוסק בסקריפטים.

נושא - הודעות שגיאה

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

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

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

הערות נוספות, שימושיות בעיקר לטפסים ארוכים ומסובכים:

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

נושא - טכנולוגיות ישנות

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

שם:

או

שם:

input type="text" id="name" value="Your Name">

יתרון: אם תכניסו את ה-prompt או את התוית בתחילת שדה הקלט, למשתמשים לא תוכל להיות התלבטות מה להכניס לשדות הטקסט.

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