Landmarks ב-HTML5: header, nav, main, footer לחוויית קוראי מסך

תגי landmark של HTML5 - <header>, <nav>, <main>, <aside>, <footer> - הם תווי הכביש של דף האינטרנט עבור עיוורים. בלעדיהם, האתר נראה לקורא מסך כמו ערימה ענקית של divים בלי משמעות.

למה זה משנה

קוראי מסך מאפשרים לעיוורים לקפוץ ישירות בין landmarks. NVDA: D לקפיצה ל-landmark הבא. VoiceOver: Rotor > Landmarks. JAWS: R לקפיצה לאזור הבא. עיוור שמגיע לדף יכול לבחור: "אני רוצה לדלג על ה-header וה-nav, להגיע ישר ל-main". בלי landmarks - הוא חייב לעבור עם Tab דרך כל פריט בכל תפריט בכל דף, חוויה מתישה ואיטית.

זוהי דרישה ב-תקני נגישות בינלאומיים רמה A, תקן 1.3.1 Info and Relationships. גם תקן 2.4.1 Bypass Blocks דורש דרך לדלג על תוכן חוזר - landmarks הם הפתרון הנפוץ ביותר. ה-landmarks הסטנדרטיים הם:

• <header> - banner, לוגו ותפריט עליון.
• <nav> - תפריט ניווט.
• <main> - תוכן ראשי. בדיוק אחד בדף.
• <aside> - complementary, סיידבר עם תוכן משלים.
• <footer> - contentinfo, תחתית הדף.
• <section> ו-<article> - חלקי תוכן.

איך לזהות

הסתכל ב-View Source של דף הבית. אם רואה <div class="header">, <div class="nav">, <div class="content"> - יש בעיה. אתה רוצה <header>, <nav>, <main>. כלי בדיקה: axe DevTools מסמן "page must have one main landmark". התוסף Landmarks ל-Chrome מציג רשימה של כל ה-landmarks בדף.

איך לתקן

1. פתח את התבנית: wp-content/themes/THEME/header.php, footer.php, index.php.
2. החלף <div>ים מבניים ב-tags semantic:

   <header>
       <a href="/">לוגו</a>
       <nav aria-label="ניווט ראשי">
           <ul>...</ul>
       </nav>
   </header>
   
   <main>
       <!-- תוכן הדף -->
   </main>
   
   <aside aria-label="סיידבר">
       <!-- תוכן משלים -->
   </aside>
   
   <footer>
       <!-- copyright, קישורים נוספים -->
   </footer>

3. וודא בדיוק main אחד בכל דף. שני <main> מבלבלים את קוראי המסך.
4. אם יש מספר <nav> בדף (תפריט ראשי, פירורי לחם, תפריט תחתון), הוסף aria-label ייחודי לכל אחד: aria-label="breadcrumbs", aria-label="footer navigation".
5. עבור תוסף page builder (Elementor, Divi, Bricks): בכל סקציה או section יש בחירת HTML Tag. בחר Header, Main, Footer, Nav, Aside במקום Div.
6. בעורך תבניות (FSE) ב-WordPress 6.0+: ב-Group block יש Inspector עם HTML Element. בחר את ה-element המתאים.
7. אל תשתמש ב-role="banner", role="main" וכדומה ב-tags של HTML5 - זוהי כפילות. <header> כבר מספק role="banner" אוטומטית.

טעויות נפוצות

• שני <main> בדף: לעיתים תבנית מציגה <main> ותוסף page builder מוסיף עוד אחד. ודא שיש רק אחד.
• שכפול <header> בתוך <article>: זה תקני HTML (header פנימי לכל article), אבל קוראי מסך מספקים שני banners. השתמש בזהירות.
• ARIA roles מיותרים: <nav role="navigation"> - מיותר, nav כבר navigation. הוסף role רק כשאתה לא יכול להשתמש ב-tag המתאים.
• שכחת <main>: יש <header> ו-<footer> אבל בין לבין רק <div class="content">. עיוור לא יוכל לקפוץ ישר ל-main.
• שימוש ב-<section> במקום <main>: לא אותו דבר. <section> הוא אזור גנרי; <main> מסמן את התוכן הראשי.

בדיקה לאחר תיקון

הפעל תוסף Landmarks ב-Chrome. אמורים להיות לפחות: banner (header), navigation (nav), main, contentinfo (footer). אם יש aside - גם complementary. הרץ axe DevTools - הקטגוריה Landmarks תהיה ירוקה. ב-NVDA, פתח דף, לחץ D - הקפיצה אמורה להיות לוגית בין סקציות. RankPlus יחזור לירוק.