WCAG2.co.ilפורטל התקן הישראלי לנגישות
כלים חינמיים בדיקה עצמית

קריטריון 1.3.1: מידע ויחסים רמה A

עודכן לאחרונה: יוני 2026זמן קריאה: כ-4 דקותנכתב ונבדק ע"י מערכת WCAG2.co.il

בקצרה

קריטריון 1.3.1 מידע ויחסים (Info and Relationships, רמה A) דורש שמבנה ויחסים המועברים בעיצוב חזותי - כגון כותרות, רשימות, טבלאות ושדות טופס - יהיו זמינים גם באופן תכנותי, באמצעות HTML סמנטי או ARIA. זהו קריטריון מחייב לפי ת"י 5568.

פרטי הקריטריון

מספר1.3.1
שםמידע ויחסים (Info and Relationships)
רמהA
גרסהWCAG 2.0
עיקרון1 - מורגש (Perceivable)
הנחיה1.3 - ניתן להתאמה
מחייב לפי ת"י 5568כן

מה דורש קריטריון 1.3.1?

הקריטריון דורש שמידע, מבנה ויחסים המועברים דרך עיצוב חזותי יהיו גם זמינים תכנותית - כלומר שניתן יהיה לקרוא אותם דרך ממשק תכנות (API) של טכנולוגיה מסייעת, או לפחות יוגשו כטקסט. כאשר עמוד משתמש בגופן גדול ומודגש כדי לסמן כותרת, קורא מסך אינו יכול להסיק זאת מה-CSS בלבד - הוא זקוק לתגית <h1>-<h6> או ל-role="heading". הדרישה חלה על מגוון אלמנטים:

  • כותרות - יש להשתמש בתגיות <h1> עד <h6> לפי היררכיה הגיונית.
  • רשימות - פריטים המוצגים כרשימה חזותית יוגדרו עם <ul>, <ol> או <dl>.
  • טבלאות נתונים - שימוש ב-<table> עם <th> לכותרות עמודות ושורות.
  • שדות טפסים - כל שדה קשור לתווית (<label>) ושדות קשורים מקובצים ב-<fieldset> עם <legend>.
  • אזורים ציוניים (landmarks) - שימוש ב-<header>, <main>, <nav>, <footer> ו-<aside> לפי תפקידם.
  • הדגשות ודגשים - <strong> לחשיבות, <em> להדגשה רגשית - לא רק לשינוי מראה.

למי זה עוזר?

הקריטריון מיטיב עם עיוורים וכבדי-ראייה המשתמשים בקורא מסך - הם מנווטים לפי כותרות, רשימות ו-landmarks, ותלויים במבנה הסמנטי. הוא מסייע גם למשתמשי מקלדת בלבד ולמשתמשים שמשנים עיצוב (high contrast, דפדפן נגיש) שבו CSS הוסר ורק המבנה הסמנטי נותר. בנוסף, מבנה סמנטי תקין משפר את הבנת התוכן גם לאנשים עם לקויות קוגניטיביות הנעזרים בתוכנות מסייעות.

איך עומדים בקריטריון?

  • השתמשו בתגיות כותרת (<h1>-<h6>) לפי רמת חשיבות - לא לצורכי עיצוב בלבד.
  • הגדירו רשימות עם <ul>, <ol> ורשימות הגדרה עם <dl>, <dt>, <dd>.
  • בטבלאות נתונים - הוסיפו <th scope="col"> ו-<th scope="row"> לכותרות, ו-<caption> לתיאור הטבלה.
  • קשרו כל שדה טופס לתוויתו עם <label for="..."> או aria-labelledby.
  • קבצו שדות קשורים (כגון כתובת מלאה) ב-<fieldset> עם <legend> מתאר.
  • השתמשו ב-ARIA roles (כגון role="alert", role="status") כשאין תגית HTML מתאימה - אך עדיפו HTML סמנטי על פני ARIA.

טיפ

הכלל המנחה: כל מידע שמשתמש רואים חזותית בגלל עיצוב מסוים - כותרת, דגש, רשימה, שייכות לקבוצה - חייב להיות מקודד גם בצורה שתכנות יכולה לקרוא, ולא להסתמך על CSS בלבד.

איך בודקים?

  • בדיקה ידנית: בחנו את קוד המקור וודאו שכותרות, רשימות, טבלאות וטפסים מיושמים עם תגיות HTML נכונות.
  • קורא מסך (NVDA / VoiceOver): נווטו לפי כותרות (מקש H ב-NVDA) ובדקו שהמבנה החזותי תואם את מה שמוקרא.
  • הסירו עיצוב CSS (Stylesheets Disabled בכלי הפיתוח): בדקו שהמבנה עדיין הגיוני וקריא.
  • כלים אוטומטיים (axe, WAVE) מזהים בעיות נפוצות כגון תגיות <table> ללא <th> או שדות ללא <label>.

שאלות נפוצות

מה דורש קריטריון 1.3.1?

שמידע, מבנה ויחסים המועברים דרך עיצוב חזותי (כגון כותרות, רשימות, טבלאות ושדות טופס) יהיו זמינים גם תכנותית - באמצעות HTML סמנטי או ARIA - כך שטכנולוגיות מסייעות יוכלו לפרש אותם.

מהי רמת הקריטריון 1.3.1?

רמה A - הרמה הבסיסית. הקריטריון נכלל ב-WCAG 2.0 ולכן מחייב לפי ת"י 5568.

האם CSS בלבד מספיק להעברת מבנה?

לא. עיצוב חזותי בלבד (כגון הגדלת גופן לאחדים של כותרת, או גבולות סביב תא בטבלה) אינו מספיק. יש להשתמש בתגיות HTML מתאימות כמו h1-h6, table, ul, ol, fieldset ו-label, או להוסיף ARIA roles מתאימים.

מקורות

צריכים לעמוד בקריטריון הזה באתר שלכם?

ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.

לצ'ק-ליסט הנגישות