إمكانية الوصول في المواقع الإلكترونية: دليلك لتصميم موقع يناسب جميع المستخدمين

 

حين تبني موقعًا فأنت تتخيل مستخدمًا يرى الشاشة ويتحكم بالفأرة ويسمع الصوت، لكن بين المستخدمين من لا يرى جيدًا أو لا يسمع أو لا يستطيع استخدام الفأرة أو يعاني تشتتًا أو إصابة مؤقتة في اليد. وإمكانية الوصول تعني بناء الموقع بحيث يعمل مع هؤلاء جميعًا، وهو أيضًا يحسن التجربة للجميع. نعرض هنا الأساسيات العملية للمطور.

ما إمكانية الوصول ولماذا تهم؟

قبل التقنيات، افهم المبدأ وحجم الأثر:

• المفهوم: تصميم المحتوى والواجهات بحيث يستعملها أكبر عدد ممكن من الناس، بمن فيهم ذوو الإعاقات البصرية والسمعية والحركية والإدراكية.

• ليست حالة نادرة: الإعاقة جزء من التنوع البشري، وتشمل حالات مؤقتة (يد مكسورة) وموقفية (شمس ساطعة أو ضوضاء)، وتتزايد مع العمر. وتقدر منظمة الصحة العالمية أن نسبة معتبرة من سكان العالم يعيشون مع إعاقة، وتتفاوت الأرقام بحسب المصدر والتعريف.

• فائدة للجميع: الترجمة النصية تفيد في الضجيج، والتباين العالي يفيد في الشمس، والتنقل بلوحة المفاتيح يفيد المحترفين السريعين.

• السياق النظامي: في المملكة جهود وطنية لدعم إتاحة المحتوى الرقمي، وقد تفرض جهات حكومية معايير على مواقعها. وفي بلدان أخرى قوانين وقضايا بشأن المواقع غير الميسرة. فاطلع على المتطلبات التي تخص جهتك وسوقك.

• تحسين البحث: البنية الجيدة والنصوص البديلة تساعد محركات البحث على فهم صفحتك.

• المعيار المرجعي: إرشادات WCAG من اتحاد الشبكة العالمية (W3C)، ولها مستويات A وAA وAAA، وAA هو المستهدف الشائع. وتصدر بإصدارات، فراجع الحالي.

• المبادئ الأربعة: أن يكون المحتوى قابلًا للإدراك، وقابلًا للتشغيل، ومفهومًا، ومتينًا يعمل مع تقنيات مساعدة متنوعة.

كيف يساعدك HTML الدلالي؟

أكبر جزء من إمكانية الوصول يأتي مجانًا إن استعملت الوسوم الصحيحة:

• العناوين بترتيب هرمي: قارئات الشاشة تتيح التنقل بين العناوين، فاستعمل h1 إلى h6 بمعناها لا بحجمها.

• عناصر البنية: header وnav وmain وfooter تتيح تخطي أقسام والقفز إلى المحتوى الرئيسي مباشرة.

• الأزرار والروابط الحقيقية: وسم button للأفعال وa للتنقل، فتأتي بدعم لوحة المفاتيح والتركيز تلقائيًا. وdiv بنقرة لا يعمل بلوحة المفاتيح ولا تفهمه التقنيات المساعدة.

• القوائم والجداول الحقيقية: مع رؤوس الجداول (th) والتسميات التوضيحية حيث لزم.

• النماذج: اربط كل حقل بتسمية label صريحة. فالنص الإرشادي داخل الحقل ليس بديلًا عن التسمية.

• سمة اللغة والاتجاه: lang="ar" وdir="rtl" لتنطق القارئات بالصوت الصحيح وتعرض بالاتجاه الصحيح.

• عنوان الصفحة: وصف فريد لكل صفحة في title، فهو أول ما تقرؤه القارئات.

• قاعدة ARIA الأولى: لا تستعمل ARIA إن كان لديك وسم HTML أصلي يؤدي الغرض. فسمات ARIA الخاطئة أسوأ من غيابها.

كيف تجعل الموقع قابلًا للتشغيل بلوحة المفاتيح؟

كثيرون لا يستعملون الفأرة، من مستخدمي قارئات الشاشة إلى ذوي الإعاقات الحركية، وتجربتهم تبدأ من لوحة المفاتيح:

• اختبر بنفسك: افتح موقعك وضع الفأرة جانبًا، وتنقل بزر Tab وShift+Tab وEnter والمسافة والأسهم وEsc. هل تصل إلى كل شيء؟ وهل ترى أين أنت؟

• ظهور التركيز: لا تزل مخطط التركيز (outline) بلا بديل واضح. المستخدم يجب أن يرى أين هو. استعمل :focus-visible لنمط أنيق.

• ترتيب منطقي: ترتيب التبويب يتبع ترتيب القراءة المرئي. وتجنب tabindex بقيم موجبة، فهي تربك الترتيب.

• لا فخاخ للوحة المفاتيح: النوافذ المنبثقة يجب أن تحبس التركيز داخلها مؤقتًا وتعيده إلى مصدرها عند الإغلاق، وتغلق بـ Esc.

• تخطي المحتوى المتكرر: رابط «تخطَّ إلى المحتوى» في أول الصفحة يوفر على المستخدم المرور على القائمة في كل صفحة.

• العناصر المخصصة: إن بنيت مكونًا خاصًا كقائمة منسدلة أو تبويبات، فاتبع أنماط ARIA الموثقة في «ARIA Authoring Practices» لسلوك لوحة المفاتيح والأدوار.

• المحتوى الذي يظهر بالمرور: يجب أن يكون متاحًا أيضًا بالتركيز وباللمس.

• المهل الزمنية: لا تنتهِ جلسة أو تتغير الصفحة بسرعة تفاجئ من يحتاج وقتًا أطول، وأتح تمديدها.

كيف تعالج الألوان والنصوص والوسائط؟

الجانب البصري والسمعي له قواعده:

• التباين: نسبة التباين بين النص والخلفية بحد أدنى 4.5 إلى 1 للنص العادي، و3 إلى 1 للنص الكبير، بحسب مستوى AA في WCAG. وأدوات فحص التباين متوفرة في المتصفحات.

• لا تعتمد على اللون وحده: للدلالة على خطأ أو حالة أو رابط. أضف أيقونة أو نصًا أو تسطيرًا، لمن لا يميزون الألوان.

• النصوص البديلة للصور: صف وظيفة الصورة لا مظهرها فقط، والصور الزخرفية تُعطى alt="" لتتجاهلها القارئات. والصور التي فيها نص يجب أن يتضمن بديلها النص نفسه.

• الفيديو: ترجمات نصية (Captions) للمحتوى المنطوق، وأوصاف صوتية حيث لزم، وأزرار تحكم متاحة بلوحة المفاتيح.

• الصوت: نص مكتوب (Transcript) للبودكاست والمقاطع الصوتية.

• عدم التشغيل التلقائي: للصوت والفيديو والحركات المزعجة، وأتح إيقافها.

• الحركة: احترم تفضيل المستخدم لتقليل الحركة (prefers-reduced-motion)، وتجنب الومضات التي قد تسبب نوبات.

• تكبير النص: يجب أن يعمل الموقع عند تكبير الخط أو التقريب إلى 200% دون فقدان محتوى أو تمرير أفقي مزعج. استعمل وحدات نسبية.

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

كيف تعمل مع قارئات الشاشة والتقنيات المساعدة؟

لن تفهم التجربة قبل أن تجربها بنفسك:

• جرّب قارئات الشاشة: NVDA مجاني على ويندوز، وVoiceOver مدمج في ماك وآيفون، وTalkBack في أندرويد. أغمض عينيك واستمع إلى صفحتك لدقائق، وستكتشف مشكلات مفاجئة.

• أسماء العناصر: كل زر وأيقونة يجب أن يكون له اسم يقرؤه القارئ. زر بأيقونة فقط يحتاج aria-label أو نصًا مخفيًا بصريًا.

• التحديثات الديناميكية: حين يتغير المحتوى بلا إعادة تحميل (رسالة خطأ، نتيجة بحث) استعمل مناطق حية (aria-live) لإبلاغ القارئ.

• حالة العناصر: مثل aria-expanded للقوائم القابلة للطي، وaria-current للصفحة الحالية، وتحديثها عند تغير الحالة.

• الأخطاء في النماذج: اربط الرسالة بالحقل (aria-describedby)، وانقل التركيز إلى أول خطأ، وقل ما المطلوب.

• الجوال: اختبر على قارئات الجوال، وتأكد من حجم مساحة اللمس المريح وعدم الاعتماد على الإيماءات المعقدة وحدها.

• أدوات داعمة: تكبير الشاشة، والتحكم الصوتي، ولوحات مفاتيح بديلة، وتخصيص الألوان. موقع ببنية سليمة يعمل معها غالبًا.

• لا تفترض قدرات المستخدم: استمع إلى أصحاب التجربة الفعلية. وحيث أمكن، أشرك مستخدمين من ذوي الإعاقة في الاختبار.

كيف تختبر وتدمج الوصول في عملك؟

الاختبار الآلي يكشف جزءًا فقط، فاجمع الأساليب:

• الأدوات الآلية: مثل axe DevTools وLighthouse وWAVE، تكتشف مشكلات شائعة كنقص النص البديل وضعف التباين. لكنها تكشف نسبة فقط من المشكلات، وليس كلها، فلا تعتبر اجتيازها شهادة سلامة.

• الاختبار اليدوي: لوحة المفاتيح وقارئ الشاشة والتكبير. أبقِ قائمة تحقق قصيرة تجرب بها كل ميزة جديدة.

• اختبارات آلية في خط البناء: مكتبات مثل jest-axe أو أدوات Playwright تمنع انحدارات واضحة.

• من البداية: أرخص من الإصلاح بعد البناء. اجعل الوصول جزءًا من التصميم ومعايير القبول.

• نظام التصميم: مكونات مُختبرة ميسرة تعيد استعمالها بدل بناء كل شيء من جديد.

• بيان الإتاحة: صفحة تصف مستوى الالتزام وطرق التواصل لتقديم ملاحظات، تبني الثقة وتفتح قناة لتحسينك.

• التدريب: المصممون والكتّاب والمختبرون يشاركون في الوصول، لا المطورون وحدهم.

• التحسين التدريجي: إن كان موقعك قائمًا فابدأ بأعلى الصفحات استعمالًا وأهم المسارات (التسجيل، الدفع)، ثم وسّع.

أسئلة شائعة عن إمكانية الوصول

هل يزيد الوصول التكلفة كثيرًا؟

أقل مما يظن كثيرون إن بدأت من البداية بالوسوم الصحيحة. التكلفة الكبيرة تأتي من الإصلاح المتأخر لموقع بُني دون اعتبار لها.

هل يكفي إضافة أداة جاهزة للوصول (Overlay)؟

لا. الأدوات التي تعد بإصلاح فوري بسطر سكربت لا تحل المشكلات البنيوية، وقد تتعارض مع التقنيات المساعدة، وتنتقدها منظمات المستخدمين المعنية. الإصلاح الحقيقي في الكود والتصميم.

من أين أبدأ اليوم؟

اختبر صفحتك الرئيسة بلوحة المفاتيح، وشغّل Lighthouse أو axe، وأصلح الأخطاء الواضحة: النصوص البديلة والتباين والتسميات والعناوين.