Back to Glossary

ARIA

ARIA

معايير ARIA

Intermediateaccessibility1 min read
aria attributeswai-ariaaria-labelaria-hiddenaria-modalaria-labelledbyaccessibility attributes
Official DocsSign in to save & take notes

Definition

HTML attributes that provide semantic meaning to screen readers when native HTML semantics aren't sufficient.

سمات HTML تُوفّر معنى دلاليًا لقارئات الشاشة عندما لا تكون دلالات HTML الأصلية كافية.

Why It Matters

The PromptModal in 404Fault uses role='dialog', aria-modal='true', aria-labelledby, and aria-hidden='true' on icons — this is what makes it accessible to screen reader users.

PromptModal في 404Fault يستخدم role='dialog' وaria-modal='true' وaria-labelledby وaria-hidden='true' على الأيقونات — هذا ما يجعله قابلاً للوصول لمستخدمي قارئات الشاشة.

Full Definition

ARIA (Accessible Rich Internet Applications) attributes enhance HTML for assistive technologies. Key attributes: `role` (dialog, button, progressbar, navigation); `aria-label` (text description for icon buttons); `aria-labelledby` (links to another element's text); `aria-hidden='true'` (hides decorative elements from screen readers); `aria-modal='true'` (tells screen readers content outside the dialog is inert); `aria-expanded` (for toggleable elements).
سمات ARIA (تطبيقات الإنترنت الغنية المُمكَّنة للوصول) تُحسّن HTML لتقنيات المساعدة. سمات رئيسية: `role` (dialog، button، progressbar)؛ `aria-label` (وصف نصي لأزرار الأيقونات)؛ `aria-hidden='true'` (يُخفي العناصر الزخرفية من قارئات الشاشة)؛ `aria-modal='true'`.

Example Usage

“<div role='dialog' aria-modal='true' aria-labelledby='dialog-title'><h2 id='dialog-title'>Term Details</h2><button aria-label='Close' onClick={onClose}><X aria-hidden='true' /></button></div>”

“<div role='dialog' aria-modal='true' aria-labelledby='dialog-title'><h2 id='dialog-title'>تفاصيل المصطلح</h2><button aria-label='إغلاق' onClick={onClose}><X aria-hidden='true' /></button></div>”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using ARIA:

1

Adding `aria-label` to elements that already have visible text — redundant and confusing for screen readers

2

Using ARIA roles on the wrong element — `role='button'` on a `<div>` still requires `tabindex` and keyboard handlers

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using ARIA.

Explain:
1. What is ARIA and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Adding `aria-label` to elements that already have visible text — redundant and confusing for screen readers, Using ARIA roles on the wrong element — `role='button'` on a `<div>` still requires `tabindex` and keyboard handlers
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account