חלופות לטקסט של תמונות

שימוש במאפיין Alt כדי לספק חלופות לטקסט בתמונות

Alice Boxhall

Dave Gash

Meggin Kearney

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

<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">

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

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

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

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

<img src="magnifying-glass.jpg" alt="">

לסיכום, לכל התמונות צריך להיות מאפיין alt, אבל לא לכולן צריך להיות טקסט. תמונות חשובות צריכות לכלול טקסט חלופי שמתאר בתמציתיות מהי התמונה, ואילו תמונות דקורטיביות צריכות לכלול מאפייני Alt ריקים – כלומר alt="".