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

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

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

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

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

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

يمكنك تطبيق CSS بطريقة مشابهة باستخدام setAttribute:

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

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

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

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

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

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

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

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

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

مستوى الصفحة

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

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

هناك عدة طرق لتحقيق ذلك:

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

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

إدارة الحالة

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

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

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

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

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

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

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

مستوى الصفحة

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

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

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

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

• React: react-aria-live و react-a11y-announcer
• Angular: LiveAnnouncer
• ‫Vue: vue-a11y-utils

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