טכניקות

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

 

רמזים ויזואלים לדוגמא:

• רמזים טיפוגרפיים. באמצעות גליונות סגנון, תוכלו להקצות לסוגי טקסט שונים פונטים שונים וגדלים שונים. זכרו שגליונות הסגנון ניתנים לשינוי על ידי המשתמש, לכן הקפידו על סימון הטקסט גם מבחינה מבנית.
• סמנו כותרות ב-HTML ב- h1, h2, h3 וכו'.
• סמנו טקסט מודגש בעזרת STRONG או EM.
• סמנו כל קישור בקו תחתון. לעתים קרובות רואים קישורים המסומנים רק בעזרת צבע, ולא ניתן לדעת שזהו קישור עד שלא עוברים עליו בעזרת הסמן.
• סידור ומבנה.

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

 

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

<p>
Welcome to
<img src="imgs/logo.gif" alt="[AskUsAnything.com (tm)]" width="300" height="37" align="middle">
</p>
<p>
Use the buttons below to navigate.
</p>
<p>
<img src="imgs/img1off.gif" alt="[AskUs! Here]" width="126" height="31" border="0">
<img src="imgs/img2off.gif" alt="[What's Everyone AskingUs?]" width="126" height="31" border="0">
<img src="imgs/img3off.gif" alt="[Who Are The AskUs People?]" width="126" height="31" border="0">
<img src="imgs/img4off.gif" alt="[Let Us Know How We're Doing]" width="126" height="31" border="0">
<img src="imgs/img5off.gif" alt="[Home]" width="126" height="31" border="0">
</p>

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

 

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

 

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

 

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

 

 

אם הייתם מעבירים את הצבעים לגווני אפור,

 

 

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

 

פרוטנופיה:

 

 

דאוטרנופיה:

 

 

טריטנופיה:

 

 

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

 

כעת, כדי לקבל קונטרסט יותר טוב, נשנה את הבהירות ואת הרוויה (Saturation) של הצבעים. נקבל:

 

רגיל:

 

 

פרוטנופיה:

 

 

דאוטרנופיה:

 

 

טריטנופיה:

 

 

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