JavaScript

تلعب لغة JavaScript دورًا رئيسيًا في كل ما نقوم بإنشائه تقريبًا - بدءًا من المكونات الديناميكية إلى المنتجات الكاملة التي تعمل على إطار عمل JavaScript، مثل رد الفعل أو Angular.

وقد أدى استخدام (أو الإفراط) في استخدام JavaScript إلى ظهور العديد من المؤشرات المثيرة للقلق، مثل طول وقت التحميل بسبب الكميات الكبيرة من الرموز، أو استخدام محتوى HTML غير دلالي ، وإدخال HTML وCSS من خلال JavaScript. وربما غير متأكد من مدى ملاءمة سهولة الوصول لكل جزء من هذه الأجزاء.

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

تحفيز الأحداث

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

لنلقِ نظرة على حدث ناتج عن النقر. إذا تم استخدام حدث onClick() على عنصر HTML دلالي، مثل <button> أو <a>، فهي تتضمّن بشكل طبيعي وظائف الماوس ولوحة المفاتيح. ومع ذلك، لا يتم تطبيق وظيفة لوحة المفاتيح تلقائيًا عند وقوع حدث onClick(). تتم إضافتها إلى عنصر غير دلالي، مثل عنصر <div> عام.

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

عايِن هذه المقارنة على CodePen.

إذا تم استخدام عنصر غير دلالي لحدث عامل تشغيل، فإن حدث keydown/keyup يجب إضافته لرصد الضغط على مفتاح Enter أو مفتاح المسافة. جارٍ إضافة الأحداث المشغِّلة إلى غالبًا ما يتم نسيان العناصر غير الدلالية. لسوء الحظ، عندما يتم نسيانه، فإن النتيجة هي مكون لا يمكن الوصول إليه إلا عن طريق الماوس. لوحة المفاتيح فقط ويتم ترك المستخدمين دون الوصول إلى الإجراءات المرتبطة.

عناوين الصفحات

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

إذا كنت تستخدم إطار عمل JavaScript، يجب أن تفكر في كيفية تعاملك مع صفحة العناوين. يعد ذلك مهمًا بشكل خاص تطبيقات الصفحة الواحدة (SPA) يتم تحميلها من ملف index.html فردي، في شكل انتقالات أو مسارات (صفحة التغييرات) على إعادة تحميل الصفحة. في كل مرة يحمّل فيها أحد المستخدمين صفحة جديدة في SPA، فلن يتغير العنوان افتراضيًا.

بالنسبة إلى SPA، يجب استخدام document.title يدويًا أو باستخدام حزمة مساعدة (اعتمادًا على إطار عمل JavaScript). الإعلان عن عناوين الصفحات المعدَّلة إلى مستخدم قارئ الشاشة إلى إجراء بعض الجهد الإضافي، ولكن الخبر السار تتوفّر لديك خيارات، مثل المحتوى الديناميكي.

محتوى ديناميكي

واحدة من أقوى وظائف JavaScript هي القدرة على إضافة رموز HTML وCSS على أي عنصر على الصفحة. يمكن للمطوّرين إنشاء تطبيقات ديناميكية. استنادًا إلى تصرفات أو سلوكيات المستخدمين.

لنفترض أنّك بحاجة إلى إرسال رسالة إلى المستخدمين عند تسجيل الدخول إلى موقعك الإلكتروني. أو التطبيق. ينبغي أن تكون الرسالة بارزة عن الخلفية البيضاء وتنقل الرسالة: "تم تسجيل دخولك الآن".

يمكنك استخدام العنصر innerHTML لضبط المحتوى:

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

يمكنك أيضًا تطبيق CSS بطريقة مماثلة، من خلال: setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

مع القوة الكبيرة تأتي المسؤولية العظيمة. للأسف، لغة JavaScript وقد تمت إساءة استخدام هجوم حقن HTML وCSS سابقًا لجعل الوصول غير قابل للوصول المحتوى. في ما يلي بعض حالات إساءة الاستخدام الشائعة:

بالنسبة إلى صفحات الأنماط المتتالية (CSS)، يمكنك تبديل فئات CSS بدلاً من ذلك مع إضافة أنماط مضمّنة، على النحو التالي: تسمح بإعادة الاستخدام والبساطة. استخدم المحتوى المخفي على الصفحة تبديل الفئات لإخفاء المحتوى وإظهاره في HTML الديناميكي. إذا كنت بحاجة إلى استخدام JavaScript لإضافة المحتوى ديناميكيًا إلى صفحتك، للتأكد من بساطته وموجزًا وبالطبع يمكن الوصول إليه.

إدارة التركيز

في وحدة تركيز لوحة المفاتيح، تناولنا التركيز أنماط الترتيب والمؤشر. إدارة التركيز هي معرفة متى وأين يجب الفخ محور التركيز ومتى ينبغي ألا يكون عالقًا.

إن التركيز على الإدارة أمر بالغ الأهمية لمستخدمي لوحة المفاتيح فقط.

مستوى المكوِّن

يمكنك إنشاء رموز تنبيه بلوحة المفاتيح عندما لا تتم إدارة تركيز أحد المكونات بشكل صحيح. يحدث مصيدة لوحة المفاتيح عندما يتعثر مستخدم لا يستخدم سوى لوحة المفاتيح في أحد المكوّنات، لا يتم الحفاظ على التركيز عندما ينبغي أن يكون.

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

مستوى الصفحة

ويجب أيضًا الحفاظ على التركيز عندما ينتقل المستخدم من صفحة إلى أخرى. هذا هو وخاصةً في منتجعات SPA، حيث توجد بدون إعادة تحميل المتصفّح، ويتغير كل المحتوى ديناميكيًا في أي وقت ينقر المستخدم على رابط للانتقال إلى صفحة أخرى داخل تطبيقك، إما أن يتم التركيز على أو من المحتمل وضعها في مكان آخر تمامًا.

عند الانتقال بين الصفحات (أو التوجيه)، على فريق التطوير تحديد حيث ينتقل التركيز عند تحميل الصفحة.

وهناك أساليب متعددة لتحقيق ذلك:

• يمكنك التركيز على الحاوية الرئيسية من خلال إشعار aria-live.
• يمكنك إعادة التركيز على رابط للانتقال إلى المحتوى الرئيسي.
• انقل التركيز إلى عنوان المستوى الأعلى للصفحة الجديدة.

سيعتمد المكان الذي تقرر التركيز فيه على إطار العمل الذي تستخدمه والمحتوى الذي تريد عرضه للمستخدمين قد يكون سياقًا أو تعتمد على الإجراء.

إدارة الدولة

هناك مجال آخر يكون فيه JavaScript مهمًا للوصول، وهو إدارة الحالة، أو عندما يتم نقل الحالة المرئية الحالية لأحد المكونات أو الصفحة إلى مستخدم تقنية مساعدة ضعاف البصر أو فاقدي أو أصم أو أصم.

وغالبًا، تتم إدارة حالة المكوِّن أو الصفحة من خلال سمات ARIA، مثل في وحدة ARIA وHTML في ما يلي بعض الأنواع الأكثر شيوعًا لسمات ARIA المستخدَمة للمساعدة في وإدارة حالة العنصر.

مستوى المكوِّن

اعتمادًا على محتوى صفحتك والمعلومات التي يحتاجها المستخدمون، هناك العديد من حالات ARIA التي يجب مراعاتها عند نقل معلومات حول مكون إلى المستخدم.

على سبيل المثال، يمكنك استخدام aria-expanded لإخبار المستخدم ما إذا كان قد تم توسيع القائمة المنسدلة أو القائمة أو تمّ التصغير.

أو يمكنك استخدام aria-pressed للإشارة إلى أنه قد تم الضغط على زر.

من المهم أن تكون انتقائيًا عند تطبيق سمات ARIA. فكر في تدفق المستخدم لفهم المعلومات الهامة التي يجب نقلها إلى المستخدم.

مستوى الصفحة

غالبًا ما يستخدم المطورون منطقة مخفية مرئيًا تسمى منطقة ARIA النشطة للإعلان عن التغييرات التي تظهر على الشاشة وتنبيه الرسائل إلى التكنولوجيا المساعِدة للمستخدمين. يمكن إقران هذه المنطقة بJavaScript لإعلام المستخدمين تغييرات على الصفحة بدون الحاجة إلى إعادة تحميلها بالكامل.

سابقًا، واجهت JavaScript صعوبة في الإعلان عن المحتوى في aria-live والمناطق التي يتم تنبيهها بسبب طبيعتها الديناميكية إضافة المحتوى بشكل غير متزامن إلى يجعل DOM من الصعب على AT اختيار المنطقة والإعلان عنها. لكي تتم قراءة المحتوى بشكل صحيح، يجب أن تكون المنطقة "مباشر" أو "تنبيه" داخل DOM عند التحميل، ثم يمكن تبديل النص ديناميكيًا.

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

في ما يلي بعض الحزم المباشرة لأُطر عمل JavaScript الشائعة:

• React: react-aria-live و معلِن React-a11y
• الزاوية: LiveAnnouncer
• المكان: vue-a11y-utils

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

التحقق من فهمك

اختبر معلوماتك حول JavaScript