תמונות

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

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

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

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

כדאי לשאול את עצמך:

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

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

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

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

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

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

הערך alt ריק או שהוא ריק

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

התפקיד שהוגדר הוא 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, קורא המסך לא מזהה את קובץ התמונה. לפני שמיישמים את השיטה הזו, חשוב לוודא שהתמונה תוסתר.

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

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

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

כדי ליצור תיאורים חלופיים פשוטים עם רכיבי <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 מקודדים באופן סמנטי, מערכת AT תדלג עליהם כברירת מחדל. אם יש לכם תמונה דקורטיבית, זו לא בעיה – מערכת AT תתעלם ממנה כפי שהתכוונת. אבל אם יש לכם תמונה אינפורמטיבית, צריך להוסיף role="img" ARIA לדפוס כדי שה-AT יזהה אותה כתמונה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיטות מומלצות נוספות לעבודה עם טקסט חלופי:

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

בדיקת ההבנה

בחינת הידע שלכם ב-ARIA וב-HTML