قبل عشر سنوات بدأت أتقاسم المكتب مع سمير، مطوّر backend كفيف يستخدم قارئ الشاشة NVDA. في أسبوعه الأول حاول حجز تذكرة قطار على موقع معروف. وصل إلى خريطة المقاعد، وهي شبكة من المربعات القابلة للنقر لم يُعلن قارئ الشاشة عنها شيئًا على الإطلاق، فاستسلم. اتصل بمركز خدمة العملاء ودفع رسوم حجز إضافية مقابل هذا «الامتياز». لم يكن مطوّرو ذلك الموقع أشخاصًا مهملين. لكنهم لم يشاهدوا قطّ شخصًا مثل سمير يستخدمه.
\nهذه الدورة عن سدّ تلك الفجوة، بالكود. لن تتعلّم قائمة قواعد تحفظها وتردّدها؛ بل ستتعلّم كيف يستخدم الأشخاص ذوو الإعاقة صفحة الويب فعلًا، وما الذي تحتاجه بالضبط من HTML وCSS وJavaScript وARIA لتعمل صفحاتك لهم.
\nتقدّر منظمة الصحة العالمية أن نحو 1.3 مليار شخص، أي قرابة واحد من كل ستة، يعيشون مع إعاقة ملموسة. هذا الرقم وحده يجعل إمكانية الوصول (accessibility) قضية عامة لا هامشية، لكنه يقلّل من عدد المستفيدين الحقيقي. فالإعاقة كثيرًا ما تكون مؤقتة أو ظرفية:
\nحين تصمّم للعمود الأيسر، يحصل أصحاب العمود الأيمن على الفائدة مجانًا. بُنيت الترجمة النصية المصاحبة للفيديو (captions) في الأصل للمشاهدين الصمّ؛ واليوم يُشاهَد جزء كبير من فيديو الشبكات الاجتماعية والصوت مكتوم.
\nتُجري WebAIM كل عام فحصًا آليًا للصفحات الرئيسية لأشهر مليون موقع. وجد فحص 2026 إخفاقات WCAG قابلة للرصد في 95.9% منها، بمتوسط 56 خطأً في الصفحة الواحدة. اللافت هو مدى عادية هذه الأخطاء. وتكاد ست فئات تستأثر بها كلها: نص منخفض التباين، وصور بلا نص بديل (alt text)، وحقول إدخال بلا labels، وروابط فارغة، وأزرار فارغة، وغياب لغة الصفحة. لا يحتاج أيٌّ منها إلى متخصّص. كلٌّ منها يُصلَح في دقائق بمجرد أن تعرف أين تنظر.
\nلاحظ أن كل واحد منها يعيش في كود الصفحة نفسها وأنماطها. لهذا لا تلجأ هذه الدورة أبدًا إلى زر لتفعيل «وضع إمكانية الوصول» أو إلى سكربت overlay من طرف ثالث: الوضع الثاني يتقادم مع الوقت، والصفحة الافتراضية، وهي التي يصل إليها معظم الأشخاص ذوي الإعاقة، تبقى معطوبة. أنت تُصلح المصدر، فيحصل كل مستخدم على الإصلاح.
\n\nعلى طول الدورة ستفحص Ticketly وتُصلحه، وهو موقع حجز من صفحة واحدة لمهرجان Harbour Lights، مهرجان موسيقي يقام في عطلة نهاية الأسبوع. يبدو Ticketly سليمًا حين تستخدمه بالفأرة. لكن تحت السطح توجد فيه مشكلات WebAIM الست الكلاسيكية كلها، إضافةً إلى منتقي مقاعد لا يستجيب إلا للنقر، ونافذة «احجز الآن» تترك تركيز لوحة المفاتيح خلفها في الصفحة، ورسائل خطأ تظهر بصمت، وعنوان فعالية بالعربية يُقرأ بصوت إنجليزي.
\nكل درس يتناول شريحة واحدة من Ticketly. القسم 2 يعيد بناء هيكله بـ HTML دلالي. القسم 3 يجعله قابلًا للتشغيل بالكامل من لوحة المفاتيح وقارئ الشاشة. القسم 4 يُصلح ما يراه الناس ويقرؤونه. القسم 5 يختبر النتيجة باستخدام axe ولوحة المفاتيح وVoiceOver وNVDA، ويحوّل الدروس إلى عادات لفريق كامل.
\nلكن قبل أن تغيّر سطرًا واحدًا من الكود، عليك أن تعرف ما الذي يستخدمه زوّار Ticketly للوصول إليه. يتناول الدرس التالي التقنيات المساعدة (assistive technology) وشجرة إمكانية الوصول (accessibility tree) التي تقرؤها.
\n","toc":[{"id":"sec-1","text":"لمن تبني","level":2},{"id":"sec-2","text":"حال الويب اليوم","level":2},{"id":"sec-3","text":"تعرّف إلى Ticketly","level":2}],"takeaways":["يعيش نحو 1.3 مليار شخص، أي قرابة واحد من كل ستة، مع إعاقة ملموسة، ويواجه كثيرون غيرهم قيودًا مؤقتة أو ظرفية.","تنقسم عوائق إمكانية الوصول إلى عائلات قليلة: الرؤية، والسمع، والحركة، والفهم أو التذكّر.","وجد تقرير WebAIM Million لعام 2026 إخفاقات WCAG قابلة للرصد في 95.9% من أشهر مليون صفحة رئيسية، معظمها في ست فئات بسيطة.","إمكانية الوصول صفة من صفات جودة الكود الذي تكتبه، مثل الأداء أو الأمان، وليست ميزة منفصلة تُركَّب في النهاية."],"further":[{"title":"W3C WAI: Introduction to Web Accessibility","url":"https://www.w3.org/WAI/fundamentals/accessibility-intro/"},{"title":"W3C WAI: How People with Disabilities Use the Web","url":"https://www.w3.org/WAI/people-use-web/"},{"title":"The WebAIM Million","url":"https://webaim.org/projects/million/"}],"quiz":[{"q":"سائق توصيل يقرأ Ticketly على هاتفه تحت شمس ساطعة ولا يكاد يرى الأسعار المكتوبة بالرمادي الفاتح. ما نوع هذا القيد؟
","options":[{"text":"قيد ظرفي يحلّه التباين الجيد للجميع","why":"صحيح. عينا السائق سليمتان؛ البيئة هي التي صنعت العائق، والحلّ نفسه (تباين أقوى) يفيد ضعاف البصر أيضًا."},{"text":"ليست مشكلة إمكانية وصول، لأن السائق ليس لديه إعاقة","why":"إمكانية الوصول تتعلّق بالعوائق في الواجهة، لا بالتشخيص الطبي. النص الرمادي يخذل الناس سواء كانت لديهم إعاقة أم لا."},{"text":"إعاقة بصرية دائمة تحتاج إلى قارئ شاشة","why":"لا شيء هنا دائم، وقارئ الشاشة أداة خاطئة لشخص يستطيع رؤية الشاشة بمجرد أن يتحسّن التباين."}],"answer":0},{"q":"بحسب تقرير WebAIM Million، أيّ مشكلة تظهر في أكبر عدد من الصفحات الرئيسية؟
","options":[{"text":"غياب لغة المستند","why":"هي ضمن الست الأوائل، لكنها تظهر في نحو 13.5% من الصفحات فقط، أقل بكثير من إخفاقات التباين."},{"text":"أزرار فارغة بلا اسم متاح (accessible name)","why":"الأزرار الفارغة شائعة (نحو 30.6%)، لكنها ليست الإخفاق الأكثر تكرارًا."},{"text":"نص منخفض التباين","why":"صحيح. ظهر التباين المنخفض في 83.9% من الصفحات الرئيسية التي فُحصت عام 2026، وهو الإخفاق الأكثر شيوعًا في كل سنة من سنوات الدراسة."},{"text":"مصائد لوحة المفاتيح في نوافذ الحوار","why":"مصائد لوحة المفاتيح خطيرة، لكن أدوات الفحص الآلي لا تستطيع رصدها بشكل موثوق، لذلك لا تُحسب في هذا الترتيب."}],"answer":2},{"q":"لماذا تُصلح هذه الدورة كود Ticketly بدلًا من إضافة زر لتفعيل «وضع إمكانية الوصول»؟
","options":[{"text":"لأن WCAG 2.2 تمنع أزرار التبديل","why":"لا توجد في WCAG قاعدة ضد أزرار التبديل. المشكلة أن الوضع المنفصل يتأخّر عادةً عن الموقع الأساسي ويترك التجربة الافتراضية معطوبة."},{"text":"لأن إمكانية الوصول تعيش في HTML وCSS وJavaScript نفسها التي يستخدمها الجميع، فإصلاح المصدر يفيد كل المستخدمين دفعة واحدة","why":"صحيح. الكود الدلالي والـ labels وإدارة التركيز خصائص في الصفحة نفسها؛ لا توجد صفحة ثانية لتصونها."},{"text":"لأن قارئات الشاشة تتجاهل JavaScript، فلن يعمل زر التبديل أبدًا","why":"تعمل قارئات الشاشة في متصفّحات عادية وJavaScript مفعّلة فيها. مشكلة الوضع المنفصل هي الصيانة والجودة، لا دعم السكربتات."}],"answer":1}],"exercise":null,"words":603,"readMinutes":4}