נגישות אתרי אינטרנט? הסבר פשוט למנהלי אתרים

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

עד מתי יש לנו להנגיש את האתרים שלנו?

אז ככה…

  • אתר קיים: יש לכם עד ה25/10/2016
  • אתר חדש: נגיש מרגע השקתו לשימוש הציבור!
  • אהבתם? שתפו!

אוקיי, הלחצת!

מה זה אומר בתכלס? מה אני צריך לשנות

צלם

תג אלט לכל התמונות באתר!

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

					<!-- תמונה ללא תג אלט -->
					<img src="car.jpg" alt="" />
					
					<!-- תמונה עם תג אלט -->
					<img src="car.jpg" alt="מכונית" /> 
				
תמונה של טופס

תג לייבל סביב שדות בטפסים

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

				<!-- שדה קלט עם לייבל עוטף -->
				<input type="text" name="phone" id="" />
				
				<!-- שדה קלט עם לייבל עוטף -->
				<label for="phone">טלפון: <input type="phone" id="text" /></label>
				
טבלאות HTML

טבלאות במבנה תקני ונכון

טבלאות הן חלק חשוב מאוד בהנגשת אתר האינטרנט שלכם. מבנה לא תקני של טבלאות עשוי להקשות מאוד על אנשים בעלי לקות ראייה! יש להשתמש במבנה אשר מגדיר TH (כותרת עמודה) בצורה תקנית.

					<!-- טבלה ללא תאי TH -->
					<table>
						<tr>
							<td>דויד</td>
							<td>03-000-0000</td>
						</tr>
						<tr>
							<td>אלון</td>
							<td>04-000-0000</td>
						</tr>
					</table>
					
					
					<!-- טבלה עם תגי TH -->
					<table>
						<tr>
							<th>שם</th>
							<th>טלפון</th>
						</tr>
						<tr>
							<td>דויד</td>
							<td>03-000-0000</td>
						</tr>
						<tr>
							<td>אלון</td>
							<td>04-000-0000</td>
						</tr>
					</table>
				
אייקון HTML5

מבנה אתר עם תגי HTML5

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

				<!DOCTYPE HTML>
				<html>
				<head>
					<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
					<title>Your Website</title>
				</head>

				<body>

					<header>
						<nav>תפריט כאן</nav>
					</header>
					
					<section>
						<article>
							תוכן הדף כאן
						</article>
					</section>

					<aside>
						תפריט צד כאן
					</aside>

					<footer>
						תחתית הדף / האתר כאן
					</footer>

				</body>
				</html>
				
אייקון HTML5

כפתורים שהם לא תמונה!

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

מאגר כפתורי CSS מוכנים

הדגמה של ניגודיות צבעים

ניגודיות צבעים

היחס בין צבע הרקע לצבע הטקסט הוא קריטי עבור גולשים רבים אשר לא רואים 6/6. מצד שני יש לשקול את עיצוב האתר. חוק הנגישות החדש מחייב ניגודיות צבעים ברמה גבוהה של 1:4.5. איך בודקים את זה? כלים והסברים בהמשך.

סרטוני וידאו

סרטוני וידאו נגישים

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

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

נגן מדיה

סאונד? לא בכח!

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

נגישות באינטרנט – הלכה למעשה

הרצאה מעניינת ואינפורמטיבית של אילנה בניש

תוכנת קורא מסך

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

הגיג מוחי: האם המילים רגישות ונגישות דומות בכוונה תחילה?

הרצאות נוספות בנושא נגישות

אני רוצה להנגיש את האתר שלי – איך מתחילים?

להלן אוסף פעולות אשר יעודכן ככל שנלמד על הנושא (אז שמרו במועדפים) 😉

מדריך נגישות לבוני אתרים:

מה שכחנו? השתמשו בטופס התגובות לספר לנו וננסה לעזור…

מדובר על שינוי בהתהוות

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

  • אהבתם? שתפו!