كيف تحسّن إمكانية الوصول في موقعك: دليل عملي

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

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

ابدأ بفحص آلي، ثم اختبر يدويًا

الفحص الآلي أسرع طريقة لاكتشاف المشكلات الواضحة. يحمّل فاحص إمكانية الوصول المجاني من Rudra صفحتك في متصفح حقيقي ويشغّل axe-core، محرّك الاختبار مفتوح المصدر الواسع الانتشار. ويسرد كل قاعدة أخفقت، وعدد العناصر المتأثرة، ومدى خطورة الأثر: نص بديل مفقود، حقول نماذج بلا تسميات، تباين غير كافٍ، لغة صفحة غير محدَّدة، أزرار وروابط فارغة، وغير ذلك.

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

1. أعطِ الصور بدائل نصية ذات معنى

كل وسم <img> يحتاج إلى خاصية alt. في الصور التي تحمل معلومة، صِف ما تنقله الصورة في سياقها لا ما تُظهره فحسب: alt="Line chart: sign-ups doubled after the March redesign" أنفع من alt="chart". وفي الصور الزخرفية البحتة استخدم alt="" فارغة لتتجاوزها قارئات الشاشة. وإذا كانت الصورة رابطًا أو زرًّا فصِف الإجراء («بحث»، «تنزيل التقرير»). أما الرسوم البيانية المعقّدة فتحتاج كذلك إلى عرض بياناتها الأساسية في نص مجاور أو في جدول.

2. ضع تسمية لكل حقل في النماذج

كل حقل إدخال يحتاج إلى تسمية ظاهرة مرتبطة به في الشيفرة: <label for="email">Email address</label> يليها <input id="email" type="email" autocomplete="email">. النص النائب (placeholder) ليس تسمية؛ فهو يختفي ما إن يبدأ المستخدم بالكتابة، وتباينه ضعيف في الغالب. اعرض الأخطاء نصًّا بجوار الحقل (لا بإطار أحمر فقط)، واشرح كيف تُصحَّح، واربطها بالحقل عبر aria-describedby.

3. اضبط تباين الألوان

• النص العادي: نسبة تباين لا تقل عن 4.5:1 مع خلفيته (WCAG 1.4.3، المستوى AA).
• النص الكبير (24 بكسل على الأقل، أو نحو 18.7 بكسل إذا كان عريضًا): 3:1 على الأقل.
• مكوّنات الواجهة والرسوم ذات الدلالة، مثل حدود حقول الإدخال ومؤشرات التركيز والأيقونات التي تحمل معنى: 3:1 على الأقل مع الألوان المجاورة (WCAG 1.4.11).
• لا تعتمد على اللون وحده (WCAG 1.4.1). ينبغي أن يتميّز الرابط داخل الفقرة بشيء آخر غير لونه، وهو التسطير في العادة، وألّا يُشار إلى الخطأ بالأحمر فقط.

تعرض أدوات المطوّرين في المتصفح نسبة التباين عند فحص عنصر نصي، فتستطيع التحقق من الألوان وتعديلها في أثناء العمل. وانتبه خصوصًا للنص الرمادي الفاتح، والنص فوق الصور، والنص النائب.

4. اجعل كل شيء يعمل بلوحة المفاتيح

كل ما يمكن فعله بالفأرة يجب أن يكون ممكنًا بمفاتيح Tab و Shift+Tab و Enter و Space ومفاتيح الأسهم و Escape. استخدم عناصر <button> و <a href> الحقيقية بدلًا من عناصر <div> القابلة للنقر، فهذه لا تستقبل التركيز ولا تُفعَّل بلوحة المفاتيح دون عمل إضافي. لا تُزل إطار التركيز أبدًا دون أن توفّر بديلًا واضحًا للعين؛ و :focus-visible يتيح لك تنسيقه لمستخدمي لوحة المفاتيح وحدهم. تأكد من أن الترويسة الثابتة أو شريط ملفات تعريف الارتباط لا يحجب العنصر الذي عليه التركيز (معيار جديد في WCAG 2.2، رقمه 2.4.11)، ومن أن مربعات الحوار تحبس التركيز داخلها ما دامت مفتوحة وتعيده عند إغلاقها، وأضف رابط «تخطَّ إلى المحتوى الرئيسي» في أعلى الصفحة.

5. نظّم الصفحات بالعناوين والمعالم

كثيرًا ما يتنقل مستخدمو قارئات الشاشة بالقفز بين العناوين. استخدم <h1> واحدًا يصف الصفحة، ثم <h2> و <h3> بترتيب منطقي، واختر مستويات العناوين من أجل البنية لا من أجل حجم خطها. وضَع مناطق الصفحة داخل <header> و <nav> و <main> و <footer> ليتمكن الناس من القفز مباشرةً إلى المحتوى.

6. حدّد لغة الصفحة وضع لها عنوانًا فريدًا

<html lang="en"> (أو لغة موقعك) يخبر قارئات الشاشة كيف تنطق النص. ووسم <title> الفريد المعبّر هو أول ما يُعلَن عند فتح الصفحة، وهو ما يميّزها بين علامات التبويب في المتصفح.

7. اكتب روابط وأزرارًا مفهومة بذاتها

يستطيع مستخدمو قارئات الشاشة سرد جميع روابط الصفحة، وعندئذ لا يكون لعبارتَي «انقر هنا» و«اقرأ المزيد» المكرَّرتين عشر مرات أي معنى. استخدم نصًّا مثل «اقرأ دليل الأسعار». والأزرار المكوّنة من أيقونة فقط، كالعدسة المكبّرة أو علامة الإغلاق «×»، تحتاج إلى اسم يمكن الوصول إليه: <button aria-label="Close">.

8. اجعل الأهداف كبيرة بما يكفي لإصابتها

أضافت WCAG 2.2 متطلبًا من المستوى AA (2.5.8) يقضي بأن تكون أهداف المؤشر 24 × 24 بكسل CSS على الأقل، أو أن تتباعد بحيث لا تتداخل دائرة قطرها 24 بكسل حول كل هدف مع هدف آخر. والأهداف الأكبر، نحو 44 × 44 بكسل (إرشاد المستوى AAA)، أفضل من ذلك على شاشات اللمس.

9. ادعم التكبير وإعادة انسياب المحتوى

لا تعطّل التكبير أبدًا بـ user-scalable=no أو maximum-scale=1. ينبغي أن ينساب المحتوى في عمود واحد دون تمرير أفقي عند عرض 320 بكسل CSS، وهو ما ينتج عن تكبير بنسبة 400% على شاشة سطح مكتب اعتيادية (WCAG 1.4.10). والتخطيط المتجاوب يقطع بك معظم الطريق؛ راجع كيف تجعل موقعك متوافقًا مع الجوال.

10. تعامل بعناية مع الوسائط والحركة

وفّر ترجمة نصية للفيديو ونصوصًا مكتوبة للتسجيلات الصوتية. لا تشغّل الصوت تلقائيًا. أعطِ عروض الشرائح والحركات زر إيقاف مؤقت، واحترم استعلام الوسائط prefers-reduced-motion بتقليل الحركة غير الضرورية أو إزالتها لمن طلب ذلك.

11. فضّل HTML الأصلي على ARIA

خصائص ARIA تغيّر ما تعلنه التقنيات المساعدة، لا طريقة تصرّف العنصر. فعنصر <div role="button"> يبقى محتاجًا إلى معالجة لوحة المفاتيح التي عليك كتابتها بنفسك؛ أما <button> فهي مدمجة فيه. استخدم العناصر الأصلية كلما أمكن، ولا تضف ARIA إلا حين لا يكون في HTML ما يقابلها، متّبعًا الأنماط الواردة في دليل ARIA Authoring Practices Guide الصادر عن W3C.

اختبار يدوي في 15 دقيقة

1. افصل الفأرة. تنقّل في الصفحة بمفتاح Tab من أعلاها. هل ترى موضع التركيز في كل خطوة؟ هل تستطيع بلوغ كل رابط وزر وقائمة وحقل نموذج وتشغيله؟ هل تستطيع إغلاق النوافذ المنبثقة بمفتاح Escape؟
2. كبّر إلى 200%، ثم إلى 400%. هل ينساب النص من جديد، أم تضطر إلى التمرير أفقيًا؟ هل يتداخل شيء أو يختفي؟
3. جرّب قارئ شاشة لبضع دقائق: NVDA (مجاني، على Windows)، أو VoiceOver (مدمج في macOS و iOS)، أو TalkBack (على Android). اسرد العناوين والروابط، واملأ نموذجًا. هل يُعلَن كل شيء بوضوح؟
4. افحص الصور. اقرأ النص البديل (يعرضه قارئ الشاشة، أو فاحص إمكانية الوصول في متصفحك). هل يصف ما يهمّ؟
5. انظر إلى الصفحة بتدرّج الرمادي (في معظم أنظمة التشغيل إعداد لفلتر الألوان). هل ثمة معلومة لا يوصلها إلا اللون؟

اجعل إمكانية الوصول جزءًا من سير العمل

• أصلح المشكلات في المكوّنات والقوالب المشتركة أولًا؛ فإصلاح ترويسة واحدة أو مكوّن نموذج واحد يصلح كل صفحة تستخدمه.
• أضف فحوصًا آلية إلى مسار التطوير لديك، كتشغيل axe-core مع اختباراتك الشاملة (end-to-end)، لتُكتشف التراجعات قبل الإصدار.
• أدرج فحوص لوحة المفاتيح والتباين ضمن معايير اكتمال الميزات الجديدة.
• انشر بيانًا لإمكانية الوصول فيه وسيلة يبلّغ بها الناس عن العوائق، واستجب لما يخبرونك به.

أخطاء شائعة

• الاعتماد على أداة تراكب (overlay) لإصلاح إمكانية الوصول. فالسكربت المضاف فوق الصفحة لا يستطيع إصلاح الترميز الذي تحته، وكثير من المستخدمين ذوي الإعاقة يفيدون بأن هذه الأدوات تعترض طريقهم.
• حشو النص البديل بالكلمات المفتاحية، أو بدؤه بعبارة «صورة لـ» (فقارئات الشاشة تعلن أصلًا أنها صورة).
• استخدام النص النائب بدلًا من التسميات.
• إزالة إطارات التركيز لأسباب جمالية.
• إضافة aria-label إلى كل شيء، بما يطغى أحيانًا على نص ظاهر سليم تمامًا.
• اعتبار التقرير الآلي النظيف دليلًا على أن الموقع سهل الوصول.