19 בספט׳ 2009

נגישות באתרי אינטרנט



ALT ו TITLES:
יש לתת שמות משמעותיים ,במקומות המוצגות תמונות .
השימוש ב ALT הינו בתגי ה IMG ,שם דרך אגב במידה ורוצים לרשום HTML תיקני חובה לצרף ALT, אז עם זה כבר חובה ,תנו שם משמעותי.
דוגמא במידה ויש כפתור / לוגו שהוא תמונה , שימו את משמעות הטקסט ב ALT.
<img src=”” alt=”ביטוח רכב” />

במידה ונשתמש ב תמונת רקע , אז נשתמש ב TITLE באותה צורה.
<div style=”background:url(picture.png)” title=”ביטוח רכב”></div>

דרך נוספת היא ליצירת נגישות של תמונות המיוצגות ע"י STYLES ,היא ע"י טקסט מוסתר :
<div style=”background:url(picture.png)”><span style=”display:none”>ביטוח רכב</span></div>

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


עדיפות טקסט חי על תמונה :
ממספר סיבות יש עדיפות לטקסט חי מתמונה, הראשונה בהם שלאנשים קשיי ראיה, יש פתרונות שמבצעים הקראה בשבילהם. וחלק טכני של תמונה יהיה כלא קיים בשבילהם.
הסיבה השניה שלא פחות חשובה מביאה אותנו לסעיף הבא
בקביעת גודל פונט השתמשו בערך יחסי ולא אבסולוטי
ב CSS ישנם שני סוגי ערכים לגודל פונטים, ערכים אבסולוטים לדוגמת PX ו PT וערכים יחסיים.
הבעיה עם ערכים אלה שברגע שאנו משתמשים בהם ורוצים להגדיל את גודל הפונט דרך הגדרות הדפדפן איננו יכולים.
לכם במקום להשתמש בהגדרות אלו מומלץ לעבוד עם ערכים כמו EM או % שהינם ערכים יחסיים.


לדוגמא בתוך ה CSS:
font-size:13px;
שווה לערך
font-size:1.1em;
או
font-size:110%;
שני האפשריות האחרונות הינן האפשריות היותר טובות. מהסיבה ובמידה ו נשנה בדפדפן את גודל הטקסט ל LARGER / SMALER , הפונטים יגדלו או יקטנו בהתאם ,בשונה מעבודה עם מידת PX.

כותרות
חובה לתת כותרת אחת לפחות בעמודי תוכן מסוג 1H ,עם שם משמעותי המתאר במה העמוד הספציפי מתעסק. (כותרת אחת בלבד מסוג 1H לכל עמוד)
כותרות משנה נוספות חייבות להיות בעירכיה ברורה. כלומר 2H מתחת ל 1H ,ו 3H מתחת ל 2H, וגם מבחינת בניית ה HTML.
דוגמא לשימוש נכון בכותרות:
<h1>Animals</h1>
    
     <div class="dogs">
         <h2>Dogs</h2>
         <div class="dogs-type">
            <h3>pikenez</h3>
            <span>pikenez are small type of dogs</span>
         </div>
         <div class="dogs-type">
            <h3>boxer</h3>
            <span>boxer are big type of dogs</span>
         </div>       
     </div>
    
     <div class="cats">
         <h2>Cats</h2>
         <div class="cats-type">
            <h3>himlayas</h3>
            <span>himlayas have long hair</span>
         </div>
         <div class="cats-type">
            <h3>street cat</h3>
            <span>street cat have shprt hair</span>
       </div>       
     </div>
שימוש ב TITLE לעמוד
חובה לתת TITLE רלונטי לתוכן העמוד, ניתן להשתמש באותו טקסט שניתן בכותרת ה 1H.
תפריטים ו BREADCRUMBS

שימוש ברשימות (UL LI) ולא ברשימת DIV ובטוח שלא בטבלאות!!
דוגמא לצורות כתיבה לא נגישות!! :
<table  class="menu">
   <tr>
     <td>תפריט אחד</td>
     <td>תפריט שני</td>
     <td>תפריט שלישי</td>
   </tr>
</table>
עוד צורה לא נגישה :
 
<div class="menu">
  <div class="item">תפריט אחד</div>
  <div class="item">תפריט שני</div>
  <div class="item">תפריט שלישי</div> 
</div>
 
דוגמא לצורת כתיבה נכונה:
 
<ul class="menu">
  <li>תפריט אחד</li>
  <li>תפריט שני</li>
  <li>תפריט שלישי</li>
</ul>
* כמובן שעל מנת שזה יראה אותו דבר נצטרך להכיל CSS.
מעבר ב TAB הגיוני לפי סדר העמוד

יש לוודא מעבר הגיוני דרך כפתור ה TAB.

במידה וישנה בעיה יש לתקן אותה ע"י שימוש ב TABINDEX.

<input type="text"  tabindex="1” />

* מקנה את האפשרות לעבודה עם מקלדת בלבד



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

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

  • קיבוץ פקדים ע"י שימוש ב שימוש ב-fieldset וב-legend , הכותרת של הפקדים תיהיה ב LEGEND, וכל השאר בתוך איזור ה FIELDSET.

<fieldset>
   <legend>Personal:</legend>
          <span>Name:</span>
          <input type="text" size="30" id="name" /><br />
         
          <span>Email:</span>
          <input type="text" size="30" id="email"/><br />
         
          <span>Date of birth:</span>
          <input type="text" size="10" id="birthdate" />
</fieldset>


  •   שימוש בתגיות LABEL עם FOR על מנת ליצור קשר בין הפקד לטקסט המתאר אותו, ועוד היתרון שמידה ונלחץ על ה LABEL אז השדה הרלונטי יבחר.

עכשיו הדוגמא הקודמת בצורה הנכונה עם LABEL :
<fieldset>
   <legend>Personal:</legend>
          <label for="name">Name:</label>
          <input type="text" size="30" id="name" /><br />
         
          <label for="email">Email:</label>
          <input type="text" size="30" id="email"/><br />
         
          <label for="birthdate">Date of birth:</label>
          <input type="text" size="10" id="birthdate" />
</fieldset>
במידה ונרצה להוריד את ה BORDERS שנוצרים מה FIELDSET ניתן לשים עיצוב כללי לדוגמא :
fieldset
   {
border:none;
   }
 
 


הימנעות מכתיבת CSS INLNIE



יש להקפיד על הפרדת STYLE מה HTML לקבצי CSS חיצוניים.