0.7 HTML סמנטי ונגישות הרצאה

מה זה HTML סמנטי - semantic HTML

עד עכשיו למדנו תגיות כמו div ו-span שהן "גנריות" - הן לא אומרות כלום על התוכן שבתוכן. HTML סמנטי משתמש בתגיות שהשם שלהן מתאר את התפקיד של התוכן בדף.

למשל, במקום:

<div id="header">...</div>
<div id="navigation">...</div>
<div id="main-content">...</div>
<div id="footer">...</div>

נשתמש בתגיות סמנטיות:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

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

---

תגיות מבנה סמנטיות

כותרת עליונה - header

<header>
    <h1>שם האתר</h1>
    <p>תיאור קצר של האתר</p>
</header>

• header מכיל את הכותרת העליונה של הדף או של section/article.
• בדרך כלל מכיל את הלוגו, שם האתר, וניווט.
• יכול להופיע כמה פעמים בדף - גם בתוך article למשל.

ניווט - nav

<nav>
    <ul>
        <li><a href="index.html">דף הבית</a></li>
        <li><a href="about.html">אודות</a></li>
        <li><a href="contact.html">צור קשר</a></li>
    </ul>
</nav>

• nav מכיל קישורי ניווט ראשיים של האתר.
• קוראי מסך מזהים את nav ומאפשרים למשתמש לדלג ישר לניווט.
• אל תשימו כל קישור בnav - רק ניווט ראשי. לינק בודד בתוך פסקה הוא לא nav.

תוכן ראשי - main

<main>
    <h1>כותרת הדף</h1>
    <p>התוכן העיקרי של הדף נמצא כאן.</p>
</main>

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

מאמר - article

<article>
    <h2>כותרת הפוסט</h2>
    <p>תוכן הפוסט...</p>
</article>

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

חלק - section

<section>
    <h2>על הקורס</h2>
    <p>הקורס מכסה את הנושאים הבאים...</p>
</section>

<section>
    <h2>דרישות קדם</h2>
    <p>כדי להצליח בקורס צריך...</p>
</section>

• section מקבץ תוכן שקשור לנושא מסוים, עם כותרת משלו.
• בניגוד לarticle, section לא חייב להיות עצמאי.

תוכן צדדי - aside

<aside>
    <h3>קישורים קשורים</h3>
    <ul>
        <li><a href="#">מאמר קשור 1</a></li>
        <li><a href="#">מאמר קשור 2</a></li>
    </ul>
</aside>

• aside מכיל תוכן צדדי שקשור לתוכן הראשי אבל לא חיוני.
• דוגמאות: סרגל צד, מודעות, קישורים קשורים, ביוגרפיה של הכותב.

כותרת תחתונה - footer

<footer>
    <p>&copy; 2026 כל הזכויות שמורות</p>
    <nav>
        <a href="privacy.html">מדיניות פרטיות</a>
        <a href="terms.html">תנאי שימוש</a>
    </nav>
</footer>

• footer מכיל את הכותרת התחתונה של הדף.
• בדרך כלל מכיל: זכויות יוצרים, קישורים משניים, פרטי התקשרות.
• כמו header, יכול להופיע גם בתוך article.

---

ההבדל בין div, section ו-article

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

• div - מכולה גנרית בלי שום משמעות סמנטית. תשתמשו בו רק כשאין תגית סמנטית שמתאימה, בעיקר לצורכי עיצוב CSS.
• section - חלק מתוכן עם נושא מוגדר וכותרת. אם אתם מוסיפים כותרת (h2, h3...) לקבוצת תוכן - זה כנראה section.
• article - תוכן עצמאי שעומד בפני עצמו. אם אתם יכולים להעביר את התוכן לאתר אחר ועדיין יהיה מובן - זה article.

דוגמה: בלוג עם כמה פוסטים:

<main>
    <article>
        <h2>פוסט ראשון</h2>
        <p>תוכן הפוסט...</p>
    </article>
    <article>
        <h2>פוסט שני</h2>
        <p>תוכן הפוסט...</p>
    </article>
</main>

כל פוסט הוא article כי הוא עצמאי. הmain מקבץ אותם.

---

תגיות סמנטיות נוספות

תוכן מתקפל - details, summary

<details>
    <summary>לחצו כאן לפרטים נוספים</summary>
    <p>כאן נמצא התוכן המוסתר שמופיע רק כשלוחצים על הסיכום.</p>
    <p>אפשר לשים כאן כמה שרוצים תוכן.</p>
</details>

• details יוצר בלוק תוכן שניתן לפתוח ולסגור.
• summary הוא הטקסט שנראה תמיד ועליו לוחצים כדי לפתוח.
• הכל עובד בלי JavaScript - HTML טהור.

זמן - time

<p>הפגישה תתקיים ב-<time datetime="2026-03-15">15 במרץ 2026</time></p>
<p>שעת ההתחלה: <time datetime="14:30">14:30</time></p>

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

סימון - mark

<p>תוצאות חיפוש עבור "HTML": למדו <mark>HTML</mark> בקורס הפיתוח.</p>

• mark מדגיש טקסט (בדרך כלל ברקע צהוב). שימושי להצגת תוצאות חיפוש.

כתובת - address

<address>
    צרו קשר:<br>
    <a href="mailto:info@example.com">info@example.com</a><br>
    <a href="tel:+97221234567">02-1234567</a><br>
    רחוב הרצל 1, תל אביב
</address>

• address מכיל פרטי התקשרות של בעל הדף או ה-article.

---

דוגמה: לפני ואחרי

לפני - דף בנוי רק עם div-ים

<div id="wrapper">
    <div id="header">
        <div id="logo">האתר שלי</div>
        <div id="nav">
            <a href="/">בית</a>
            <a href="/about">אודות</a>
        </div>
    </div>
    <div id="content">
        <div class="post">
            <div class="post-title">כותרת הפוסט</div>
            <div class="post-body">תוכן הפוסט...</div>
        </div>
        <div class="post">
            <div class="post-title">כותרת הפוסט השני</div>
            <div class="post-body">תוכן הפוסט...</div>
        </div>
    </div>
    <div id="sidebar">
        <div class="sidebar-title">קישורים</div>
        <a href="#">קישור 1</a>
    </div>
    <div id="footer">
        <div>כל הזכויות שמורות 2026</div>
    </div>
</div>

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

אחרי - אותו דף עם HTML סמנטי

<header>
    <h1>האתר שלי</h1>
    <nav>
        <ul>
            <li><a href="/">בית</a></li>
            <li><a href="/about">אודות</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>כותרת הפוסט</h2>
        <p>תוכן הפוסט...</p>
    </article>
    <article>
        <h2>כותרת הפוסט השני</h2>
        <p>תוכן הפוסט...</p>
    </article>
</main>

<aside>
    <h3>קישורים</h3>
    <ul>
        <li><a href="#">קישור 1</a></li>
    </ul>
</aside>

<footer>
    <p>&copy; 2026 כל הזכויות שמורות</p>
</footer>

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

---

מה זה נגישות - accessibility

נגישות (accessibility, בקיצור a11y) פירושה לבנות אתרים שכל אדם יכול להשתמש בהם, כולל אנשים עם מוגבלויות.

למה זה חשוב?
- מוסרי: כ-15% מאוכלוסיית העולם חיים עם מוגבלות כלשהי. לכולם מגיע גישה שווה למידע.
- חוקי: בישראל ובמדינות רבות יש חוקים שמחייבים אתרים להיות נגישים. אתרים לא נגישים עלולים להיתבע.
- עסקי: אתר נגיש מגיע ליותר אנשים. בנוסף, נגישות משפרת SEO ואת חוויית השימוש לכולם.

סוגי מוגבלויות

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

---

תקן WCAG

WCAG (Web Content Accessibility Guidelines) הוא התקן הבינלאומי לנגישות אתרים. הוא מגדיר 3 רמות:

• רמה A - מינימום הכרחי. דברים בסיסיים כמו alt לתמונות.
• רמה AA - הרמה שרוב החוקים דורשים. כוללת ניגודיות צבעים, ניווט מקלדת, ועוד.
• רמה AAA - הרמה הגבוהה ביותר. קשה להשיג באופן מלא אבל כדאי לשאוף.

רוב האתרים בעולם מחוייבים לעמוד ברמה AA לפחות.

---

טקסט חלופי נכון לתמונות - alt text

כבר למדנו על alt, אבל בואו נעמיק:

alt טוב:

<img src="team.jpg" alt="צוות החברה עומד מחייך ליד הלוגו במשרדי תל אביב">

alt גרוע:

<img src="team.jpg" alt="תמונה">
<img src="team.jpg" alt="team.jpg">
<img src="team.jpg" alt="">

כללים לalt טוב:
- תארו מה בתמונה, לא שזו תמונה. לא צריך לכתוב "תמונה של..." כי קורא המסך כבר אומר "תמונה".
- היו ספציפיים אבל תמציתיים.
- אם התמונה דקורטיבית בלבד (קו מפריד, רקע) - שימו alt ריק alt="". זה אומר לקורא מסך לדלג.
- אם התמונה מכילה טקסט - הטקסט צריך להופיע בalt.

---

היררכיית כותרות

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

<!-- correct -->
<h1>שם האתר</h1>
    <h2>מדור ראשון</h2>
        <h3>נושא משנה</h3>
        <h3>נושא משנה נוסף</h3>
    <h2>מדור שני</h2>
        <h3>נושא משנה</h3>

<!-- wrong - skipping from h1 to h4 -->
<h1>שם האתר</h1>
    <h4>נושא כלשהו</h4>

• לא מדלגים רמות. אחרי h1 בא h2, לא h3 או h4.
• h1 מופיע פעם אחת בדף.
• קוראי מסך מאפשרים לנווט לפי כותרות, אז היררכיה נכונה קריטית.

---

ניווט מקלדת - keyboard navigation

הרבה אנשים לא יכולים להשתמש בעכבר ומנווטים באמצעות מקלדת בלבד.

מקשים חשובים:
- Tab - עובר לאלמנט הבא שניתן לקבל פוקוס (קישור, כפתור, שדה קלט).
- Shift+Tab - חוזר לאלמנט הקודם.
- Enter - מפעיל קישור או כפתור.
- Space - מפעיל checkbox או כפתור.
- חצים - נווט בתוך radio buttons, select, ועוד.

תכונת tabindex

<!-- element is focusable in tab order -->
<div tabindex="0">אלמנט שאפשר להגיע אליו עם Tab</div>

<!-- element is focusable by script only, not by tab -->
<div tabindex="-1">אלמנט שאפשר לתת לו פוקוס עם JavaScript בלבד</div>

• tabindex="0" - האלמנט נכנס לסדר הTab הרגיל.
• tabindex="-1" - אפשר לתת פוקוס עם JavaScript אבל לא דרך Tab.
• אל תשתמשו בערכים חיוביים כמו tabindex="1" - זה שובר את הסדר הטבעי ויוצר בלבול.

חשוב: ודאו שכל אלמנט שניתן ללחוץ עליו (כפתורים, קישורים, שדות) נראה אחרת כשהוא מקבל פוקוס. בדרך כלל הדפדפן מוסיף מסגרת (outline) אוטומטית - אל תסירו אותה עם CSS בלי לתת תחליף.

---

בסיס ARIA

ARIA (Accessible Rich Internet Applications) הוא אוסף תכונות שמוסיפים מידע נגישות לאלמנטים.

כלל חשוב: אם יש תגית HTML סמנטית שעושה את העבודה - תשתמשו בה במקום ARIA. ARIA הוא הפתרון האחרון.

תפקיד - role

<div role="button">לחצו כאן</div>

• role אומר לקורא מסך מה התפקיד של האלמנט.
• אבל עדיף פשוט להשתמש בbutton אמיתי:
  

  <button>לחצו כאן</button>
  

תיאור - aria-label

<button aria-label="סגירה">X</button>

• aria-label מספק תיאור טקסטואלי לאלמנט שאין לו טקסט ברור.
• כפתור עם X בלבד לא מספיק ברור - aria-label אומר לקורא מסך "סגירה".

הסתרה - aria-hidden

<span aria-hidden="true">*</span>
<span>שדה חובה</span>

• aria-hidden="true" מסתיר אלמנט מקוראי מסך. האלמנט עדיין נראה על המסך אבל קוראי מסך מתעלמים ממנו.
• שימושי לאלמנטים דקורטיביים שלא מוסיפים מידע.

תיאור מורחב - aria-describedby

<label for="pwd">סיסמה:</label>
<input type="password" id="pwd" aria-describedby="pwd-help">
<p id="pwd-help">הסיסמה חייבת להכיל לפחות 8 תווים, אות גדולה ומספר.</p>

• aria-describedby מקשר אלמנט לטקסט שמתאר אותו.
• קורא המסך יקרא את הטקסט המתאר כשהמשתמש מגיע לשדה.

---

תוויות לשדות טופס

כבר למדנו על label, אבל בואו נדגיש שוב:

<!-- correct - label with for -->
<label for="email">אימייל:</label>
<input type="email" id="email" name="email">

<!-- correct - input inside label -->
<label>
    אימייל:
    <input type="email" name="email">
</label>

<!-- wrong - no label -->
<input type="email" name="email" placeholder="אימייל">

• placeholder הוא לא תחליף ל-label. placeholder נעלם כשמתחילים להקליד, ולא כל קוראי מסך קוראים אותו.
• כל שדה חייב label. תמיד.

---

ניגודיות צבעים - color contrast

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

דרישות WCAG AA:
- טקסט רגיל: יחס ניגודיות של לפחות 4.5:1.
- טקסט גדול (מעל 18px מודגש או 24px רגיל): יחס ניגודיות של לפחות 3:1.

דוגמאות:
- טקסט שחור על רקע לבן: יחס 21:1 - מעולה.
- טקסט אפור בהיר על רקע לבן: יחס 2:1 - לא עובר.

כשנגיע ל-CSS, נוכל לבדוק ניגודיות עם כלים כמו WebAIM Contrast Checker.

---

קוראי מסך - screen readers

קורא מסך (screen reader) הוא תוכנה שקוראת בקול את תוכן המסך. אנשים עיוורים או עם ראייה מוגבלת משתמשים בו כדי לגלוש באינטרנט.

קוראי מסך נפוצים:
- NVDA (חינמי, Windows)
- JAWS (בתשלום, Windows)
- VoiceOver (מובנה ב-macOS ו-iOS)
- TalkBack (מובנה באנדרואיד)

מה קורא מסך עושה:
- קורא את הטקסט על המסך.
- מודיע על סוג האלמנט ("כותרת רמה 2", "קישור", "כפתור").
- קורא alt של תמונות.
- מאפשר ניווט לפי כותרות, קישורים, landmarks (header, nav, main).
- קורא labels של שדות טופס.

---

כלי בדיקת נגישות

לא צריך לנחש אם האתר נגיש - יש כלים שבודקים אוטומטית:

תוסף axe DevTools

• תוסף לChrome שבודק בעיות נגישות בדף.
• מוצא בעיות כמו: חוסר alt, חוסר labels, ניגודיות נמוכה.
• נותן הסברים ופתרונות לכל בעיה.

כלי WAVE

• כלי אונליין מבית WebAIM.
• שמים URL ומקבלים דוח נגישות מפורט.
• מציג ויזואלית את הבעיות על הדף.
• כתובת: https://wave.webaim.org

בדיקה ידנית

• נסו לנווט באתר שלכם רק עם מקלדת (Tab, Enter, Space).
• הפעילו קורא מסך (VoiceOver ב-Mac עם Cmd+F5) ונסו לגלוש.
• בדקו שכל תמונה מתוארת, שכל שדה מתויג, ושאפשר להגיע לכל מקום.

בדיקה אוטומטית לוכדת רק כ-30% מבעיות הנגישות. בדיקה ידנית חיונית.

---

סיכום - רשימת בדיקה לנגישות

לפני שמפרסמים דף, תבדקו:
- כל תמונה עם alt מתאר (או alt ריק לתמונות דקורטיביות).
- היררכיית כותרות נכונה (h1 אחד, לא מדלגים רמות).
- כל שדה טופס עם label.
- ניתן לנווט בכל הדף עם מקלדת בלבד.
- שימוש בתגיות סמנטיות (header, nav, main, footer, article, section).
- ניגודיות צבעים מספיקה.
- סרטונים עם כתוביות (אם רלוונטי).
- שפת הדף מוגדרת בתגית html עם lang.