الوصول الرقمي: تمكين بلا فجوات

تنص القاعدة الأولى في ARIA على: لا تستخدم ARIA إن كان عنصر HTML الأصلي يؤدي الغرض. يضيف كثير من المطورين أدوارا وخصائص ARIA دون حاجة، فيزيدون التعقيد ويُحدثون مشاكل لقارئات الشاشة. عنصر <button> يأتي جاهزا بدعم لوحة المفاتيح وقارئات الشاشة. عنصر <div> يحتاج إلى role وtabindex ومعالج أحداث، وغالبا يبقى ناقصا.

<!-- Problem -->
<div class="btn" onclick="send()">
  Submit
</div>

<!-- Fix -->
<button type="submit">
  Submit
</button>

يستخدم كثير من المطورين aria-labelledby ويشيرون إلى معرّف (ID) غير موجود في الصفحة، أو يضعون المعرّف نفسه بدلا من النص. قارئ الشاشة لن يبلغك بالخطأ، سيقرأ العنصر بلا اسم وكأنه غير موجود. تحقق دائما من أن المعرّف يشير إلى عنصر يحتوي على نص مرئي.

<button aria-labelledby="btn-label">
  Send
</button>
<!-- No element with id="btn-label" -->

<span id="btn-label">Submit the form</span>
<button aria-labelledby="btn-label">
  Send
</button>

استخدم aria-label حين لا يوجد نص مرئي يصف العنصر (مثل زر أيقونة). استخدم aria-labelledby حين يوجد نص مرئي في مكان آخر بالصفحة تريد ربطه بالعنصر. لا تستخدمهما معا على نفس العنصر لأن aria-labelledby يتجاهل aria-label. ولا تستخدم أيا منهما إن كان العنصر يملك نصا مرئيا بالفعل (مثل زر يحتوي على كلمة).

<!-- زر أيقونة: استخدم aria-label -->
<button aria-label="إغلاق">
  <svg>...</svg>
</button>

<!-- نص مرئي في مكان آخر: استخدم aria-labelledby -->
<h2 id="section-title">الخدمات</h2>
<nav aria-labelledby="section-title">...</nav>

<!-- لا تستخدم ARIA: النص موجود بالفعل -->
<button>إرسال</button>

حين يتغير محتوى على الصفحة دون إعادة تحميل (رسالة نجاح، خطأ في نموذج، عدّاد تحديث)، لن يعلم قارئ الشاشة بذلك ما لم تستخدم aria-live. اضبطه على polite ليُعلن التغيير بعد انتهاء القراءة الحالية، أو assertive للرسائل العاجلة كالأخطاء. لا تضع aria-live على عناصر كثيرة، وإلا سيغرق المستخدم في إعلانات متكررة.

<p id="count">0</p>
<button onclick="increment()">
  Add item
</button>

<div aria-live="polite">
  <p id="count">0</p>
</div>
<button onclick="increment()">
  Add item
</button>

يربط عنصر label النص بحقل الإدخال. بدونه يقرأ قارئ الشاشة الحقل دون اسم. استخدم for/id لربط التسمية. لرسائل الخطأ، استخدم aria-describedby لربط الرسالة بالحقل حتى يسمعها المستخدم عند التركيز عليه. لا تعتمد على اللون وحده للإشارة إلى الخطأ.

<input type="email"
  placeholder="Email" />

<label for="email">Email</label>
<input id="email" type="email"
  aria-describedby="email-err"
  aria-invalid="true" />
<p id="email-err" role="alert">
  Enter a valid email.
</p>

يخلط المطورون بين إخفاء العنصر بصريا (لا يراه المبصر) وإخفائه برمجيا (لا يقرأه قارئ الشاشة). display:none وvisibility:hidden يخفيان العنصر من الجميع. aria-hidden="true" يخفيه من قارئ الشاشة فقط. صنف sr-only (أو visually-hidden) يخفيه بصريا لكن يبقيه لقارئ الشاشة. اختر الطريقة حسب الغرض.

<span>★</span> Favorite

<span aria-hidden="true">★</span>
Favorite

تشترط المعايير نسبة تباين 4.5:1 للنصوص العادية، و3:1 للنصوص الكبيرة وعناصر الواجهة. لكن التباين وحده لا يكفي. يصيب عمى الألوان 8% من الرجال، لذلك لا ينبغي أن يكون اللون الوسيلة الوحيدة لنقل المعلومة. أضف أيقونات أو نصوصا أو أنماطا بصرية تكمّل اللون.

p { color: #999; }
/* Contrast ratio: 2.6:1 ✗ */
/* WCAG requires 4.5:1 */

p { color: #0D121C; }
/* Contrast ratio: 15.4:1 ✓ */

يجب أن تعمل كل وظيفة في الموقع بلوحة المفاتيح وحدها. ينبغي أن يتطابق ترتيب التركيز (Focus Order) مع الترتيب البصري للعناصر. يجب أن تكون مؤشرات التركيز مرئية بوضوح. لا تكتب أبدا outline: none دون توفير بديل مرئي. استخدم :focus-visible لتطبيق تنسيق تركيز واضح دون إزعاج مستخدمي الفأرة.

a:focus { outline: none; }

a:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

يعاني أكثر من 70 مليون شخص حول العالم من اضطرابات دهليزية تجعل الحركة على الشاشة مصدرا للدوار والغثيان. يوفر استعلام prefers-reduced-motion طريقة لاحترام تفضيل المستخدم. القاعدة: اجعل الحركة اختيارية يفعّلها من يريدها، لا إلزامية يعطّلها من يتضرر منها.

.spinner {
  animation: spin 1s linear infinite;
}

.spinner {
  animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

يبدأ الوصول الرقمي من مرحلة الإطار الشبكي (Wireframe)، لا بعد إطلاق المنتج. وثّق في تصاميمك تسلسل العناوين، والنصوص البديلة، وترتيب التركيز قبل أن تفكر في الألوان والخطوط. التصميم الشامل ينفع الجميع: المنحدرات التي صُممت للكراسي المتحركة يستخدمها كل من يدفع عربة أطفال أو حقيبة سفر. بالنسبة لأهداف اللمس، يشترط Apple حدا أدنى 44×44pt، وAndroid يشترط 48×48dp، ويتطلب WCAG 2.2 مساحة 24×24px على الأقل في مستوى AA.

لا يقتصر وصول الهاتف على التصميم المتجاوب. تحتاج كل إيماءة معقدة كالقرص والسحب إلى بديل بنقرة واحدة. لا تقفل اتجاه الشاشة، فبعض المستخدمين يثبّتون أجهزتهم على كراسيهم المتحركة في وضع أفقي دائم. تُظهر الأبحاث أن أهداف اللمس الأصغر من 44px ترفع معدل الخطأ ثلاث مرات. اختبر دائما مع VoiceOver على iOS وTalkBack على Android، فلكل منهما سلوك مختلف.

ضع رسائل الخطأ بجانب الحقل المعني، لا في أعلى الصفحة فقط. استخدم تسميات مرئية دائمة بدلا من الاعتماد على النص التوضيحي (Placeholder) وحده. لا تعتمد على اللون وحده لنقل المعلومة، فيصيب عمى الألوان 8% من الرجال. صمّم للاستخدام بيد واحدة، ووفّر بدائل نصية لكل أيقونة.

يساعد الذكاء الاصطناعي في توليد التسميات التوضيحية تلقائيا، واقتراح نصوص بديلة، وفحص الصفحات آليا. لكنه يخطئ: قد يصف منحدرا للكراسي المتحركة بأنه سلّم، أو يولّد نصا بديلا عاما لا يفيد المستخدم، أو يضيف خصائص ARIA غير صحيحة. القاعدة: يكتشف الذكاء الاصطناعي الكم، ويتحقق الإنسان من الدقة. لا تنشر مخرجات الذكاء الاصطناعي دون مراجعة بشرية.

صنّف 67% من المتخصصين و72% من المستخدمين ذوي الإعاقة أغطية الوصول (Overlays) بأنها غير فعّالة وفقا لاستطلاع WebAIM. تتدخل هذه الأدوات في إعدادات قارئات الشاشة، ولا تصلح الكود الأصلي. غرّمت لجنة التجارة الفيدرالية شركة accessiBe مليون دولار في يناير 2025 بسبب ادعاءات كاذبة بالتوافق مع WCAG. الحل الوحيد هو بناء الوصول في الكود من البداية.

<!-- What overlays inject -->
<div aria-label="..." role="..." style="...">
  <!-- overrides that break screen readers -->
</div>

<!-- What actually works -->
<button type="submit">
  Submit
</button>

استخدم الذكاء الاصطناعي نقطة انطلاق، لا إجابة نهائية. راجع كل نص بديل يولّده قبل نشره. لا تثق بالذكاء الاصطناعي في كتابة ARIA، فتحتوي الصفحات التي تستخدم ARIA على 57 خطأ وصول في المتوسط، ضعف الصفحات التي لا تستخدمه. أدرج الفحص الآلي في سلسلة CI/CD لكن اقرنه دائما بالاختبار اليدوي. الوصول الرقمي حق إنساني، وقرار إعلان توافق المنتج يجب أن يبقى بيد الإنسان.

يتطلب دعم العربية إضافة dir="rtl" على عنصر html وتحديد lang="ar" لضمان نطق قارئات الشاشة للمحتوى بشكل صحيح. استخدم الخصائص المنطقية (Logical Properties) في CSS: اكتب margin-inline-start بدلا من margin-left، وpadding-inline-end بدلا من padding-right. ينعكس سلوك مفاتيح الأسهم في وضع RTL، فيتحرك السهم الأيمن إلى الحرف السابق والأيسر إلى التالي. يحتاج النص ثنائي الاتجاه (Bidi) إلى عناية خاصة حين تتداخل العربية مع الإنجليزية أو الأرقام في الجملة نفسها.

/* خطأ: خصائص فيزيائية */
.card { margin-left: 1rem; padding-right: 2rem; }

/* صواب: خصائص منطقية */
.card { margin-inline-start: 1rem; padding-inline-end: 2rem; }

لا تقتصر مشكلة الوصول في العربية على المواقع، بل تمتد إلى المستندات. ملفات PDF العربية غير قابلة للقراءة بشكل صحيح حتى مع الوسم، بسبب ضعف دعم اتجاه القراءة والخطوط المخصصة. يكفل نظام حقوق الأشخاص ذوي الإعاقة (المادة 14) حق الوصول إلى المحتوى بأنساق ميسرة. الحل العملي: وفّر كل مستند بثلاثة أنساق على الأقل: HTML، وWord، وEPUB بجانب PDF.

تكشف أدوات الفحص الآلي نحو 30% فقط من مشاكل الوصول. يبقى الباقي رهينا بالاختبار اليدوي: تصفح الموقع بلوحة المفاتيح، اختبره مع قارئ شاشة، كبّر الصفحة إلى 200% وتأكد من عدم فقدان محتوى أو وظائف. والأهم من كل ذلك: أشرك أشخاصا من ذوي الإعاقة في عملية الاختبار. لا بديل عن تجربتهم الحقيقية.

تتصدر أدوات مثل axe-core وLighthouse وWAVE مشهد الفحص الآلي، لكنها تكشف بين 30% و57% من المشاكل حسب الدراسة. تفلت منها أمور جوهرية: ترتيب القراءة، مصائد لوحة المفاتيح، جودة النصوص البديلة، إدارة التركيز في التطبيقات أحادية الصفحة (SPA)، والتوافق الفعلي مع قارئات الشاشة. أدرج الفحص الآلي في CI/CD، لكن لا تعتمد على النتيجة الخضراء وحدها.

لا تكفي وسوم PDF/UA لجعل المستندات العربية قابلة للوصول. حتى مع الوسم الصحيح، لا تقرأ معظم قارئات الشاشة ملفات PDF العربية بالاتجاه الصحيح، وتستخدم بعض الجهات خطوطا مخصصة غير مقروءة من التقنيات المساعدة. تبلغ تكلفة المعالجة اليدوية 3-4 دولارات للصفحة، وتدير الجهات الحكومية آلاف الملفات القديمة. الحل: وفّر ثلاثة أنساق بديلة بجانب PDF: مستند HTML متوافق، وملف Word قابل للتعديل، وملف EPUB للقراءة على الأجهزة المحمولة. لا يوجد حل سحري لملفات PDF العربية اليوم.

يعاني 26% من البالغين من إعاقة ما، ويبلغ حجم سوقهم 13 تريليون دولار. تحقق المواقع المتوافقة تحسنا بنسبة 66% في إتمام عمليات الشراء. يعود كل دولار يُستثمر في الوصول بمئة دولار. ارتفعت دعاوى ADA بنسبة 37% في النصف الأول من 2025، ودخل قانون الوصول الأوروبي حيز التنفيذ في يونيو 2025. هذا ليس عملا خيريا، بل ضرورة تجارية وقانونية.

تنص المادة الرابعة عشرة من نظام حقوق الأشخاص ذوي الإعاقة على حقهم في الوصول إلى المحتوى بأنساق ميسرة تحفظ خصوصيتهم واستقلاليتهم. وتلزم اللائحة التنفيذية الجهات بتحويل المصنفات الأدبية والعلمية والفنية إلى أنساق ميسرة. يُستغل الموكلون لعدم قدرتهم على قراءة صكوك وكالاتهم، ويدفع طلاب الجامعات مبالغ طائلة لتحويل الكتب، ويُحرم الموظفون من أداء واجباتهم. الالتزام بهذا النظام ليس اختياريا.

يحدد نموذج W3C لنضج الوصول خمسة مستويات: مؤقت (إصلاح عند الشكوى)، مخطط (راع تنفيذي ومسودة سياسة)، محدد (سياسة منشورة)، مُدار (حوكمة مدمجة في العمليات)، ومحسّن (مساءلة على مستوى مجلس الإدارة). تقف أغلب المؤسسات عند المستوى المؤقت. يخفض الانتقال إلى مستوى محدد تكاليف المعالجة بشكل ملموس.

قبل شراء أي منتج تقني، اطلب تقرير مطابقة الوصول (ACR) المبني على قالب VPAT. يغطي هذا التقرير متطلبات Section 508 وEN 301 549 وWCAG. إن لم يستطع المورّد تقديمه، فهذا مؤشر خطر. أدرج متطلبات الوصول في طلبات العروض (RFP)، واختبر ادعاءات المورّد بنفسك باستخدام قارئ شاشة.