רשימת תפקידי ARIA: ההפניות הטובות ביותר בהשוואה

רשימת התפקידים של ARIA כוללת 82 הגדרות מוגדרות ב-WAI-ARIA 1.2 ספציפיות של W3C, המאורגנים בשישה קטגוריות פונקציונליות: תפקידי מסמך, נקודת ציון, ווידג’ט, מבנה, חלון ותפקידים מופשטים. בחירת המקור המתאים לעיון תלויה בשאלה אם דרושה לך טבלה מהירה, תיעוד עם דוגמאות קוד או מדריך לקבלת החלטות לגבי מתי להחיל כל תפקיד.

נקודות חשובות

• המפרט של WAI-ARIA 1.2 מגדיר 82 תפקידים, אך רק תת-קבוצה מצומצמת משמשת בפועל בפיתוח אתר XHTML/CSS נגיש.
• הכלל הראשון של ARIA עדיין תקף: אם קיים אלמנט HTML מובנה עם הסמנטיקה הדרושה לך, השתמש בו במקום להוסיף תפקיד (role).
• תפקידים מופשטים (כמו role="widget" או role="input") לעולם לא צריכים להיכתב בסימון; הם משמשים רק כבסיס טקסונומי.
• מקור ייחוס שימושי עבור front-end צריך לכלול את התפקיד, את תכונות ה-ARIA המחייבות שלו, את המצבים המותרים ודוגמה לסימון ממשי.
• תפקידי נקודת ציון (landmark) ווידג’ט הם המקור לרוב השגיאות שמתגלות על ידי כלי בדיקה אוטומטיים כמו axe-core או Lighthouse.

ARIA הוא תפקיד וצריך רשימה מתאימה

תפקיד ARIA הוא ערך המוקצה לאלמנט באמצעות התכונה role כדי להודיע לטכנולוגיות מסייעות איזה סוג רכיב הוא מייצג. הדפדפן חושף את התפקיד הזה דרך עץ הנגישות, וקורא מסך כמו NVDA, JAWS או VoiceOver מתרגם אותו להכרזה ספציפית: “לחצן”, “לשונית”, “אזור”, “תיבת דו-שיח”.

La especificación WAI-ARIA, mantenida por el W3C dentro del grupo de trabajo ARIA, מגדיר כל תפקיד לצד תכונות המצב והמאפיינים המותרים שלו. גרסה 1.2 היא ההמלצה היציבה הנוכחית, ו-ARIA 1.3 נמצאת בפיתוח. עבור מפתח שעובד עם XHTML ו-CSS, רשימת התפקידים אינה קטלוג דקורטיבי: כל ערך שיוחל באופן שגוי יוצר קונפליקט בין הסמנטיקה המובנית של האלמנט לבין זו שהוצהרה, וקוראי מסך פותרים את הקונפליקט הזה בדרכים שונות בהתאם לדפדפן.

התיעוד הרשמי של תפקידי ARIA ב-MDN (Mozilla Developer Network) הוא המקור הטכני הנפוץ ביותר בספרדית ובאנגלית, אך הוא אינו היחיד. קיימים דפי עזר, מדריכי תבניות וכלי אימות המכסים צרכים שונים. השוואה ביניהם עוזרת לבחור את המקור שמתאים לזרימת העבודה שלך.

Las seis categorías de roles ARIA

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

Roles de documento. Describen la estructura de una página o sección: article, document, feed, heading, img, list, listitem, math, none, note, presentation, row, separator, “tool’t,`t. רבים מהם משכפלים אלמנטים מובנים של HTML, ולכן הם נכתבים ידנית לעיתים רחוקות.

קשורים: UserWay — Widget de accesibilidad עם תוכנית חינם עבור empezar hoy mismo.

תפקידי ציון דרך. הגדר אזורי ניווט בדף: באנר, משלים, contentinfo, טופס, ראשי, ניווט, אזור, חיפוש. זה מה שמשמש הכי הרבה באתרים עם סמנטיקה של HTML לא שלמה.

תפקידי ווידג’ט. מייצגים פקדים אינטראקטיביים: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, slider, spinbutton, switch, tab, tabpanel, textbox, treeitem. דורש מיקוד וניהול מקלדת.

תפקידי מבנה. ווידג’טים של הארגון כוללים: יישום, רשת, קבוצה, רשימה, תפריט, סרגל תפריט, radiogroup, טבליסט, עץ, treegrid, rowgroup, כותרת עמודות, כותרת שורה.

שווה להסתכל: AudioEye — גישה לתנועה: משולבת אוטומטית עם רוויזיון אנושי.

תפקידי חלון. ניהול תוכן על גבי או מודאלי: alertdialog, dialog.

תפקידים מופשטים. לא נכתבים רכיבים בסימון: commande, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window. Sirven למפרט שיורש מאפיינים בין תפקידים.

השוואות: לאס חשובות לתפקידים ARIA

La suiente tabla compara las referencias más usadas por desarrolladores hispanohablantes Según criterios prácticos.

Referencia	טיפו	אידיומות	Ejemplos de código	פארה אידיאלית
MDN Web Docs (תפקידים ARIA)	Documentación oficial	Multilingüe (incluye español)	Sí, por rol	Consulta técnica profunda
WAI-ARIA 1.2 (W3C)	Especificación normativa	אנגלית	לא	אימות התאמה מדויקת
WAI-ARIA מדריך שיטות כתיבה	Guía de patrones	אנגלית	Sí, patrones completos	יישומונים מיושמים עם teclado
Hoja de referencia tipo גיליון הונאה	קורות חיים טאבלה	אנגלית	מינימוס	Repaso rápido en el עורך
accessibility.build (referencia ARIA)	Referencia práctica	אנגלית	סי	Aprender con ejemplos comentados
Auditores (גרזן-ליבת, מגדלור)	Herramienta	Multilingüe	לא	תפקידי גלאי inválidos

La elección depende del momento. Durante la escritura de marcado, una hoja de referencia compacta gana en velocidad. אל דהפורר ויישומון que no anuncia bien su estado, la especificación del W3C y la guía de patrones de WAI son las fuentes que resuelven la duda.

Cómo decidir qué rol aplicar: criterios prácticos

La decisión correcta casi siempre empieza por descartar ARIA. אסטוס קריטריונים, ordenados, evitan la mayoría de los errores.

1. ¿האם יש אלמנט HTML מקורי? ל-’ כבר יש את התפקיד המרומז של ‘לחצן’. הוספת role="button" מיותרת ועלולה ליצור התנגשויות.
2. ¿תפקיד דורש תכונות חובה? role="checkbox" דורש aria-checked. role="slider" דורש aria-valuenow, aria-valuemin ו-aria-valuemax. אם אתה לא יכול לשמור על המצבים האלה, התפקיד פוגע יותר ממה שהוא עוזר.
3. ¿תפקיד כרוך בניהול מקלדת? תפקידי ווידג’טים דורשים ניווט עם חיצים, בית, סוף ו-Esc בהתאם לתבנית. role="tablist" ללא טיפול בחצים הוא גרוע יותר מאשר שאין אותו.
4. ¿El rol es abstracto? אם הוא נמצא ברשימת התפקידים המופשטים, אסור לכתוב אותו.
5. ¿האם התפקיד מיושן או אינו בשימוש? חלק מהערכים שונו בין ARIA 1.0 ל-1.2. עיין תמיד בגרסה הנוכחית.

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

קשורים: IAAP CPACC / WAS Certification — La certificación profesional que acredita tu experiencia en accesibilidad.

שגיאות תדירות של ייעוץ ושימוש ברשימת התפקידים

Un error habitual consiste en copiar un roll de una hoja de referencia sin comprobar sus atributos requeridos. role="combobox" en ARIA 1.2 דומה ל-1.0 שנים לאחר ספירה aria-expanded ו-relación con un listbox באמצע aria-controls. אפליקציית גרסה אנטיגואה רומפה אל אנונסיו ב-Lectores actualizados.

מקובל גם להשתמש ב-role="presentation" או role="none" כדי “לנקות” את הסמנטיקה מבלי להבין שזה מבטל את האלמנט מעץ הנגישות, כולל ילדיו במקרים מסוימים. זה מופיע גם בתדר role="application", אשר מעבירה את כל השליטה במקלדת לווידג’ט ומשביתה את קיצורי הדרך של קורא המסך; הוא שמור ליישומי אינטרנט מורכבים, לא לטפסים.

Los rolls de duplicados generan confusión: dos role="main" en la misma página, o un role="banner" dentro de un <מאמר>, מיוצר ללא נגיעה לפי אזורים לא קוהרנטיים. La validación con axe-core o con las herramientas de accesibilidad del navegador detecta varios de estos casos, unque ninguna herramienta automática sustituye la prueba con lector de pantalla real.

אם אתה עושה קניות: accessiBe — Superposición de IA que promete cumplimiento WCAG ב-48 שעות.

Herramientas para validar roles in tu marcado

La comprobación de roles Combina Inspection Manual and Automatization. Las DevTools של Chrome ו-Firefox כולל פאנל גישה ל-Musestra el árbol tal como lo recibe el systema operativo, con el roll calculado de cada nodo. Es la forma más directa de ver si un roll declarado sobrevive o es sobrescrito por la semántica nativa.

גרזן-ליבת, אינטגרדו ב-Lighthouse y disponible como extensión, marca rolls inválidos, atributos obligatorios ausentes y combinaciones contradictorias. La extensión Accessibility Insights for Web, basada en las regglas de axe, añade comprobaciones guiadas. עבור שימוש בשימוש אמיתי, NVDA ב-Windows ו-VoiceOver ו-macOS מדווחים על אימות סופי: אימות אימות זיהוי ומודעה ניתנת להבנה בהקשר.

La documentación de accesibilidad de MDN y la guía de patrones de WAI-ARIA del W3C son las dos fuentes que conviene tener abiertas durante el desarrollo. La primera explica cada rol; la segunda muestra cómo se combinan en componentes completos.

מקורות וקריאה נוספת

• WAI-ARIA — ויקיפדיה: יוזמת נגישות לאינטרנט – יישומי אינטרנט עשירים נגישים (WAI-ARIA) הוא מפרט טכני שפורסם על ידי ה-World Wide Web Consortium (W3C) ש…

שאלות נפוצות

¿Cuántos תפקידים ARIA קיים?

מפרט W3C WAI-ARIA 1.2 מגדיר 82 תפקידים בסך הכל, מחולקים בין תפקידי מסמך, ציון דרך, יישומון, מבנה, חלון ותפקידים מופשטים. בהקשר זה, רק חלק משמש בפיתוח הרגיל: תפקידים מופשטים לעולם אינם נכתבים ותפקידי מסמך רבים משכפלים רכיבי HTML מקוריים.

¿Cuál es la diferencia entre un roll ARIA y un atributo ARIA?

Un roll ARIA describe qué es un elemento, mientras que los atributos ARIA describen su estado o propiedades. לדוגמה, role="checkbox" מזהה את הרכיב ו-aria-checked="true" מתקשר אם הוא מסומן. לוס תפקידים se asignan con el atributo תפקיד; los estados y propiedades usan el prefijo aria-.

¿Debo משתמש ב-ARIA האם אתה משתמש ב-HTML סמנטי?

ברוב המקרים, לא. HTML סמנטי כבר חושף תפקידים מרומזים: <nav> שווה ערך לrole="navigation" ו-<main> שווה ערך לrole="main". הוספת התפקיד במפורש היא מיותרת ועלולה ליצור התנגשויות. ARIA שמורה לרכיבים ש-HTML אינו מכסה, כגון כרטיסיות, עצים או תפריטים מורכבים.

¿Qué תפקידים ARIA nunca debo escribir en el marcado?

תפקידים מופשטים לעולם לא צריכים להופיע: command, composite, input, ציון דרך, range, roletype, section, sectionhead, select, structure, widget ו-window. הם קיימים רק עבור המפרט כדי להגדיר תורשה של מאפיינים בין תפקידים. כתיבתם מייצרת תפקיד לא חוקי שמאמתים מסמנים.

¿Cómo verifico que un roll ARIA funciona correctamente?

האימות משלב שלושה שלבים: בדיקת עץ הנגישות ב-DevTools של הדפדפן כדי לאשר את התפקיד המחושב, העברת אימות כמו axe-core כדי לזהות תכונות חובה חסרות, ובדיקה עם קורא מסך אמיתי כמו NVDA או VoiceOver. רק השלב האחרון מאשר שההודעה מובנת לאדם.

¿Los roles ARIA cambian entre versiones de la especificación?

סִי. ARIA 1.1 הוא תפקידים כמו הזנה ומתג, ו-ARIA 1.2 שונה בתפקידים של combobox ובקונסולידאו אחרים. ARIA 1.3 está en desarrollo. Consultar siempre la versión vigente de la especificación evita aplicar patrones obsoletos que los lectores de pantalla modernos interpretan de forma distinta.