מבנה סמנטי וכותרות
בקצרה
מבנה סמנטי הוא "השלד" שמסביר לטכנולוגיה מסייעת מה כל חלק בעמוד. הוא כולל היררכיית כותרות נכונה (H1 אחד, ואז H2, H3 לפי משמעות - לא לפי גודל), תגיות landmark (header, nav, main, footer), ושימוש נכון ברשימות וטבלאות. קורא מסך משתמש במבנה הזה כדי לנווט במהירות.
למה מבנה סמנטי חשוב?
משתמשי קורא מסך מנווטים לפי מבנה - הם קופצים בין כותרות ואזורים במקום לקרוא הכול. מבנה שגוי (למשל כותרות שנבחרו לפי גודל ולא לפי משמעות) שובר את הניווט הזה.
היררכיית כותרות (H1-H6)
- H1 אחד בכל עמוד - הכותרת הראשית.
- תתי-נושאים ב-H2, תתי-תתי ב-H3 וכן הלאה - לפי משמעות.
- אל תדלגו רמות (H2 ואז H4) ואל תבחרו כותרת לפי גודל פונט - לעיצוב יש CSS.
תגיות landmark
שימוש בתגיות HTML5 הסמנטיות יוצר "אזורים" שקורא מסך מזהה:
<header>- כותרת עליונה<nav>- ניווט<main>- התוכן המרכזי (אחד בעמוד)<footer>- כותרת תחתונה
רשימות וטבלאות
השתמשו ב-<ul>/<ol> לרשימות אמיתיות (לא ב"מקפים" ידניים), וב-<table> עם כותרות עמודה (<th>) לנתונים טבלאיים - לא לפריסה. כך המשמעות נשמרת לקורא המסך.
שאלות נפוצות
כמה H1 צריך בעמוד?
אחד, שמתאר את העמוד.
מותר לבחור כותרת לפי גודל?
לא. בוחרים לפי משמעות; הגודל נקבע ב-CSS.
למה להשתמש ב-main/nav/header?
הם יוצרים אזורים שקורא מסך מזהה ומאפשר לנווט אליהם.
מקורות
- W3C - Page Structure Tutorial (w3.org/WAI)