JavaScript

تؤدي لغة JavaScript دورًا رئيسيًا في كل ما ننشئه تقريبًا، بدءًا من المكونات الديناميكية الأصغر حجمًا ووصولاً إلى المنتجات الكاملة التي يتم تشغيلها باستخدام إطار عمل JavaScript، مثل React أو 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). قد يستغرق الإعلان عن عناوين الصفحات المعدَّلة لمستخدم قارئ الشاشة بعض الإجراءات الإضافية، ولكن الخبر السار هو أنّ لديك خيارات، مثل المحتوى الديناميكي.

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

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

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

يمكنك استخدام العنصر 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 ضرورية لربط هذا التركيز بشكل صحيح.

على مستوى الصفحة

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

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

تتوفّر عدّة أساليب لتحقيق ذلك:

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

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

إدارة الدولة

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

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

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

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

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

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

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

على مستوى الصفحة

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

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

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

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

• التفاعل: react-aria-live و react-a11y-anunccer
• ساعة زاوية: LiveAnnouncer
• Vue: vue-a11y-utils

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

التحقّق من استيعابك

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