שימוש במאפיין alt כדי לספק טקסט חלופי לתמונות
תמונות הן רכיב חשוב ברוב דפי האינטרנט, וכמובן נקודת חולשה מסוימת למשתמשים עם ראייה ירודה. כדי לקבוע איזה טקסט חלופי צריך להופיע לצד התמונה, אנחנו צריכים להביא בחשבון את התפקיד שהיא ממלאת בדף. כדאי להציץ בתמונה הזו.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
מחקר מראה ש-9 מתוך 10 חתולים שופטים בשקט את הבעלים שלהם בזמן שהם ישנים
בדף מופיעה תמונה של חתול, שממחישה כתבה על הנטייה הידועה של חתולים לשפוט. קורא מסך יקריא את התמונה הזו בשם הרשמי שלה, "/160204193356-01-cat-500.jpg". זה נכון, אבל לא מועיל בכלל.
אפשר להשתמש במאפיין alt כדי לספק טקסט חלופי שימושי לתמונה הזו – לדוגמה, 'חתול שמשקיף מאיים אל הרחוק'.
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
לאחר מכן, קורא המסך יוכל להקריא תיאור תמציתי של התמונה (שמוצג בסרגל VoiceOver השחור) והמשתמש יוכל לבחור אם להמשיך למאמר.
כמה הערות לגבי alt:
altמאפשר לציין מחרוזת פשוטה שתשמש בכל פעם שהתמונה לא זמינה, למשל אם התמונה לא נטענת, אם בוט לסריקת אינטרנט נכנס אליה או כשקורא מסך נתקל בה.altשונה מ-title, או מכל סוג של כיתוב, בכך שנעשה בו שימוש רק אם התמונה לא זמינה.
כתיבת טקסט חלופי שימושי היא קצת אמנות. כדי שאפשר יהיה להשתמש במחרוזת כטקסט חלופי, היא צריכה להעביר את אותו רעיון כמו התמונה, באותו הקשר.
נבחן תמונת לוגו מקושרת בתוך ה-Masthead של דף, כמו אלה שמוצגות למעלה. אנחנו יכולים לתאר את התמונה באופן די מדויק כ'הלוגו של Funion'.
<img class="logo" src="logo.jpg" alt="The Funion logo">
יכול להיות שתתפתתו לתת לו טקסט חלופי פשוט יותר כמו 'דף הבית' או 'הדף הראשי', אבל זה פוגע גם במשתמשים עם ליקויי ראייה וגם במשתמשים עם ראייה תקינה.
אבל נסו לדמיין משתמש עם קורא מסך שרוצה לאתר את הלוגו של הבאנר הראשי בדף. אם נותנים לו ערך alt של 'דף הבית', למעשה יוצרים חוויה מבלבלת יותר. גם משתמשים שרואים נתקלים באותה בעיה – להבין מה קורה כשמקליקים על הלוגו של האתר – כמו משתמשים עם קורא מסך.
מצד שני, לא תמיד כדאי לתאר תמונה. לדוגמה, תמונה של זכוכית מגדלת בתוך לחצן חיפוש עם הטקסט 'חיפוש'. אם הטקסט לא היה שם, הייתם בהחלט נותנים לתמונה הזו ערך alt של 'חיפוש'. אבל מכיוון שיש לנו את הטקסט הגלוי, קורא המסך יזהה את המילה 'חיפוש' ויקרא אותה בקול. לכן, ערך alt זהה בתמונה הוא מיותר.
עם זאת, אנחנו יודעים שאם לא נוסיף את הטקסט alt, סביר להניח שנשמע במקום זאת את שם קובץ התמונה, וזה לא מועיל ויכול לבלבל. במקרה כזה, אפשר פשוט להשתמש במאפיין alt ריק, וקורא המסך ידלג על התמונה לגמרי.
<img src="magnifying-glass.jpg" alt="">
לסיכום, כל התמונות צריכות לכלול את המאפיין alt, אבל לא כולן צריכות לכלול טקסט. בתמונות חשובות צריך להוסיף טקסט חלופי תיאורי שמתאר בקצרה את התמונה, ואילו בתמונות דקורטיביות צריך להוסיף מאפייני alt ריקים – כלומר, alt="".