Accessibility

إمكانية الوصول

GLS-000131

Intermediateui-ux1 min read
a11yariascreen readerwcagkeyboard navigationalt text

Definition

Designing apps that can be used by people with disabilities — including screen reader and keyboard users.

تصميم تطبيقات يمكن استخدامها من قِبَل الأشخاص ذوي الإعاقات — بما فيها مستخدمو قارئات الشاشة ولوحة المفاتيح.

Why It Matters

Accessibility is both ethically right and practically important. A screen reader user who can't use 404Fault is a user lost. Many accessibility fixes also improve SEO.

إمكانية الوصول صحيحة أخلاقيًا وذات أهمية عملية. مستخدم قارئ شاشة لا يمكنه استخدام 404Fault هو مستخدم مفقود. كثير من إصلاحات إمكانية الوصول تُحسِّن SEO أيضًا.

Full Definition

Accessibility (a11y) ensures digital products work for everyone, including people with visual, motor, or cognitive disabilities. Key practices: add alt text to images, use semantic HTML, ensure keyboard navigation works, provide sufficient color contrast, use ARIA attributes when HTML semantics aren't enough. WCAG guidelines define levels: A (minimum), AA (standard), AAA (highest).
إمكانية الوصول (a11y) تضمن أن المنتجات الرقمية تعمل للجميع، بما فيهم ذوو الإعاقات البصرية أو الحركية أو المعرفية. الممارسات الرئيسية: إضافة نص بديل للصور، استخدام HTML الدلالي، ضمان عمل التنقل بلوحة المفاتيح، توفير تباين لوني كافٍ، استخدام خصائص ARIA عندما لا تكفي دلالات HTML. إرشادات WCAG تُحدِّد المستويات: A (الحد الأدنى) وAA (المعيار) وAAA (الأعلى).

Example Usage

Every icon-only button on 404Fault has aria-label='Bookmark this project' so screen readers can describe it to visually impaired users.

كل زر يحتوي على أيقونة فقط في 404Fault لديه aria-label='احجز هذا المشروع' حتى تتمكن قارئات الشاشة من وصفه للمستخدمين ضعيفي البصر.

Knowledge Graph

Avoid these mistakes when using Accessibility:

1

Using <div onClick> instead of <button> (div isn't keyboard accessible by default)

2

Low color contrast between text and background (fails WCAG AA)

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 Accessibility.

Explain:
1. What is Accessibility and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Using <div onClick> instead of <button> (div isn't keyboard accessible by default), Low color contrast between text and background (fails WCAG AA)
5. Best practices and production tips

Official Resources