كيف تجعل موقعك متاحا لجميع الناس: دليل بداية وفق WCAG 2.2

لجعل موقع متاحا، ابنه بحيث يستطيع الناس استخدامه بلوحة المفاتيح وقارئ الشاشة والتكبير أو جهاز التحويل، كما يستخدمونه بالفأرة: استخدم عناصر HTML حقيقية للأزرار والروابط والعناوين وتسميات النماذج، وأعطِ الصور نصا بديلا ذا معنى، وحافظ على تباين عال للنص، واجعل التركيز مرئيا. والمعيار الذي يجب أن تستهدفه هو WCAG 2.2 من المستوى AA. تكتشف أدوات الفحص الآلية جزءا من المشكلة، وتكتشف اختبار مدته عشر دقائق بلوحة المفاتيح وقارئ الشاشة جزءا كبيرا من الباقي.

ماذا تعني «الإتاحة» عمليا؟

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

المرجع المعياري هو إرشادات الوصول إلى محتوى الويب (WCAG) الصادرة عن W3C. واعتبارا من سبتمبر 2026، النسخة الحالية هي WCAG 2.2 (نُشرت في أكتوبر 2023، وحُدّثت في ديسمبر 2024)، وWCAG 3 مسودة مبكرة. تقوم WCAG على أربعة مبادئ، يجب أن يكون المحتوى مدركا، وقابلا للتشغيل، ومفهوما، وقويا، ولها ثلاثة مستويات للامتثال:

تشير قوانين في عدة مناطق إلى WCAG، ومنها على سبيل المثال قانون الإتاحة الأوروبي، الذي يُطبق منذ يونيو 2025 على كثير من الخدمات الرقمية الاستهلاكية في الاتحاد الأوروبي. وأي القواعد تنطبق عليك يعتمد على مكان عملك وما تبيعه؛ استشر مختصا إذا لم تكن متأكدا. يغطي هذا الدليل العمل التطبيقي.

الخيارات: كيف تصل إلى ذلك

لمعظم المواقع الصغيرة تكفي الطريقتان الأوليان: اطلب من الذكاء الاصطناعي البناء بإتاحة من البداية، ثم دقق قبل الإطلاق.

أهم الإصلاحات

استخدم عناصر HTML الصحيحة

تأتي معظم الإتاحة مجانا مع HTML الصحيح. عنصر <button> قابل للتركيز، ويعمل بمفتاحي Enter وSpace، ويُعلن على أنه زر. أما <div> مع معالج نقر فلا يفعل أيا من ذلك. وأحيانا يستخدم كود الذكاء الاصطناعي عناصر div منسقة لكل شيء؛ اطلب عناصر دلالية:

• <button> للإجراءات، و<a href> للتنقل
• عنوان <h1> واحد لكل صفحة، ثم <h2> و<h3> بالترتيب، لأن مستخدمي قارئ الشاشة يتنقلون بين العناوين
• المعالم: <header> و<nav> و<main> و<footer>
• عنصر <label> مرتبط بكل حقل في النموذج
• لغة الصفحة في <html lang="en">

استخدم سمات ARIA فقط عندما لا يناسب أي عنصر أصلي؛ مثلا لمجموعة تبويبات مخصصة أو قائمة منسدلة مخصصة. فـARIA الخاطئ أسوأ من غيابها.

الوصول بلوحة المفاتيح والتركيز المرئي

كل ما يمكنك فعله بالفأرة يجب أن يعمل بلوحة المفاتيح وحدها (WCAG 2.1.1). اضغط Tab عبر الصفحة: يجب أن تصل إلى كل رابط وزر وحقل بترتيب منطقي، وأن ترى دائما مكان التركيز (2.4.7 Focus Visible). أضافت WCAG 2.2 أن العنصر المركّز يجب ألا يُخفى بالكامل خلف ترويسات ثابتة أو شرائط الكوكيز (2.4.11، المستوى AA).

من الأخطاء الشائعة: قوائم تفتح بالتحويم فقط، ونوافذ منبثقة لا تحصر التركيز أو لا يمكن إغلاقها بمفتاح Escape، وoutline: none في CSS دون بديل.

البدائل النصية

كل صورة ذات معنى تحتاج نصا بديلا يصف ما تعرضه في سياقها («الطاهٍ يقدم قائمة التذوق»، لا «image1.jpg»). الصور الزخرفية تحصل على alt="" فارغ حتى يتجاوزها قارئ الشاشة. أزرار الأيقونات فقط تحتاج إلى اسم يمكن الوصول إليه («إغلاق»، «بحث»). الفيديوهات تحتاج إلى ترجمة مكتوبة، والصوت يحتاج إلى نص مكتوب.

اللون والتباين

تشترط WCAG 2.2 المستوى AA نسبة تباين لا تقل عن 4.5:1 للنص العادي، و3:1 للنص الكبير (1.4.3)، و3:1 لأجزاء الواجهة مثل حدود الحقول والأيقونات ذات المعنى (1.4.11). ونص العنصر النائب الرمادي الفاتح والأزرار الباهتة هي الإخفاقات المعتادة. وكذلك لا تحمل اللون وحده معنى؛ فالحدود الحمراء لحقل غير صالح تحتاج إلى رسالة خطأ أيضا.

تغيير الحجم وإعادة التدفق

يجب أن يبقى النص قابلا للاستخدام عند التكبير إلى 200% (1.4.4)، ويجب أن يعمل المحتوى بعرض 320 بكسل دون تمرير أفقي (1.4.10). يحل التصميم المتجاوب معظم ذلك.

الأهداف والنماذج والأخطاء

• حجم الهدف: تشترط WCAG 2.2 المستوى AA أن تكون أهداف المؤشر 24 في 24 بكسل CSS على الأقل، أو مسافة كافية حول الأصغر منها (2.5.8). الأكبر أكثر راحة على الهواتف.
• النماذج: تسميات مرئية (لا نص placeholder فقط)، وتعليمات واضحة، ورسائل خطأ تقول ما الخطأ وكيف تصلحه، بجوار الحقل.
• تسجيل الدخول: لا تجعل الناس يحلون لغزا أو ينسخون رمزا دون بديل؛ واسمح بمديري كلمات المرور واللصق (3.3.8 Accessible Authentication).

أوامر تعمل جيدا

ابنِ هذا الموقع ليستوفي WCAG 2.2 من المستوى AA: معالم HTML دلالية، وعنوان h1 واحد لكل صفحة مع عناوين مرتبة، وعناصر أزرار وروابط حقيقية، وتسميات لكل حقل نموذج، وأنماط تركيز مرئية، وتباين نص لا يقل عن 4.5:1، ونص بديل للصور ذات المعنى وalt="" للزخرفية، وضبط html lang.

دقق صفحتي /signup و/checkout من ناحية الإتاحة. تحقق من الاستخدام بلوحة المفاتيح فقط، وترتيب التركيز، والتركيز المرئي، والتسميات، ورسائل الخطأ، والتباين، وأسماء أزرار الأيقونات لقارئ الشاشة. اذكر كل مشكلة مع معيار WCAG الخاص بها، ثم أصلحها دون تغيير التصميم البصري أكثر مما يلزم.

قائمة الجوال لا تعمل بلوحة المفاتيح. اجعلها زرا مع aria-expanded، وانقل التركيز إلى داخل القائمة عند فتحها، وأغلقها بمفتاح Escape وأعد التركيز إلى الزر.

خطوة بخطوة

1. شغّل فحصا آليا. قسم Accessibility في Lighthouse من أدوات مطور Chrome، أو إضافة axe للمتصفح، على كل صفحة رئيسية. أصلح كل ما يبلغ عنه.
2. افصل الفأرة. تنقل بـTab عبر كل صفحة، وأكمل كل مهمة رئيسية: التسجيل والبحث والدفع. دوّن أي شيء لا تصل إليه، أو لا ترى تركيزه، أو لا تستطيع الخروج منه.
3. كبّر إلى 200% وضيّق النافذة إلى عرض الهاتف. يجب ألا يُقطع شيء أو يحتاج إلى تمرير أفقي.
4. جرب قارئ الشاشة لعشر دقائق: VoiceOver على Mac وiPhone، وTalkBack على أندرويد، أو NVDA على ويندوز (مجاني). استمع إلى العناوين والروابط وحقول النماذج. الزر بلا اسم، أو «رابط، اضغط هنا»، يعني أن هناك عملا يجب إنجازه.
5. تحقق من التباين للنص والأزرار والحقول بأداة فحص التباين.
6. أصلح، ثم أعد الاختبار للمهام نفسها.
7. انشر بيان إتاحة يوضح المعيار الذي تستهدفه وكيف يُبلَّغ عن المشكلات، وأجب عن هذه البلاغات.

أخطاء شائعة

• الاعتماد على أداة تراكب (overlay) بدلا من إصلاح الكود.
• إزالة خطوط التركيز لأنها تبدو غير مرتبة، دون بديل.
• نص placeholder كتسمية وحيدة. يختفي عندما يبدأ الشخص الكتابة وغالبا ما يكون تباينه منخفضا.
• روابط «اضغط هنا» و«اقرأ المزيد». خارج سياقها يسمع مستخدمو قارئ الشاشة قائمة من الروابط المتطابقة.
• نص بديل مليء بالكلمات المفتاحية. النص البديل للناس؛ صف الصورة.
• الاختبار مرة واحدة. كل ميزة جديدة قد تكسر الوصول بلوحة المفاتيح. أضف مرور لوحة المفاتيح إلى اختبار ما قبل الإطلاق.

قائمة تحقق الإتاحة

• فحص آلي (Lighthouse أو axe) نظيف على الصفحات الرئيسية
• كل مهمة يمكن إنجازها بلوحة المفاتيح وحدها
• التركيز مرئي دائما وغير مخفي خلف عناصر ثابتة
• عناوين ومعالم وأزرار وروابط دلالية؛ وlang مضبوطة
• نص بديل ذو معنى؛ والصور الزخرفية alt=""؛ وترجمة مكتوبة للفيديو
• تباين النص 4.5:1 على الأقل (والنص الكبير 3:1)؛ وأجزاء الواجهة 3:1
• يعمل عند تكبير 200% وعرض 320 بكسل
• لكل حقل نموذج تسمية مرئية ورسائل خطأ واضحة
• بيان إتاحة مع طريقة للإبلاغ عن المشكلات

لمفاهيم هذا الموضوع، اقرأ ما هي إتاحة الويب. وتتداخل التصاميم المتاحة والتصاميم الجميلة كثيرا؛ ويغطي كيف تصمم تطبيقا جميلا بالذكاء الاصطناعي الجانب البصري.

الإتاحة في Mythex

يبني Mythex بالمعيار الذي تطلبه، لذا ضع «WCAG 2.2 AA» في أمرك الأول وفي المتابعات. يمكنك استخدام إطار حجم الهاتف في المعاينة لفحص الشاشات الصغيرة (المعاينة والكود)، لكن اختبارات لوحة المفاتيح والتكبير وقارئ الشاشة تعمل أفضل على الرابط المنشور أو على معاينة مفتوحة في تبويب خاص بها. اطلب من الوكيل تدقيق صفحة وإصلاح ما يجده، ثم اختبر الإصلاحات بنفسك؛ فالفحص الآلي بداية وليس اعتمادا نهائيا.

الأسئلة