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

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

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

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

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

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

التدقيق اللغوي (Linting)

يوفر 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 عند العمل مع الرسوم المتحركة