טכניקה 11: טפסים

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

 

11.1 גישת מקלדת לטפסים 

• 9.4 קבעו סדר טאבים הגיוני של קישורים, טפסים ואובייקטים. [עדיפות 3]
• 9.5 קבעו קיצורי מקלדת לקישורים חשובים (כולל קישורים במפות-תמונת בצד הלקוח) ולשליטה בטפסים. [עדיפות 3]

בדוגמה הבאה אנו מסמנים סדר טאבים בין האלמנטים בעזרת "tabindex":

 

<FORM action="submit" method="post">
   <P>
   <INPUT tabindex="2" type="text" name="field1">
   <INPUT tabindex="1" type="text" name="field2">
   <INPUT tabindex="3" type="submit" name="submit">
   </FORM>

 

בדוגמה הבאה משתמשים ב-"U" כמקש הגישה (דרך "accesskey"). כתיבת "U" נותנת פוקוס על התוית,שבתורה נותנת פוקוס על השליטה בקלט, כך שהמשתמש יכול לקלוט טקסט.

 

<FORM action="submit" method="post">
   <P>
         <LABEL for="user" accesskey="U">name</LABEL>
         <INPUT type="text" id="user">
   </FORM>
 

 

11.2 חלוקת השליטה בטפסים לקבוצות

• 12.3 כאשר ישנם פרקי מידע גדולים, פרקו אותם לחלקים קטנים יותר במקומות המתאימים. [עדיפות 2]

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

 

<FORM action="http://example.com/adduser" method="post">
   <FIELDSET>
   <LEGEND>Personal information</LEGEND>
   <LABEL for="firstname">First name: </LABEL>
   <INPUT type="text" id="firstname" tabindex="1">
   <LABEL for="lastname">Last name: </LABEL>
   <INPUT type="text" id="lastname" tabindex="2">
   ...more personal information...
   </FIELDSET>
   <FIELDSET>
   <LEGEND>Medical History</LEGEND>
   ...medical history information...
   </FIELDSET>
</FORM>

 

 

 

11.2.1 יצירת קבוצות של אפשרויות תפריט

מפתחי תוכן צריכים לקבץ מידע היכן שמתאים וצריך. לרשימות ארוכות של בחירות תפריט בהירארכיה השתמש באלמנט OPTGROUP. סמו תוית לקבוצת אפשרויות עם התכונה label ב-OPTGROUP.

 

<FORM action="http://example.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
     </OPTGROUP>
</SELECT>
</FORM>

 

 

11.3 לסמן בתויות את השליטה בטפסים

• 12.4 קשרו בצורה ישירה בין תויות לבין אלמנטי השליטה שלהן. [עדיפות 2]
• 10.2 כל עוד סוכני המשתמש אינם תומכים בחיבור ישיר בין תויות לבין אלמנטי שליטה בטפסים (כגון כפתורים, תיבות טקסט וכו'), הקפידו למקם את התויות כראוי בטפסים שבהם התויות אינן מצויינות במפורש. [עדיפות 2]

דוגמה לשימוש ב-LABEL עם "for" ב-HTML 4.01 נמצאת בסעיף הקודם.

 

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

 

<LABEL for="firstname">First name:
     <INPUT type="text" id="firstname" tabindex="1">
   </LABEL

 

 

 

11.4 כפתורים גרפים

• 1.1 לספק מקבילת טקסט לכל אלמנט שאינו טקסט (כלומר ע"י "alt" או "longdesc" או בתוכן האלמנט). האלמנטים כוללים: תמונות, הצגות גרפיות של טקסט (כולל סמלים), מפות-תמונות, אנימציה (כלומר קבצי GIF מונפשים) יישומונים ואלמנטים תכנותיים, אומנות ascii, מסגרות, סקריפטים, תמונות המשמשות כסימון לרשימה (תבליטים), אלמנטים להפרדה (כגון קוים מפרידים), כפתורים גרפיים, צלילים (כאלה שהמשתמש יוצר וגם כאלה שאינם דורשים אינטראקציה), קבצי אודיו, פסי קול של סרטי וידאו, ווידאו. [עדיפות 1]

שימוש בתמונות לעצב כפתורים מאפשר למפתחים ליצור את האובייקטים בצורה יחודית וקלה להבנה. שימוש בתמונה לכפתור (לדוגמה עם האלמנט INPUT או BUTTON ) לא בהכרח תהיה בלתי נגישה - בהנחה שטקסט מקביל מסופק לתמונה.

 

עם זאת, אלמנט שליטה של "כפתור טעינה" (submit) שנוצר עם INPUT,  ה- "type="image יוצר type של תמונת מפה  צד-שרת, כאשר שלוחצים של הכפתור עם עכבר, הקואורדינטות  X ו- Y של העכבר נשלחים לשרת כחלק של מסירת  המאפיין.

 

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

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

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

 

11.5 טכניקות לשליטה ממוקדת

• 10.4 כל עוד סוכני המשתמש אינם יודעים להתמודד עם אלמנטי שליטה ריקים, עליכם להכניס תוי ברירת מחדל ריקים לתיבות עריכה ואיזורי טקסט. [עדיפות 3]

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

 

<FORM action="http://example.com/prog/text-read" method="post">
     <P>
     <TEXTAREA name=yourname rows="20" cols="80">
     Please enter your name here.
     </TEXTAREA>
     <INPUT type="submit" value="Send"><INPUT type="reset">
     </P>
</FORM> 

 

תן טקסט מקביל לתמונות המשתמשות ככפתורי טעינה ("submit"):

 

<FORM action="http://example.com/prog/text-read" method="post">
<P>
<INPUT type="image" name=submit src="button.gif" alt="Submit">
</FORM>

 

ראה הסעיף על גישה דרך מקלדת מאחר ופרק זה מיישם את אמצעי השליטה.

 

11.6 התאמה לאחור עבור טפסים

במספר דפדפני HTML 3.2:

• האלמנט BUTTON לא מופיע.
• INPUT עם "type="button יופיע כשדה קלט לטקסט.

 

 מקורות

טפסים, טכניקות HTML, הנחיות W3C