TypeScript وإمكانية الوصول: كيفية كتابة كود متاح للجميع

لماذا إمكانية الوصول ليست مجرد "علامات اختيار"، بل تتعلق بالأشخاص

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

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

TypeScript كدرع ضد أخطاء a11y

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

كتابة سمات ARIA

واحدة من أكثر المشاكل شيوعًا هي القيم غير الصحيحة لسمات ARIA. هل سبق لك أن كتبت role="button" على عنصر div؟ ثم نسيت إضافة tabindex؟ يمكن لـ TypeScript اكتشاف ذلك في مرحلة التجميع.

// سيء: لا حماية\nfunction createButton(label: string) {\n  return `<div role="button">${label}</div>`;\n}\n\n// جيد: كتابة ARIA\ntype AriaRole = 'button' | 'navigation' | 'alert' | 'dialog';\n\ninterface AriaAttributes {\n  role: AriaRole;\n  'aria-label'?: string;\n  'aria-expanded'?: boolean;\n  tabIndex?: number;\n}\n\nfunction createAccessibleButton(label: string, aria: AriaAttributes) {\n  // الآن سيتحقق TypeScript من أن الدور صالح\n  return {\n    tag: 'div',\n    attrs: aria,\n    content: label\n  };\n}\n\n// خطأ! 'btn' ليس ضمن نوع AriaRole\n// createAccessibleButton('اضغط علي', { role: 'btn' });

هل تشعر بالفرق؟ لن يسمح لك TypeScript بكتابة role="btutton" عن طريق الخطأ أو نسيان سمة إلزامية. إنه مثل مساعد شخصي يهمس: "مرحبًا، هل أنت متأكد أن هذا متاح؟"

التحقق الصارم من حالات التركيز

ألم آخر هو إدارة التركيز. خاصة في تطبيقات الصفحة الواحدة (SPA)، حيث لا يتم إعادة تحميل الصفحة. يساعد TypeScript في إنشاء أغلفة آمنة.

// تحديد العناصر التي يمكنها استقبال التركيز\ntype FocusableElement = HTMLInputElement | HTMLButtonElement | HTMLAnchorElement | HTMLSelectElement | HTMLTextAreaElement;\n\nfunction safelySetFocus(element: FocusableElement | null): void {\n  if (element && document.contains(element)) {\n    element.focus();\n  } else {\n    console.warn('العنصر غير موجود في DOM أو لا يمكنه استقبال التركيز');\n  }\n}\n\n// الاستخدام\nconst modal = document.querySelector('.modal__close-btn');\nsafelySetFocus(modal as FocusableElement | null);

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

بناء بنية مع a11y كأساس

الآن دعنا ننتقل إلى أشياء أكثر تقدمًا. كيف نجعل إمكانية الوصول جزءًا لا يتجزأ من بنية مشروعك، بدلاً من إضافتها "على عجل" قبل الإصدار؟

خصائص مكتوبة للمكونات

أنشئ واجهة أساسية لجميع مكوناتك. هذا مثل دستور لإمكانية الوصول.

// واجهة أساسية لجميع مكونات واجهة المستخدم\ninterface AccessibleComponentProps {\n  id?: string;\n  className?: string;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n  role?: string;\n  tabIndex?: number;\n  isDisabled?: boolean;\n  onClick?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n// مكون زر محدد\ninterface ButtonProps extends AccessibleComponentProps {\n  variant