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

ARIA - שימוש נכון ושגיאות נפוצות

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

בקצרה

ARIA (Accessible Rich Internet Applications) היא מערכת תכונות שמוסיפה משמעות נגישה לרכיבים שאין להם סמנטיקה מובנית - בעיקר רכיבים דינמיים (תפריטים, חלוניות, טאבים). הכלל הראשון של ARIA: אם אפשר להשתמש ב-HTML סמנטי, עדיף עליו. ARIA שגוי מזיק יותר מאשר היעדר ARIA.

מה זה ARIA?

ARIA מאפשרת לתאר לקורא המסך תפקיד (role), מצב (state) ותכונות של רכיב. למשל, role="dialog" או aria-expanded="true". היא חיונית כשבונים רכיבים מורכבים שאין להם תג HTML מובנה.

הכלל הראשון של ARIA

"אל תשתמש ב-ARIA אם יש HTML מובנה שעושה את העבודה." כפתור צריך להיות <button>, לא <div role="button">. ה-HTML המובנה כבר נגיש, תומך במקלדת ובמצבים - בחינם.

שימושים נכונים

  • aria-label לרכיב ללא טקסט נראה (למשל כפתור אייקון).
  • aria-expanded לכפתור שפותח/סוגר תפריט.
  • aria-live להודעות שמשתנות דינמית.
  • role-ים לרכיבים מותאמים (tabs, dialog) - לצד ניהול פוקוס נכון.

שגיאות נפוצות

  • ARIA במקום HTML - div role="button" בלי תמיכת מקלדת.
  • role סותר - הוספת role שגוי שמבלבל את קורא המסך.
  • aria-hidden על תוכן חשוב - מסתיר אותו מקוראי מסך בטעות.
  • תוויות כפולות - aria-label שמתנגש עם הטקסט הנראה.

זכרו

"No ARIA is better than bad ARIA" - ARIA שגוי גורם נזק. בספק? השתמשו ב-HTML סמנטי.

שאלות נפוצות

מתי להשתמש ב-ARIA?

רק כשאין רכיב HTML מובנה שעושה את העבודה - בעיקר ברכיבים דינמיים מותאמים.

מה הכלל הראשון של ARIA?

אם אפשר HTML סמנטי - עדיף עליו, אל תשתמש ב-ARIA.

האם ARIA הופך רכיב לנגיש?

לא לבדו. ARIA מוסיף משמעות, אבל צריך גם תמיכת מקלדת וניהול פוקוס.

מקורות

רוצים להמשיך?

בשלב הבא נוסיף כאן השוואת פתרונות.

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