إمكانية الوصول

فريق Next.js ملتزم بجعل الإطار متاحًا لجميع المطورين (ومستخدميهم النهائيين). من خلال إضافة ميزات إمكانية الوصول إلى Next.js افتراضيًا، نهدف إلى جعل الويب أكثر شمولاً للجميع.

إعلانات المسار

عند الانتقال بين الصفحات المعروضة على الخادم (مثل استخدام وسم <a href>)، تقوم قارئات الشاشة وغيرها من التقنيات المساعدة بإعلان عنوان الصفحة عند تحميلها حتى يفهم المستخدمون أن الصفحة قد تغيرت.

بالإضافة إلى التنقل التقليدي بين الصفحات، يدعم Next.js أيضًا التحويلات من جانب العميل لتحسين الأداء (باستخدام next/link). لضمان إعلان تحويلات جانب العميل أيضًا لتقنيات المساعدة، يتضمن Next.js مُعلن مسار افتراضيًا.

يبحث مُعلن مسار Next.js عن اسم الصفحة للإعلان عنه عن طريق فحص document.title أولاً، ثم عنصر <h1>، وأخيرًا مسار URL. لتجربة المستخدم الأكثر سهولة، تأكد من أن كل صفحة في تطبيقك لها عنوان فريد ووصفي.

التدقيق اللغوي

يوفر Next.js تجربة ESLint متكاملة جاهزة للاستخدام، بما في ذلك قواعد مخصصة لـ Next.js. افتراضيًا، يتضمن Next.js eslint-plugin-jsx-a11y للمساعدة في اكتشاف مشكلات إمكانية الوصول مبكرًا، بما في ذلك التحذير من:

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

على سبيل المثال، تساعد هذه الإضافة في ضمان إضافة نص بديل لوسوم img، واستخدام سمات aria-* الصحيحة، واستخدام سمات role الصحيحة، والمزيد.

موارد إمكانية الوصول

• قائمة التحقق من WCAG من WebAIM
• إرشادات WCAG 2.2
• مشروع A11y
• تحقق من نسب تباين الألوان بين العناصر الأمامية والخلفية
• استخدم prefers-reduced-motion عند العمل مع الرسوم المتحركة