يعيش نحو واحد من كل ستة أشخاص في العالم مع إعاقة مؤثرة. على الويب، يعني هذا زوارا يستخدمون قارئات الشاشة، أو يتنقلون بلوحة المفاتيح وحدها، أو يكبرون الصفحة إلى 400 بالمئة، أو يعانون مع نص منخفض التباين. إمكانية الوصول، وتختصر a11y، هي ممارسة بناء مواقع يستطيع كل هؤلاء استخدامها.
الخبر السار: معظم إخفاقات إمكانية الوصول تأتي من مجموعة صغيرة من الأخطاء الشائعة، ولا يتطلب أي من إصلاحاتها موهبة خاصة. يغطي هذا الدليل مبادئ معيار WCAG، والإخفاقات التي تظهر في كل موقع تقريبا، وروتين اختبار يمكنك تنفيذه بلا أي ميزانية.
لماذا تستحق إمكانية الوصول وقتك؟
إلى جانب الحجة الأخلاقية، وهي حقيقية، هناك ثلاث حجج عملية:
- إنها مطلب قانوني في معظم العالم. قانون الأمريكيين ذوي الإعاقة في الولايات المتحدة، وقانون إمكانية الوصول الأوروبي، وقوانين مماثلة في أماكن أخرى تنطبق على المواقع بشكل متزايد. دعاوى إمكانية الوصول شائعة وتسوياتها مكلفة.
- تتداخل كثيرا مع السيو. تستهلك قارئات الشاشة وزواحف البحث البنية نفسها: الترويسات والنصوص البديلة وHTML الدلالي ونصوص الروابط. إصلاح أحدهما يحسن الآخر.
- تساعد الجميع. الترجمات النصية تخدم الجالسين في مقاه صاخبة. التباين العالي يخدم الهواتف تحت الشمس. دعم لوحة المفاتيح يخدم المستخدمين المحترفين. واللغة الواضحة تخدم المتعبين، أي كلنا.
فهم WCAG في خمس دقائق
إرشادات إمكانية الوصول لمحتوى الويب WCAG هي المعيار الدولي، ونسخته الحالية 2.2. ينظم المتطلبات تحت أربعة مبادئ:
- قابل للإدراك: يجب أن يتمكن المستخدمون من الإحساس بالمحتوى. الصور تحتاج بدائل نصية، والفيديوهات ترجمات، والنص تباينا كافيا.
- قابل للتشغيل: يجب أن يتمكن المستخدمون من تشغيل الواجهة. كل شيء يجب أن يعمل بلوحة المفاتيح، والأهداف يجب أن تكون قابلة للوصول، ولا شيء يحبس التركيز.
- قابل للفهم: يجب أن يكون المحتوى وعناصر التحكم مفهومة. تسميات واضحة وتنقل متوقع ورسائل خطأ مفيدة.
- متين: يجب أن يعمل المحتوى مع التقنيات المساعدة، ويعني هذا غالبا HTML صحيحا ودلاليا.
لكل متطلب مستوى مطابقة: A (الحد الأدنى) وAA (الهدف القياسي الذي تشير إليه معظم القوانين) وAAA (طموحي). استهدف AA. لا تحتاج لحفظ الوثيقة؛ فالإخفاقات أدناه تغطي الغالبية العظمى مما تجده التدقيقات.
الإخفاقات الثمانية الأشيع وإصلاحاتها
1. تباين ألوان غير كاف
الإخفاق الأول على الويب بلا منازع. النص الرمادي الفاتح على خلفية بيضاء يفشل باستمرار. يتطلب مستوى AA نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير (18 نقطة أو 14 نقطة عريضا فأكبر).
لا تحتاج للحساب: الصق لوني المقدمة والخلفية في فاحص تباين الألوان لدينا فيبلغ النسبة والنجاح أو الفشل لكل مستوى. افحص نص المتن، والنص الثانوي الباهت (المخالف المعتاد)، وألوان الروابط، ونص الأزرار.
2. نص بديل مفقود أو عديم الفائدة
كل صورة ذات معنى تحتاج خاصية alt تصف محتواها أو وظيفتها: alt="رسم بياني يظهر تضاعف المبيعات من 2024 إلى 2026" وليس alt="رسم" أو alt="image123.png". الصور الزخرفية البحتة تأخذ alt="" فارغا صراحة لتتجاوزها قارئات الشاشة. والصورة داخل رابط تأخذ غرض الرابط نصا بديلا: alt="العودة للرئيسية" بدل وصف شكل الشعار.
3. بنية ترويسات مكسورة
يتنقل مستخدمو قارئات الشاشة بالترويسات كما يمسح المبصرون الصفحة بأعينهم؛ والتسلسل المبعثر يشبه فهرسا مخلوطا. القواعد: ترويسة <h1> واحدة بالضبط لكل صفحة تصفها، والمستويات لا تقفز نزولا أبدا (قسم <h2> يحوي <h3> لا <h4> مباشرة)، والترويسات تُختار بالبنية لا لأن مستوى ما "يبدو بالحجم المناسب". نسق بـ CSS وابن الهيكل بمستويات الترويسات.
4. عناصر div و span تؤدي عمل الأزرار
عنصر <div onclick="..."> غير مرئي للوحات المفاتيح وقارئات الشاشة. الزر الحقيقي <button> قابل للتركيز، ويعلن نفسه زرا، ويتفعل بمفتاحي الإدخال والمسافة، كل ذلك مجانا. الأمر نفسه للروابط (<a href> للتنقل) وعناصر النماذج والمعالم (<nav> و<main> و<header> و<footer>). القاعدة الأولى في ARIA هي تفضيل عناصر HTML الأصلية على خصائص ARIA؛ والثانية أن ARIA الخاطئة أسوأ من غيابها.
5. مصائد التركيز وأنماط التركيز المفقودة
جرب استخدام موقعك بمفاتيح Tab وShift+Tab وEnter والمسافة والأسهم فقط. إخفاقان يظهران فورا في معظم المواقع. الأول: تركيز غير مرئي؛ أحدهم أزال إطار التركيز "القبيح" بـ outline: none فصار مستخدمو لوحة المفاتيح يتنقلون عميانا. استبدله بإطار :focus-visible منسق بدل حذفه. الثاني: مصائد التركيز وتجاوزاته؛ نوافذ منبثقة يهرب منها Tab (يجب أن يبقى التركيز داخلها حتى تُغلق)، أو قوائم منسدلة مخصصة يمر التركيز خلالها دون توقف.
6. حقول نماذج بلا تسميات
النص المؤقت داخل الحقل ليس تسمية: يختفي عند الكتابة، وتباينه منخفض، وقارئات الشاشة تعلنه بشكل متضارب. كل حقل يحتاج <label for="field-id"> حقيقية. ويجب ربط رسائل الخطأ بحقولها برمجيا (عبر aria-describedby) لا مجرد عرضها بالأحمر قربها، وألا تتواصل باللون وحده أبدا: "صحح الحقول المعلمة بالأحمر" تستبعد المصابين بعمى الألوان ومستخدمي قارئات الشاشة. قل أي الحقول وما الخطأ.
7. نصوص روابط بلا معنى خارج سياقها
كثيرا ما يستخرج مستخدمو قارئات الشاشة قائمة بكل روابط الصفحة. قائمة تقرأ "انقر هنا، انقر هنا، اقرأ المزيد، اقرأ المزيد" عديمة الفائدة. يجب أن يصف نص الرابط وجهته: "اقرأ تقرير إمكانية الوصول الكامل" بدل "انقر هنا". وهذا أيضا، وليس مصادفة، أفضل للسيو.
8. الحركة والتشغيل التلقائي والوميض
الفيديو الذي يعمل تلقائيا بالصوت، والشرائح الدوارة التي تدور أثناء قراءتها، وحركات البارالاكس تتراوح بين المزعجة والمؤذية جسديا (اضطرابات التوازن ومحفزات النوبات). احترم استعلام الوسائط prefers-reduced-motion، وأعط الشرائح أزرار إيقاف، ولا تجعل محتوى يومض أكثر من ثلاث مرات في الثانية أبدا.
روتين اختبار لا يكلف شيئا
لا تلتقط أداة واحدة كل شيء، لكن هذا الروتين ذا الأربع خطوات يلتقط معظم المشكلات:
الخطوة 1: فحص آلي (5 دقائق)
شغل Lighthouse (في أدوات مطور كروم، فئة إمكانية الوصول) أو إضافة axe DevTools على قوالبك الرئيسية. تلتقط الأدوات الآلية نحو ثلث المشكلات، ومنها إخفاقات التباين والنصوص البديلة والتسميات المفقودة وسوء استخدام ARIA. أصلح كل ما تبلغ عنه؛ فإنذاراتها الكاذبة تكاد تكون معدومة.
الخطوة 2: جولة بلوحة المفاتيح فقط (10 دقائق)
افصل فأرتك، مجازا. تنقل بـ Tab عبر كل صفحة رئيسية. هل ترى مكان التركيز في كل لحظة؟ هل تصل لكل عنصر تفاعلي؟ هل تشغل كل قائمة ونافذة ونموذج؟ هل تخرج من كل ما تدخله؟ سجل كل إخفاق؛ فكل واحد عائق حقيقي أمام شخص ما.
الخطوة 3: فحص سريع بقارئ شاشة (15 دقيقة)
يحتوي ويندوز على Narrator مدمجا وNVDA مجاني؛ وماك فيه VoiceOver (Cmd+F5). شغل أحدها، وأغمض عينيك إن استطعت، وحاول إتمام المهمة الرئيسية لموقعك، سواء قراءة مقال أو إرسال نموذج. المرة الأولى متواضعة وأكثر تعليما من أي مقال، بما فيه هذا.
الخطوة 4: التكبير وإعادة التدفق (5 دقائق)
كبر المتصفح إلى 200 بالمئة ثم 400 بالمئة. يجب أن يعيد المحتوى التدفق دون تمرير أفقي وألا يتراكب شيء أو يختفي. وهذا يؤدي أيضا دور فحص التصميم المتجاوب.
نفذ الروتين على القوالب الجديدة قبل الإطلاق، وفصليا على الصفحات المهمة. وإن كنت تهتم بوضوح الكتابة أيضا، تساعدك أداة درجة سهولة القراءة في مبدأ "قابل للفهم"؛ فالنص المعقد عائق وصول بحد ذاته، ويتضمن مستوى AAA إرشادات حول مستوى القراءة.
إدماجها في عمليتك
ترقيع إمكانية الوصول لاحقا مكلف؛ وبناؤها من البداية شبه مجاني. ثلاث عادات ترسخها:
- صمم بالتباين والحالات من البداية. افحص تباين اللوحة وقت التصميم (تغيير لوحة فاشلة أرخص قبل التنفيذ)، وصمم حالات التركيز والمرور والخطأ صراحة.
- استخدم HTML الدلالي افتراضيا. قاعدة كود تلجأ تلقائيا إلى
<button>و<nav>و<label>تبدأ وقد قطعت 80 بالمئة من الطريق إلى AA. - أضف فحوصات آلية إلى خط الدمج. أدوات مثل axe-core أو pa11y تعمل على طلبات الدمج وتوقف الانتكاسات قبل الاعتماد.
الخلاصة
إمكانية الوصول ليست تخصصا لا نهائيا لا يكتمل أبدا؛ إنها لمعظم المواقع ثمانية إخفاقات شائعة وروتين اختبار مجاني ومجموعة إعدادات افتراضية. أصلح التباين والنصوص البديلة والترويسات والدلالية ودعم لوحة المفاتيح والتسميات ونصوص الروابط والحركة، وستكون أكثر إتاحة من غالبية الويب. سيلاحظ زوارك ذوو الإعاقة ذلك، وكذلك ترتيبك في البحث، وانكشافك القانوني، وكل مستخدم حاول يوما استخدام موقعك بيد واحدة في يوم مشمس.