לדלג לתוכן

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

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

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

למשל, במקום:

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

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

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

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

הtags מבנה סמנטיים

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

<header>
    <h1>Site name</h1>
    <p>Short description of the site</p>
</header>
  • header מכיל את הכותרת העליונה של הדף או של section/article.
  • בדרך כלל מכיל את הלוגו, שם האתר, וניווט.
  • יכול להופיע כמה פעמים בדף - גם בתוך article למשל.

ניווט - nav

<nav>
    <ul>
        <li><a href="index.html">Home page</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
  • nav מכיל קישורי ניווט ראשיים של האתר.
  • קוראי מסך מזהים את nav ומאפשרים למשתמש לדלג ישר לניווט.
  • אל תשימו כל קישור בnav - רק ניווט ראשי. לינק בודד בתוך פסקה הוא לא nav.

תוכן ראשי - main

<main>
    <h1>Page title</h1>
    <p>The main content of the page is here.</p>
</main>
  • main מכיל את התוכן הראשי והייחודי של הדף.
  • חייב להיות רק main אחד בכל דף.
  • לא כולל תוכן שחוזר על עצמו בכל דפי האתר (כמו ניווט או footer).

מאמר - article

<article>
    <h2>Post title</h2>
    <p>Post content...</p>
</article>
  • article מכיל תוכן עצמאי שניתן להוציא מההקשר ועדיין יהיה מובן בפני עצמו.
  • דוגמאות: פוסט בבלוג, כתבה בחדשות, תגובה, מוצר בחנות.
  • כלל אצבע: אם אתם יכולים לקחת את התוכן ולשים אותו באתר אחר ועדיין יהיה מובן - זה article.

חלק - section

<section>
    <h2>About the course</h2>
    <p>The course covers the following topics...</p>
</section>

<section>
    <h2>Prerequisites</h2>
    <p>To succeed in the course you need...</p>
</section>
  • section מקבץ תוכן שקשור לנושא מסוים, עם כותרת משלו.
  • בניגוד לarticle, section לא חייב להיות עצמאי.

תוכן צדדי - aside

<aside>
    <h3>Related links</h3>
    <ul>
        <li><a href="#">Related article 1</a></li>
        <li><a href="#">Related article 2</a></li>
    </ul>
</aside>
  • aside מכיל תוכן צדדי שקשור לתוכן הראשי אבל לא חיוני.
  • דוגמאות: סרגל צד, מודעות, קישורים קשורים, ביוגרפיה של הכותב.

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

<footer>
    <p>&copy; 2026 All rights reserved</p>
    <nav>
        <a href="privacy.html">Privacy policy</a>
        <a href="terms.html">Terms of use</a>
    </nav>
</footer>
  • footer מכיל את הכותרת התחתונה של הדף.
  • בדרך כלל מכיל: זכויות יוצרים, קישורים משניים, פרטי התקשרות.
  • כמו header, יכול להופיע גם בתוך article.

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

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

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

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

<main>
    <article>
        <h2>First post</h2>
        <p>Post content...</p>
    </article>
    <article>
        <h2>Second post</h2>
        <p>Post content...</p>
    </article>
</main>

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

הtags סמנטיים נוספים

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

<details>
    <summary>Click here for more details</summary>
    <p>The hidden content that appears only when you click the summary is here.</p>
    <p>You can put as much content here as you want.</p>
</details>
  • details יוצר בלוק תוכן שניתן לפתוח ולסגור.
  • summary הוא הטקסט שנראה תמיד ועליו לוחצים כדי לפתוח.
  • הכל עובד בלי JavaScript - HTML טהור.

זמן - time

<p>The meeting will take place on <time datetime="2026-03-15">March 15, 2026</time></p>
<p>Start time: <time datetime="14:30">14:30</time></p>
  • time מסמן תאריכים ושעות בפורמט שמכונות יודעות לקרוא.
  • הattribute datetime מכיל את הזמן בפורמט סטנדרטי, גם אם הטקסט המוצג הוא בפורמט אחר.

סימון - mark

<p>Search results for "HTML": learn <mark>HTML</mark> in the development course.</p>
  • mark מדגיש טקסט (בדרך כלל ברקע צהוב). שימושי להצגת תוצאות חיפוש.

כתובת - address

<address>
    Contact us:<br>
    <a href="mailto:info@example.com">info@example.com</a><br>
    <a href="tel:+97221234567">02-1234567</a><br>
    1 Herzl Street, Tel Aviv
</address>
  • address מכיל פרטי התקשרות של בעל הדף או ה-article.

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

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

<div id="wrapper">
    <div id="header">
        <div id="logo">My website</div>
        <div id="nav">
            <a href="/">Home</a>
            <a href="/about">About</a>
        </div>
    </div>
    <div id="content">
        <div class="post">
            <div class="post-title">Post title</div>
            <div class="post-body">Post content...</div>
        </div>
        <div class="post">
            <div class="post-title">Second post title</div>
            <div class="post-body">Post content...</div>
        </div>
    </div>
    <div id="sidebar">
        <div class="sidebar-title">Links</div>
        <a href="#">Link 1</a>
    </div>
    <div id="footer">
        <div>All rights reserved 2026</div>
    </div>
</div>

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

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

<header>
    <h1>My website</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Post title</h2>
        <p>Post content...</p>
    </article>
    <article>
        <h2>Second post title</h2>
        <p>Post content...</p>
    </article>
</main>

<aside>
    <h3>Links</h3>
    <ul>
        <li><a href="#">Link 1</a></li>
    </ul>
</aside>

<footer>
    <p>&copy; 2026 All rights reserved</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="The company team stands smiling next to the logo at the Tel Aviv office">

alt גרוע:

<img src="team.jpg" alt="Image">
<img src="team.jpg" alt="team.jpg">
<img src="team.jpg" alt="">

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

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

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

<!-- correct -->
<h1>Site name</h1>
    <h2>First section</h2>
        <h3>Subtopic</h3>
        <h3>Another subtopic</h3>
    <h2>Second section</h2>
        <h3>Subtopic</h3>

<!-- wrong - skipping from h1 to h4 -->
<h1>Site name</h1>
    <h4>Some topic</h4>
  • לא מדלגים רמות. אחרי h1 בא h2, לא h3 או h4.
  • h1 מופיע פעם אחת בדף.
  • קוראי מסך מאפשרים לנווט לפי כותרות, אז היררכיה נכונה קריטית.

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

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

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

הattribute tabindex

<!-- element is focusable in tab order -->
<div tabindex="0">Element you can reach with Tab</div>

<!-- element is focusable by script only, not by tab -->
<div tabindex="-1">Element that can only be given focus with JavaScript</div>
  • tabindex="0" - האלמנט נכנס לסדר הTab הרגיל.
  • tabindex="-1" - אפשר לתת פוקוס עם JavaScript אבל לא דרך Tab.
  • אל תשתמשו בערכים חיוביים כמו tabindex="1" - זה שובר את הסדר הטבעי ויוצר בלבול.

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

בסיס ARIA

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

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

תפקיד - role

<div role="button">Click here</div>
  • role אומר לקורא מסך מה התפקיד של האלמנט.
  • אבל עדיף פשוט להשתמש בbutton אמיתי:
    <button>Click here</button>

תיאור - aria-label

<button aria-label="Close">X</button>
  • aria-label מספק תיאור טקסטואלי לאלמנט שאין לו טקסט ברור.
  • כפתור עם X בלבד לא מספיק ברור - aria-label אומר לקורא מסך "Close".

הסתרה - aria-hidden

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

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

<label for="pwd">Password:</label>
<input type="password" id="pwd" aria-describedby="pwd-help">
<p id="pwd-help">Password must contain at least 8 characters, one uppercase letter, and a number.</p>
  • aria-describedby מקשר אלמנט לטקסט שמתאר אותו.
  • קורא המסך יקרא את הטקסט המתאר כשהמשתמש מגיע לשדה.

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

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

<!-- correct - label with for -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- correct - input inside label -->
<label>
    Email:
    <input type="email" name="email">
</label>

<!-- wrong - no label -->
<input type="email" name="email" placeholder="Email">
  • 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.
- ניתן לנווט בכל הדף עם מקלדת בלבד.
- שימוש בtags סמנטיים (header, nav, main, footer, article, section).
- ניגודיות צבעים מספיקה.
- סרטונים עם כתוביות (אם רלוונטי).
- שפת הדף מוגדרת בtag html עם lang.