נגישות אתרים: מבנה אתר נגיש בעזרת HTML5

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

במאמר זה נדבר על שילוב של תגי HTML או ליתר דיוק תגי HTML5 כדי לשפר את המבנה של האתר שלנו, להפוך אותו לקריא יותר ונגיש יותר!

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

נושאים במאמר:

• איזור ראש הדף ותג Header
• תפריטים באתר ותג Nav
• גוף התוכן העיקרי בדף ותג Main
• תפריט צד ותג Aside
• החלק התחתון באתר ותג Footer

איזור ראש הדף ותג Header

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

ראש הדף / מסמך לדוגמה

ראש מסמך סטנדרטי עשוי להראות ככה:

<div class="top-bar">
	<div class="site-name">
		<a href="<?php bloginfo('wpurl'); ?>"><img src="logo.png" alt="שם חברה" /></a>
	</div>
	<div class="social">
		מידע נוסף
	</div>
</div>

ראש מסמך עם תג Header

ראש מסמך סטנדרטי עשוי להראות ככה:

<header class="top-bar">
	<div class="site-name">
		<a href="<?php bloginfo('wpurl'); ?>"><img src="logo.png" alt="שם חברה" /></a>
	</div>
	<div class="social">
		מידע נוסף
	</div>
</header>

תפריטים באתר ותג Nav

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

מבנה לדוגמה של תפריט ניווט

תפריט סטנדרטי באתרי אינטרנט נראה בערך כך:

<div id="menu">
	<ul>
		<li>דף הבית</li>
		<li>אודות</li>
		<li>תחומי פעילות</li>
		<li>תנאי שימוש</li>
		<li>יצירת קשר</li>
	</ul>
</div>

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

תפריט עם תג Nav

<nav id="menu" role="navigation" aria-label="תפריט עליון">
	<ul>
		<li>דף הבית</li>
		<li>אודות</li>
		<li>תחומי פעילות</li>
		<li>תנאי שימוש</li>
		<li>יצירת קשר</li>
	</ul>
</nav>

גוף התוכן העיקרי בדף ותג Main

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

מבנה לדוגמה של חלק התוכן בדף

גוף התוכן המרכזי נראה לרוב כה:

<div class="page-box fullbCC">
	<h1 class="page-title">כותרת הדף</h1>
	<div class="content">
		// התוכן המרכזי של הדף כאן
	</div>
</div>

גוף התוכן המרכזי עם תג Main

<main class="page-box fullbCC" role="main">
	<h1 class="page-title">כותרת הדף</h1>
	<div class="content">
		// התוכן המרכזי של הדף כאן
	</div>
</main>

תפריט צד והתג Aside

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

מבנה לדוגמה של תפריט צד

גוף התוכן המרכזי נראה לרוב כה:

<div class="sidebar">
	<div class="widget-1">
		וידגט לדוגמה
	</div>
	<div class="widget-2">
		וידגט לדוגמה
	</div>
</div>

גוף התוכן המרכזי עם תג Aside

<aside class="sidebar">
	<div class="widget-1">
		וידגט לדוגמה
	</div>
	<div class="widget-2">
		וידגט לדוגמה
	</div>
</aside>

תגים נוספים?

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

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