תמונות

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

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

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

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

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

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

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

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

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

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

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

alt ריק או null

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

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

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

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

תיאורים חלופיים פשוטים באמצעות <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 מותאם אישית.

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

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

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

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

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

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

כמה טקסטים חלופיים מומלצים כוללות:

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

בדיקת ההבנה

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