تلعب 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 من أجل إنشاء محتوى يتعذّر الوصول إليه. في ما يلي بعض حالات إساءة الاستخدام الشائعة:
| إساءة الاستخدام المحتمَلة | الاستخدام الصحيح |
|---|---|
| عرض أجزاء كبيرة من رمز HTML غير الدلالي | عرض أجزاء أصغر من HTML الدلالي |
| عدم السماح بمرور الوقت الكافي للتكنولوجيا المساعِدة من أجل التعرّف على المحتوى الديناميكي | استخدام مهلة زمنية تبلغ setTimeout() للسماح للمستخدمين بسماع الرسالة الكاملة |
تطبيق سمات الأنماط على onFocus() ديناميكيًا |
استخدِم :focus للعناصر ذات الصلة في ورقة أنماط CSS. |
| قد يؤدي تطبيق الأنماط المضمّنة إلى عدم قراءة أوراق أنماط المستخدمين بشكل صحيح. | يجب إبقاء الأنماط في ملفات CSS للحفاظ على اتساق المظهر. |
| إنشاء ملفات JavaScript كبيرة جدًا تبطئ الأداء العام للموقع الإلكتروني | استخدام كمية أقل من JavaScript قد تتمكّن من تنفيذ وظائف مشابهة في 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
ما هي أفضل طريقة لتغيير نمط عنصر باستخدام JavaScript؟
هل يمكن لجميع إجراءات JavaScript أن تتيح استخدام لوحة المفاتيح؟