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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My website</title>
</head>
<body>
    <div id="page-header">
        <div id="logo">
            <h1>My blog</h1>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="main-content">
        <div class="blog-post">
            <div class="post-header">
                <h2>My first post</h2>
                <div class="date">March 15, 2026</div>
            </div>
            <div class="post-body">
                <p>This is the first post on my blog. I'm excited to share my knowledge with you.</p>
                <div class="image-container">
                    <img src="photo.jpg">
                    <div class="image-description">My photo</div>
                </div>
            </div>
        </div>

        <div class="blog-post">
            <div class="post-header">
                <h2>My second post</h2>
                <div class="date">March 20, 2026</div>
            </div>
            <div class="post-body">
                <p>In this post I write about semantic HTML.</p>
            </div>
        </div>
    </div>

    <div id="sidebar">
        <h3>About the author</h3>
        <p>Hello, I'm Israel and I write about web development.</p>
        <h3>Recommended links</h3>
        <ul>
            <li><a href="#">MDN Web Docs</a></li>
            <li><a href="#">W3Schools</a></li>
        </ul>
    </div>

    <div id="page-footer">
        <p>All rights reserved 2026</p>
        <div id="footer-links">
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms of use</a>
        </div>
    </div>
</body>
</html>

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h1>Contact Us</h1>

    <form>
        <input type="text" placeholder="Your name">
        <br><br>

        <input type="email" placeholder="Your email">
        <br><br>

        <b>Subject:</b>
        <select>
            <option>Choose a subject</option>
            <option>Question</option>
            <option>Complaint</option>
            <option>Feedback</option>
        </select>
        <br><br>

        <b>Message:</b><br>
        <textarea rows="5" cols="40"></textarea>
        <br><br>

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

        <div onclick="submitForm()">Send</div>
    </form>
</body>
</html>

בעיות לתקן (מצאו לפחות 8):
1. חוסר lang בtag 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 מתאר.
הattribute lang בhtml.
כותרות בהיררכיה נכונה.

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

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