» נושאי לימוד
» נושאי לימוד
יום שני 2 בדצמבר 2024
טפסים: טכניקות
דף ראשי  כיצד לעמוד בתקני הנגישות  מדריך לתקן 508  מדריך 508: טפסים  טפסים: טכניקות גרסה להדפסה

כלי עבודה טכניקות

הנחיה זו, כמו m, l ו- O אינה מקושרת ישירות לנקודת בדיקה של W3C, אולם יש כמה נקודות קשורות:

  • 12.4 - קשרו בצורה ישירה בין תויות לבין אלמנטי השליטה שלהן.
  • 10.2 - כל עוד סוכני המשתמש אינם תומכים בחיבור ישיר בין תויות לבין אלמנטי שליטה בטפסים (כגון כפתורים, תיבות טקסט וכו'), הקפידו למקם את התויות כראוי בטפסים שבהם התויות אינן מצויינות במפורש. התוית צריכה להיות בדיוק לפני אלמנט השליטה, באותה השורה (במקרה שיש יותר מאלמנט שליטה אחד ותוית אחת בשורה), או בדיוק בשורה שלפני אלמנט השליטה (במקרה שבכל שורה יש רק אלמנט שליטה אחד או תוית אחת.
  • 9.4 - קבעו סדר טאבים הגיוני של קישורים, טפסים ואובייקטים.
  • 10.4 - כל עוד סוכני המשתמש אינם יודעים להתמודד עם אלמנטי שליטה ריקים, עליכם להכניס תוי ברירת מחדל ריקים לתיבות עריכה ואיזורי טקסט. לדוגמא, ב- HTML עשו זאת עבור TEXTAREA ו-INPUT.

 

נושא - תויות ושדות בטפסים

השתמשו בתגית ה- LABLE על מנת לקשר בין התויות לבין השדות. לדוגמא:

<td>
<LABEL for="email">E-mail address: </LABEL>
</td>
<td>
<input type="text" id="email">
</td>

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

 

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

 

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

 

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

 

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

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

 

 

עיצוב לא נגיש

 

שם

דרגה

מס' סידורי

 

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

 

שם

 

דרגה

 

מס' סידורי



 

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

 

 

עיצוב נגיש

 

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

 

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

 

או:

 

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

 

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

 

שם:

דרגה:

מס' סידורי:

 

 

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

שם:

דרגה:

מס' סידורי:

 

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

 

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

אל תניחו שהמבקרים באתר רואים את אותם הפונטים ואותו הסידור שאתם רואים על המסך. בלי קשר לטכנולוגיות מסייעות, מקינטושים ו- 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 בדוגמא הבאה:

Find

<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 או את התוית בתחילת שדה הקלט, למשתמשים לא תוכל להיות התלבטות מה להכניס לשדות הטקסט.

 

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

 

 31-01-04 / 20:45  עודכן ,  28-01-04 / 23:37  נוצר ע"י יואל דורף  בתאריך 
 טפסים: מי מושפע? - הקודםהבא - טפסים: בדיקה 
תגובות הקוראים    תגובות  -  0
דרכונט
מהי מערכת הדרכונט?
אינך מחובר, להתחברות:
דוא"ל
ססמא
נושאי לימוד
חיפוש  |  לא פועל
משלנו  |  לא פועל
גולשים מקוונים: 2