הוסף תיאור עשיר לתמונות וגרפים כדי לשפר את ההבנה
תמונות עשויות להיות דרך מצוינת כדי לעניין את המבקרים שלך ועשויות לעזור לבטא רעיונות מורכבים.
תיאורי תמונה נקראים בדרך כלל "תיאורים חלופיים" ו"טקסט חלופי". תיאורי תמונה מספקים חלופה תיאורית ומבוססת-טקסט לתמונה. עבור תלמידים עם לקויות ראייה, תיאורי תמונה שמסבירים את התוכן של תמונה חיוניים עבור הלמידה שלהם. עבור כל התלמידים, תיאורי טקסט יכולים לספק הקשר עמוק יותר כדי לסייע בהבנה שלהם.
Ally בודקת אם קיימים תיאורי תמונה בכל מקום שבו יש תמונה. Ally בודקת תמונות בדף אינטרנט או בקובץ מצורף.
Ally מדרגת בעיות לפי חמורה, עיקרית ומשנית.
- חמורה. בעיות אלה הן הסיכון הגדול ביותר לנגישות ודורשות את תשומת הלב המרבית.
- עיקרית. בעיות אלה משפיעות על הנגישות, ובעוד שאינן חמורות, הן דורשות תשומת לב.
- משנית. יש לקחת בעיות אלה בחשבון עבור ציון נגישות טוב יותר.
תמונות שחסר להן טקסט חלופי הן בעיה עיקרית.
השתמש ב-Ally כדי למצוא תיאורים חסרים של תמונות
השתמש בדוח הנגישות של Ally כדי לגלות ולפתור בעיות נגישות באתר שלך. השתמש בקישור שסופק עבור הדוח והיכנס. פתח את הדוח והסתכל על רשימת הבעיות בטבלה בעיות נגישות.
הטבלה 'בעיות נגישות' מופיעה הן בכרטיסייה 'סקירה' והן בכרטיסייה 'תחום'. התחל בכרטיסייה 'תחום' כדי לראות בעיות הספציפיות לתחום.
תמונות ללא טקסט חלופי או תיאורים הן בעיה עיקרית. השתמש בכרטיסייה עיקרי בטבלה בעיות נגישות כדי להציג את הרשימה עבור בעיות עיקריות. בחר את הבעיות שבהן לתמונות אין תיאורים.
אם אתה מתחיל בכרטיסייה סקירה, בחר את הבעיה ולאחר מכן את התחום עם הבעיה.
בעיות של תיאור תמונה עשויות להתחיל עם 'תמונה', 'מסמך' או HTML ברשימה.
מתוך רשימת הבעיות של תיאורי תמונה בתחום, בחר את מחוון הניקוד לצד פריט עם הבעיה. חלון המשוב של עורך התוכן נפתח.
הצגת התמונות ללא תיאורים בתצוגה מקדימה
לוח המשוב של Ally מציג לך תצוגה מקדימה של התוכן וכן משוב מפורט ותמיכה שיסייעו לך לפתור את בעיות הנגישות שלך. השתמש בתצוגה המקדימה כדי לראות את התמונות ללא תיאורים.
התצוגה המקדימה מדגישה היכן ניתן למצוא בעיות נגישות ספציפיות במסמך. הדגשות מציגות כל מופע של סוג בעיה אחד בכל פעם. לדוגמה, אם לתמונות שלך חסרים תיאורים חלופיים, ההדגשות מציגות לך כל מקום שבעיה ספציפית זו מתרחשת.
כלי תצוגה מקדימה
השתמש בכלי התצוגה המקדימה כדי לבחון את הבעיות במסמך שלך.
- דפדף בדפי התצוגה המקדימה.
- ראה כמה פעמים מופיעה בעיה ספציפית.
- עבור בין הדגשות הבעיות.
- הסתר או הצג את ההדגשות.
- הגדל או הקטן את תוכן התצוגה המקדימה.
- אם הבעיה נמצאת במסמך מצורף, הורד את הקובץ המקורי.
פעל בהתאם לשלבים המונחים של Ally כדי להוסיף תיאורי תמונה
Ally יוצאת מנקודת הנחה שיש לך ידע בסיסי ב-HTML ובאופן השימוש ב-Content Management System (CMS). כדי לפעול בהתאם לשלבים המונחים, עליך לדעת כיצד לערוך דף אינטרנט ב-HTML או בקוד המקור ב-CMS שלך.
ביחד עם התצוגה המקדימה, Ally מספקת לך הדרכה שלב-אחר-שלב בנוגע לאופן פתרון הבעיה. Ally מארגנת משוב זה בעץ החלטות. כל מה שעליך לעשות זה לקרוא את ההוראות ולהגיב להנחיות. למד מהי הבעיה, מדוע היא חשובה וכיצד לתקן אותה בהתאם.
בחר כיצד להוסיף תיאורים כדי לפעול בהתאם לשלבים המונחים.
טקסט חלופי בתמונות
כתיבת תיאורים טובים
פעל בהתאם לשיטות עבודה מומלצות אלה כדי לכתוב תיאורי טקסט חלופיים טובים עבור התמונות שלך:
- תאר את התמונה בהתבסס על הקשר הדף. העבר את המשמעות המלאה של התמונה.
- הימנע מאמירת "תמונה של". קוראי מסך מכריזים באופן אוטומטי על תמונות כתמונות.
- היה תמציתי.
- כתוב עלילות עבור תמונות מורכבות כגון אינפוגרפיקה. הצב עלילה זו בדף מיד לאחר האינפוגרפיקה. כלול קישור עוגן בראש הדף כדי להציג את חלופת הטקסט. הצג דוגמה לאינפוגרפיקה עם חלופת טקסט.
- הימנע מתמונות טקסט. אם אינך יכול להימנע מזה, העתק את הטקסט אל התיאור החלופי.
- אמור משהו חדש. אל תחזור על תיאורים חלופיים באותו דף. אל תחזור על מה שכבר נאמר בדף.
- זהה תמונות שאינן מייצגות תוכן רלוונטי כדקורטיבי.
מהי תמונה דקורטיבית?
תמונה היא דקורטיבית כאשר אינה מוסיפה למידע בדף. לדוגמה, יצירת אמנות המשמשת להפרדת נושאים או תמונה של מישהו בטלפון בעת הדיון ביכולות תקשורת.
יש להן ערך רב מבחינת המראה המושך החזותי שלהן, אבל ייתכן שקוראי המסך לא יצטרכו לקרוא אותן.
מידע נוסף על תמונות דקורטיביות באתר האינטרנט של יוזמת הנגישות של האינטרנט
מדוע תיאורי תמונה חלופיים חשובים?
יש סיבות רבות להשתמש בתיאורים חלופיים עם התמונות שלך.
- תיאורים חלופיים או טקסט מופיעים בקווים המנחים של WCAG 2.2
- תלמידים יכולים לחפש תמונה
- לתלמידים בעלי ליקויי ראייה יש קושי בהבחנה בתמונות
- לתלמיד בעל חיבור רשת גרוע עשוי להיות קושי בהבחנה בתמונות
- קוראי מסך לא יכולים לקרוא תמונות
- תלמידים מסוימים לומדים טוב יותר דרך תיאורים מאשר דרך תמונות
- טקסט משנה את קנה המידה שלו טוב יותר מאשר רוב התמונות כאשר המסך או הדף מוגדל
דרכים להוספת תיאורי תמונה בדפי אינטרנט
יש יותר מדרך אחת להוסיף או לערוך תיאורי תמונה בדפי האינטרנט שלך.
- HTML: השלבים המונחים של Ally מדריכים אותך באופן המציאה והעריכה של תיאורי תמונה ב-HTML. באופן בסיסי, עליך למצוא את דף האינטרנט עם התמונה. ערוך את הדף. עדכן את קוד ה-HTML של התמונה כדי לכלול תכונת טקסט חלופי. שמור את הדף.
- הגדרות תמונה: רוב מערכות ה-CMS מספקות דרך לערוך טקסט חלופי בהגדרות התמונה. מצא את התמונה בדף האינטרנט או במאגר קובצי ה-CMS. השתמש בכלי ה-CMS כדי לערוך את התמונה. הוסף את תיאור התמונה בטקסט החלופי או בשדה הטקסט החלופי. שמור את התמונה.
בקר ב- w3schools כדי לקבל מידע נוסף אודות HTML ו-CSS
למה אני לא רואה "img src" ב-HTML שלי?
הדרך הנפוצה ביותר להוסיף תמונות לדף אינטרנט היא שימוש בתכונת ה-HTML ששמה img src. Img src היא תכונת HTML שמשתמשת בכתובת ה-URL של קובץ התמונה כדי למקם את התמונה בדף האינטרנט. אבל כל CMS שונה. האתר שלך עשוי להשתמש בקוד או בתכונות שונים.
לדוגמה, ב-Drupal, אתה עשוי לראות משהו כזה במקום זאת:
<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>
הוסף טקסט חלופי לתחילת התכונה. לדוגמה,
<drupal-entity alt="הוסף תיאור תמונה כאן" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>
אם אינך רואה img src ב-HTML, נסה להשתמש בכלי ה-CMS כדי לערוך את הגדרות התמונה. מצא את התמונה בדף האינטרנט או במאגר קובצי ה-CMS. השתמש בכלי ה-CMS כדי לפתוח את הגדרות התמונה. הוסף את תיאור התמונה בטקסט החלופי או בשדה הטקסט החלופי. שמור את התמונה.
אם עדיין אינך יודע כיצד להמשיך, פנה למנהל אתר האינטרנט שלך או למפתח. בקש ממנו להציג לך את אופן הוספת התמונות לדפי האינטרנט ואת אופן הוספת הטקסט החלופי.