תמונות

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

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

המטרה וההקשר של התמונה

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

יכול להיות שתשאלו את עצמכם:

• האם התמונה חיונית להבנת ההקשר של התכונה או הדף?
• איזה סוג מידע התמונה מנסה להעביר?
• האם התמונה פשוטה או מורכבת?
• האם התמונה מעוררת רגש או מעודדת את המשתמש לפעולה?
• או שהתמונה היא סתם "ממתק לעיניים" בלי מטרה אמיתית?

תרשים זרימה ויזואלי, כמו עץ החלטות של תמונה, יכול לעזור לכם להחליט לאיזו קטגוריה התמונה שייכת.

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

תמונות דקורטיביות

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

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

הערך alt ריק או null

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

התפקיד שהוגדר הוא presentation או none

תפקיד שמוגדר כ-presentation או none מסיר את הסמנטיקה של רכיב מהחשיפה לעץ הנגישות. בינתיים, התג aria-hidden= "true" מסיר את כל הרכיב – ואת כל רכיבי הצאצא שלו – מ-API הנגישות.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

צריך להיזהר כשמשתמשים ב-aria-hidden כי יכול להיות שהיא תסתיר רכיבים שלא רוצים להסתיר.

תמונות ב-CSS

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

תמונות אינפורמטיביות

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

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

אפשר להוסיף תיאורים חלופיים לרכיבי <img> באמצעות המאפיין alt. הדרישה הזו חלה על כל סוגי הקבצים, כולל JPG,‏ PNG או SVG.

<img src=".../Ladybug_Swarm.jpg"
  alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

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

אם קובץ ה-SVG הוא תמונה דקורטיבית, זה בסדר – הטכנולוגיה המסייעת תתעלם ממנו כמו שרציתם. אבל אם קובץ ה-SVG הוא תמונה אינפורמטיבית, צריך להוסיף את התג ARIA role="img" לרכיב, כדי שטכנולוגיית AT תזהה אותו כתמונה.

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

<svg role="img">
  <title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>

תמונות פונקציונליות

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

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

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

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

אפשר לראות מקטע הקוד שהכותרת של רכיב ה-wrapper היא 'Navigate to the homepage', והטקסט החלופי של התמונה הוא 'Lovely Ladybugs for your Lawn'. כשמאזינים לקוד הלוגו באמצעות קורא מסך, שומעים גם את המידע החזותי וגם את הפעולה שמועברת בתמונה אחת.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

תמונות מלאות פרטים

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

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

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

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

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

דרך נוספת לקבץ תיאורים חלופיים קצרים עם תיאור ארוך יותר היא באמצעות הרכיבים <figure> ו-<figcaption>. האלמנטים האלה פועלים באופן דומה ל-aria-describedby, בכך שהם מקבצים אלמנטים באופן סמנטי ויוצרים קשר חזק יותר בין התמונה לתיאור שלה.

הוספת ARIA role="group" מבטיחה תאימות לאחור עם דפדפני אינטרנט ישנים שלא תומכים בסמנטיקה של רכיב <figure>.

שיטות מומלצות לשימוש בטקסט חלופי

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

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

שיטות מומלצות נוספות לשימוש בטקסט חלופי:

• לא משתמשים במילים כמו "תמונה של" או "צילום של" בתיאור, כי קורא המסך יזהה את סוגי הקבצים האלה בשבילכם.
• כשנותנים שמות לתמונות, חשוב לשמור על עקביות ולדייק ככל האפשר. שמות התמונות הם חלופה למקרה שחסר טקסט חלופי או שהמערכת מתעלמת ממנו.
• מומלץ להימנע משימוש בתווים שאינם אלפביתיים (לדוגמה, #, ‏ 9,‏ &) ולהשתמש במקפים בין מילים במקום בקו תחתון בשמות התמונות או בטקסט החלופי.
• השתמשו בפיסוק נכון כשהדבר אפשרי. בלי תיאורי התמונות, זה יישמע כמו משפט ארוך, אינסופי וחסר פסיקים.
• כתבו טקסט חלופי כמו בן אדם ולא כמו רובוט. הוספת מילות מפתח בכמות מוגזמת לא מועילה לאף אחד – אנשים שמשתמשים בקוראי מסך יתעצבנו, ואלגוריתמים של מנועי חיפוש יטילו עליכם עונש.