נגישות אתרים: מוצאים ומתקנים תמונות ללא תג Alt

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

תמונה שבורה

או לקות ראייה…

אז מה רואה קורה אם התמונה אינה נטענת כהלכה או שהגולש משתמש בקורא דף מכיוון שאינו/ה רואה טוב? אם לא קבעתם תג ALT הגולש יראה משהו דומה לתמונה המוצגת מצד שמאל.

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

איך זה נראה בקוד?

המדריך הזה נועד לבוני ומנהלי אתרים אז אני מקווה שהשאלה הזאת ברורה לכם. אבל… למען הסר ספק ולטובת ההסבר הנה דוגמה של תמונה בקוד HTML בלי ועם תג Alt

תמונה ללא תג אלט

 <img src="example.jpg" alt="" /> 

תמונה עם תג אלט

 <img src="example.jpg" alt="תמונה לדוגמה" /> 

איך מוצאים תמונות בלי תג אלט?

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

לצערי: אין פתרונות קלים, אבל… אם האתר שלכם אינו ענק אני ממליץ להוריד את ScreamingFrog כיוון שהוא יתן לכם מידע רב על האתר שלכם לצד מידע על תמונות בהן חסר תג Alt

פונקציה חכמה לוורדפרס

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

דרישות מקדימות:

הפונקציה ליצירת תמונה עם אלט:

function smart_thumbnail($postid, $width = NULL, $height = NULL, $xclasses = NULL){
 
	$thumb_id 	= get_post_thumbnail_id($postid);
	$thumb_url	= wp_get_attachment_url( get_post_thumbnail_id($postid));
	$thumb_alt	= get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
	$no_image	= of_get_option(THEME_PREF.'define_general_noimage');
	if(!$thumb_url) {$thumb_url = $no_image;}
	if($width && $height) {$thumb_url = aq_resize($thumb_url, $width, $height);}
	
	
	// BUILD ALT
	if(!$thumb_alt && $thumb_url) {
		$thumb_alt		=	explode('/', $thumb_url);
		$thumb_alt		=	end($thumb_alt);
		$thumb_alt		=	str_replace(array('.jpg', '.png', '.gif'), ' ', $thumb_alt);
		$thumb_alt		=	str_replace(array('-', '_'), ' ', $thumb_alt);
	}
	
	return '<img src="'.$thumb_url.'" alt="'.$thumb_alt.'" class="img-responsive '.$xclasses.'" />';
}

הדגמה והסברים:

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

פרמטרים

$postid

$width = NULL

$height = NULL

$xclasses = NULL

דוגמה בתוך הלופ של וורדפרס

<?php 
if (have_posts()) : while (have_posts()) : the_post();
		echo '<h1>'.get_the_title().'</h1>';
		echo '
		<div class="main-content">
			<div class="thumbnail">'.smart_thumbnail(get_the_ID(), 360, 240, '').'</div>
			'.apply_filters('the_content', get_the_content().'
		</div>
		';
endwhile;
endif;
?>

התבלבלתם? צריכים מידע נוסף?

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

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