Next.js/accessibility

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

الإعلان عن الوجهات

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

وتدعم Next.js إضافة إلى آليات التنقل الكلاسيكي بين الصفحات مبدأ التنقل في طرف العميل أيضًا لتحسين الأداء (باستخدام المكوّن next/link). ولكي تضمّن أن التقنيات المساعدة ستخبر المستخدم بتغير لصفحة، فقد أضافت Next.js معلنًا افتراضيًا عن الوجهات Route Announcer.

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

التدقيق

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

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

ستساعدك هذه الإضافة مثلًا للتأكد من إضافة سمة النص البديل alt لعنصر الصورة img، او استخدام سمات *-ariaالصحيحة، واستعمال السمات role بطريقة صحيحة وغيرها الكثير.

تعطيل جافاسكربت

تصيّر Next.js الصفحات افتراضيًا إلى ملفات HTML ساكنة. فلا حاجة إذًا إلى جافاسكربت لعرض صفحات HTML التي يرسلها الخام وتُستخدم فقط لإضافة مزيد من التفاعل من طرف العميل.

إن كنت ترى أنه من الأفضل تعطيل جافاسكربت في تطبيقك واستخدام HTML فقط، يمكنك إزالة جافاسكربت من التطبيق باستخدام الراية التجريبية التالية:

// next.config.js
export const config = {
  unstable_runtimeJS: false,
}

المصادر

• الصفحة Accessibility من توثيق Next.js الرسمي.