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 واحد، لأنّ عمليات النقل أو المسارات (تغييرات الصفحة) لا تتطلّب إعادة تحميل الصفحة. في كل مرة يحمّل فيها المستخدم صفحة جديدة في تطبيق متعدّد الصفحات، لن يتغيّر العنوان تلقائيًا.

بالنسبة إلى تطبيقات المساحات الإعلانية المتجاوبة، يمكن إضافة قيمة 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;");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إدارة الحالة

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

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

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

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

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

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

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

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

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

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

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

في ما يلي بعض الحِزم النشطة لإطارات عمل JavaScript الشائعة:

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

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

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

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