0.7 HTML סמנטי ונגישות תרגול

תרגול 1 - המרת div-ים לHTML סמנטי¶

קחו את הדף הבא שבנוי רק עם div-ים, ושכתבו אותו עם תגיות סמנטיות מתאימות:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>האתר שלי</title>
</head>
<body>
    <div id="page-header">
        <div id="logo">
            <h1>הבלוג שלי</h1>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="index.html">בית</a></li>
                <li><a href="about.html">אודות</a></li>
                <li><a href="contact.html">צור קשר</a></li>
            </ul>
        </div>
    </div>

    <div id="main-content">
        <div class="blog-post">
            <div class="post-header">
                <h2>הפוסט הראשון שלי</h2>
                <div class="date">15 מרץ 2026</div>
            </div>
            <div class="post-body">
                <p>זהו הפוסט הראשון בבלוג שלי. אני מתרגש לשתף אתכם בידע שלי.</p>
                <div class="image-container">
                    <img src="photo.jpg">
                    <div class="image-description">התמונה שלי</div>
                </div>
            </div>
        </div>

        <div class="blog-post">
            <div class="post-header">
                <h2>הפוסט השני שלי</h2>
                <div class="date">20 מרץ 2026</div>
            </div>
            <div class="post-body">
                <p>בפוסט הזה אני כותב על HTML סמנטי.</p>
            </div>
        </div>
    </div>

    <div id="sidebar">
        <h3>על הכותב</h3>
        <p>שלום, אני ישראל ואני כותב על פיתוח אתרים.</p>
        <h3>קישורים מומלצים</h3>
        <ul>
            <li><a href="#">MDN Web Docs</a></li>
            <li><a href="#">W3Schools</a></li>
        </ul>
    </div>

    <div id="page-footer">
        <p>כל הזכויות שמורות 2026</p>
        <div id="footer-links">
            <a href="privacy.html">פרטיות</a>
            <a href="terms.html">תנאי שימוש</a>
        </div>
    </div>
</body>
</html>

הדרישות:
1. החליפו כל div לתגית סמנטית מתאימה (header, nav, main, article, section, aside, footer, figure, figcaption, time).
2. הוסיפו alt לתמונה.
3. עטפו את התאריכים בתגית time עם datetime.
4. ודאו שהיררכיית הכותרות נכונה.

תרגול 2 - בניית מבנה בלוג סמנטי¶

בנו מאפס דף בלוג סמנטי שמכיל:

header עם שם הבלוג וnav עם 4 קישורים.
main שמכיל:
לפחות 2 article-ים, כל אחד עם:
- כותרת h2
- תגית time עם תאריך הפרסום
- תגית figure עם תמונה ו-figcaption
- פסקאות תוכן
- קישור "קראו עוד"
aside עם:
ביוגרפיה קצרה של הכותב
רשימת קטגוריות (ul)
תגית details עם summary שמכיל מידע נוסף
footer עם:
זכויות יוצרים (עם copyright entity)
תגית address עם אימייל וטלפון
nav עם קישורי footer

תרגול 3 - תיקון נגישות בטופס¶

הטופס הבא מכיל מספר בעיות נגישות. מצאו ותקנו אותן:

<!DOCTYPE html>
<html>
<head>
    <title>טופס יצירת קשר</title>
</head>
<body>
    <h1>צור קשר</h1>

    <form>
        <input type="text" placeholder="השם שלך">
        <br><br>

        <input type="email" placeholder="האימייל שלך">
        <br><br>

        <b>נושא:</b>
        <select>
            <option>בחרו נושא</option>
            <option>שאלה</option>
            <option>תלונה</option>
            <option>משוב</option>
        </select>
        <br><br>

        <b>הודעה:</b><br>
        <textarea rows="5" cols="40"></textarea>
        <br><br>

        <img src="phone-icon.png"> 050-1234567
        <br><br>

        <div onclick="submitForm()">שלח</div>
    </form>
</body>
</html>

בעיות לתקן (מצאו לפחות 8):
1. חוסר lang בתגית html.
2. חוסר dir="rtl".
3. חוסר charset.
4. שדות בלי label (placeholder לא מספיק).
5. שימוש בb במקום label.
6. חוסר alt לתמונה.
7. div עם onclick במקום button.
8. חוסר name ו-id בשדות.
9. חוסר required בשדות חובה.
10. חוסר action ו-method בform.

תרגול 4 - ניווט מקלדת¶

פתחו אתר אינטרנט כלשהו (למשל אתר חדשות, חנות מקוונת, או ויקיפדיה) ונסו לנווט בו רק עם מקלדת:

לחצו Tab כדי לעבור בין אלמנטים. ספרו כמה לחיצות Tab לוקח עד שמגיעים לתוכן הראשי.
נסו להגיע לתפריט הניווט ולפתוח קישור עם Enter.
נסו למלא טופס חיפוש רק עם מקלדת.
שימו לב - האם אתם תמיד יודעים איפה הפוקוס נמצא? האם יש אינדיקציה ויזואלית?
נסו להגיע לfooter רק עם Tab.

כתבו סיכום קצר (בקובץ HTML) של מה מצאתם:
- מה עבד טוב?
- מה היה קשה או בלתי אפשרי?
- איזה שיפורי נגישות הייתם ממליצים?

תרגול 5 - בניית דף נגיש מלא¶

בנו דף HTML שלם ונגיש של "שאלות נפוצות - FAQ" שמכיל:

מבנה סמנטי מלא (header, nav, main, footer).
שימוש בdetails ו-summary לכל שאלה ותשובה (לפחות 5 שאלות).
ניווט עם anchor links לקטגוריות שונות של שאלות.
טופס "לא מצאתם תשובה? שאלו אותנו" עם labels נכונים ו-aria-describedby לשדות שצריכים הסבר.
תמונה עם alt מתאר.
תכונת lang בhtml.
כותרות בהיררכיה נכונה.

תרגול 6 - שאלות תיאורטיות¶

מה ההבדל בין div לבין section? מתי נשתמש בכל אחד?
מה ההבדל בין section לבין article?
למה placeholder הוא לא תחליף ל-label?
מה aria-label עושה? תנו דוגמה מתי צריך אותו.
מה ההבדל בין aria-hidden="true" לבין hidden?
מה הם 3 רמות WCAG? מה הרמה שרוב החוקים דורשים?