غالبًا ما يتم التعامل مع إمكانية الوصول (A11y) على أنها “من الجميل أن تمتلكها”. ليس كذلك.

المخاطر القانونية: ينطبق قانون الأمريكيين ذوي الإعاقة (ADA) على مواقع الويب. الدعاوى القضائية تصل إلى 300%
حجم السوق: 15% من سكان العالم من ذوي الإعاقة. هذه شريحة ضخمة من العملاء.
SEO: A11y وSEO يتداخلان بنسبة 90%. HTML الدلالي يفوز بكليهما. إذا قمت بحظر مستخدم كفيف، فإنك تحظر GoogleBot.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

نحن لا نفعل ذلك فقط من أجل الدعاوى القضائية. نحن نفعل ذلك لأن “الجنيه الأرجواني” (القوة الإنفاقية للأسر المعوقة) يساوي 274 مليار دولار في المملكة المتحدة وحدها. نحن نفعل ذلك لأن “تأثيرات القطع” موجودة. (تم عمل تخفيضات للكراسي المتحركة، لكنها تساعد عربات الأطفال وحقائب السفر). تم إنشاء التسميات التوضيحية للصم، ولكنها تساعد الأشخاص في مشاهدة مقاطع الفيديو في المترو. يعمل A11y على تحسين تجربة الجميع.

1. HTML الدلالي: الأساس

توقف عن استخدام <div> في كل شيء.

الزر: <button>، وليس <div onClick>.
العنوان: <h1>، وليس <div class="text-3xl">.
التنقل: <nav>، وليس <div>. تعتمد برامج قراءة الشاشة على هذه العلامات للتنقل. إذا كنت تستخدم زر div، فلن يتمكن المستخدم الكفيف من النقر عليه. لا يمكنهم النقر عليه. إنه جدار.

2. نمط “حلقة التركيز”.

المصممون يكرهون المخطط الأزرق: المخطط التفصيلي: لا شيء'. **لا تقم أبدًا بإزالة المخطط التفصيلي** إلا إذا قمت باستبداله. يعتمد مستخدمو لوحة المفاتيح (ذوو الإعاقة الحركية) على حلقة التركيز لمعرفة مكان تواجدهم. استخدم :focus-visible` لإظهاره فقط لمستخدمي لوحة المفاتيح، وليس لمستخدمي الماوس.

/* تجربة مستخدم جيدة */
زر: التركيز {
  الخطوط العريضة: لا شيء؛ /* إخفاء الافتراضي */
}

زر: التركيز مرئي {
  المخطط التفصيلي: 2px Solid var(-color-electric);
  إزاحة المخطط التفصيلي: 2 بكسل؛
}

3. تسميات ARIA (سد الفجوة)

عندما تفشل الإشارات المرئية، استخدم ARIA. مثال: أيقونة “X” لإغلاق نموذج. بصريا: إنه أمر واضح. بصوت مسموع: يقرأ “صورة”. إصلاح: <button aria-label="Close Modal">X</button>. القاعدة: استخدم لغة HTML الأصلية أولاً. استخدم ARIA فقط عندما لا يكون HTML كافيًا. لا تستخدم role="button" على div إذا كان بإمكانك استخدام <button>.

4. تباين الألوان (الفشل رقم 1)

يبدو النص الرمادي على خلفية رمادية فاتحة قليلاً “حديثًا”. إنه غير قابل للقراءة بالنسبة للمستخدمين ضعاف البصر (والأشخاص الذين ينظرون إلى هواتفهم في الشمس). أنت بحاجة إلى نسبة تباين 4.5:1 للنص الأساسي. استخدم “نظرة عامة على CSS” الخاصة بـ Chrome DevTools للتحقق من جميع الألوان. وأيضًا، دعم الوضع الداكن بشكل صحيح. يعد وضع التباين العالي أمرًا بالغ الأهمية لكبار السن.

5. الاختبار الآلي (خط الأنابيب)

نقوم بدمج Axe-core في عملية التطوير. لا يستطيع الإنسان أن يلتقط كل شيء.

الفحص: eslint-plugin-jsx-a11y يلتقط علامات alt المفقودة.
وقت التشغيل: يقوم @axe-core/react بتسجيل الأخطاء في وحدة التحكم أثناء التطوير.
CI/CD: يتم تشغيل Pa11y في خط الأنابيب. إذا انخفضت إمكانية الوصول إلى أقل من 90%، فسيفشل البناء.

# تشغيل Pa11y على CLI
npx pa11y https://maisoncode.paris

6. رابط “الانتقال إلى المحتوى”.

لا يرغب المستخدم الكفيف في الاستماع إلى القائمة الضخمة (50 رابطًا) عند كل تحميل للصفحة. أضف رابطًا مخفيًا في الأعلى: “انتقل إلى المحتوى الرئيسي”. يصبح مرئيا على التركيز. <a href="#main" class="sr-only focus:not-sr-only">انتقل إلى المحتوى</a> هذه هي السمة المميزة للموقع المهني.

7. حساسية الحركة (اضطرابات الدهليزي)

بعض الرسوم المتحركة تسبب الغثيان. احترم إعداد نظام التشغيل الخاص بالمستخدم: prefers-reduced-motion.

@media (يفضل الحركة المخفضة: تقليل) {
  * {
    مدة الرسوم المتحركة: 0.01 مللي ثانية! مهم؛
    مدة الانتقال: 0.01 مللي ثانية! مهم؛
  }
}

وإذا طلبوا السكون فامنحهم السكون.

8. اختبار قارئ الشاشة (يدويًا)

الأتمتة تكتشف 30% من الأخطاء. يجب عليك اختبار يدويا. قم بتشغيل VoiceOver (Mac) أو NVDA (Windows). أغمض عينيك. حاول شراء منتج على موقعك. إذا لم تستطع… فأنت مكسور. يغير تمرين التعاطف هذا كيفية البرمجة.

10. العبء المعرفي (التنوع العصبي)

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

الاتساق: يجب أن يكون التنقل في نفس المكان في كل صفحة.
الوضوح: لا يوجد مصطلحات. استخدم لغة واضحة.
الهدوء: تجنب تشغيل مقاطع الفيديو تلقائيًا. تجنب الأضواء الساطعة (خطر الصرع). الواجهة الهادئة هي واجهة عالية التحويل.

11. ثورة التحكم الصوتي (Siri / Dragon)

يستخدم المستخدمون الذين يعانون من إعاقات حركية التحكم الصوتي. “انقر فوق إضافة إلى سلة التسوق.” إذا تم ترميز الزر الخاص بك على أنه <div onClick=...>، فلن يتمكن برنامج الصوت من رؤيته. يبحث عن “الأزرار”. إذا كنت تستخدم لغة HTML الدلالية، فإن التحكم الصوتي يعمل بطريقة مبتكرة. “قم بالتمرير لأسفل. انقر فوق الخروج.” هذا هو مستقبل التجارة “بدون استخدام اليدين” (القيادة والطهي). يتيح A11y التجارة الصوتية.

12. إثبات التكبير/التصغير (ضعف الرؤية)

يقوم المستخدمون ضعاف البصر بالتكبير بنسبة 200% أو 400%. هل ينكسر تخطيطك؟ هل تتداخل الحروف؟ ** الطباعة السائلة **: استخدم وحدات rem، وليس px. حجم الخط: 1rem يحترم إعدادات متصفح المستخدم. حجم الخط: 16 بكسل يفرض الإعداد الخاص بك. اختبر موقعك بتكبير 200%. إذا اختفت القائمة، فقد فشلت.

13. دراسة الحالة القانونية (دومينوز)

في قضية روبلز ضد دومينوز بيتزا، رفضت المحكمة العليا التماس دومينوز. الحكم هو: ينطبق قانون ADA على العالم الرقمي. وقالت دومينوز: “لقد تمت كتابة القانون في عام 1990 قبل ظهور شبكة الإنترنت”. وقالت المحكمة: “القصد هو المساواة في الوصول. ولا يهم الوسيلة”. الدرس المستفاد: انتظار “قانون ويب” محدد هو استراتيجية خاسرة. الخطر بأثر رجعي. يمكن مقاضاتك اليوم بسبب موقع قمت بإنشائه منذ 3 سنوات. العلاج أغلى بـ 10 مرات من بنائه بشكل صحيح في المرة الأولى.

14. قائمة التدقيق (WCAG 2.1 AA)

لا تخمن. اتبع القائمة.

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

سوف يُحدث الذكاء الاصطناعي ثورة في إمكانية الوصول. نص بديل توليدي: يمكن لنماذج مثل GPT-4 Vision التعليق التلقائي لـ 10000 صورة في ساعة واحدة. التبسيط في الوقت الفعلي: يستطيع الذكاء الاصطناعي إعادة كتابة نص قانوني معقد إلى “لغة إنجليزية بسيطة” للمستخدمين ذوي الإعاقات الإدراكية. التنقل الصوتي: “أيها العميل، اشتر لي الحذاء الأحمر.” نحن نبني هذه الميزات اليوم. تنتقل إمكانية الوصول من “الامتثال” إلى “المساعدة”.

16. تجربة المطور (DX)

كتابة التعليمات البرمجية التي يمكن الوصول إليها هي تعليمات برمجية أنظف. تعتبر لغة HTML الدلالية أسهل في القراءة من حساء div. “الزر” أوضح من “div class = “btn"". يؤدي فرض A11y إلى تحسين صحة قاعدة التعليمات البرمجية. أنه يقلل من الديون الفنية. فهو يجعل تأهيل المطورين الجدد أسرع. DX جيد = تجربة مستخدم جيدة.

17. فخ مؤشر التبويب (لا تستخدم الأعداد الصحيحة الموجبة)

من الأخطاء الشائعة tabindex = "1". هذا يفرض النظام. إذا قمت بإعادة ترتيب DOM، فسوف ينقطع ترتيب علامات التبويب. القاعدة:

tabindex = "0": جعل div قابلاً للتركيز (بالترتيب الطبيعي).
tabindex="-1": اجعله قابلاً للتركيز برمجيًا (JS)، ولكن تخطيه عبر Tab.
tabindex="1": لا تستخدم هذا أبدًا. إنه يحارب المتصفح. دع DOM يملي الأمر.

18. متطلبات HTML الصالحة (التحليل)

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

19. تكلفة الصيانة (الرمز النظيف)

الكود الذي يمكن الوصول إليه أرخص في الصيانة. لماذا؟ لأنه يفرض البنية. إذا كنت تستخدم <div> في كل مكان، فسيصبح CSS الخاص بك كابوسًا للمحددات المتداخلة .card div divspan. إذا كنت تستخدم <article> <h1> <p>، فسيكون CSS الخاص بك بسيطًا. إنه يفصل الأسلوب عن الهيكل. وهذا يجعل إعادة البناء أكثر أمانًا. A11y هو من الناحية الفنية مقياس لجودة الكود. استثمر فيه.

20. الاستنتاج

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

هل تم رفع دعوى قضائية عليك مؤخرًا؟

نحن نقوم بتدقيق ومعالجة انتهاكات إمكانية الوصول.

تدقيق جهاز A11y الخاص بي. قم بتوظيف مهندسينا.