إمكانية الوصول في JavaScript: كيفية جعل موقعك الإلكتروني مناسبًا للجميع

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

إمكانية الوصول في JavaScript: كيفية جعل موقعك الإلكتروني مناسبًا للجميع

\n\n

تخيل أنك تزور موقعًا إلكترونيًا، وزر "شراء" لا يعمل بالماوس - فقط بلوحة المفاتيح. أو أنك لا ترى الشاشة، وقارئ الشاشة يتجاوز نصف المحتوى. أمر مزعج، أليس كذلك؟ ولكن بالنسبة لملايين الأشخاص، هذا هو واقعهم اليومي.

\n\n

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

\n\n

في هذه المقالة، سنستعرض أمثلة حقيقية بلغة JavaScript يمكنك تطبيقها اليوم. لا ماء - فقط كود وتطبيق عملي.

\n\n

لماذا إمكانية الوصول هي مسؤوليتك؟

\n\n

إذا كنت تكتب بلغة JavaScript، فأنت تتحكم في سلوك الواجهة. غالبًا ما يكون JS هو ما يكسر إمكانية الوصول: النوافذ المنبثقة الديناميكية، التمرير اللانهائي، القوائم المخصصة. قارئات الشاشة (برامج قراءة الشاشة) لا تستطيع قراءة أفكارك - إنها تقرأ ما تخبرها به عبر HTML و ARIA.

\n\n

الخبر الجيد: يمكن إصلاح معظم المشكلات في أمسية واحدة. الخبر السيئ: إذا لم تفكر في إمكانية الوصول منذ البداية، فستحتاج إلى إعادة الكتابة لأسابيع.

\n\n

سمات ARIA: أداتك الرئيسية

\n\n

ARIA (تطبيقات الإنترنت الغنية القابلة للوصول) هي مجموعة من السمات التي تساعد التقنيات المساعدة على فهم ما يحدث في الصفحة. JavaScript مثالية لتحديث هذه السمات ديناميكيًا.

\n\n

مثال 1: تحديث ديناميكي لـ aria-live

\n\n

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

\n\n

// إنشاء حاوية للإشعارات\nconst liveRegion = document.createElement('div');\nliveRegion.setAttribute('aria-live', 'polite');\nliveRegion.setAttribute('aria-atomic', 'true');\nliveRegion.classList.add('sr-only'); // إخفاء بصريًا\ndocument.body.appendChild(liveRegion);\n\n// دالة إضافة رسالة\nfunction addChatMessage(message) {\n  liveRegion.textContent = ''; // مسح\n  liveRegion.textContent = `رسالة جديدة: ${message}`;\n}\n\n// مثال على الاستدعاء\naddChatMessage('مرحبًا! كيف حالك؟');

\n\n

هام: aria-live="polite" يخبر قارئ الشاشة: "أعلن عندما تنتهي من قراءة المحتوى الحالي". aria-live="assertive" يقاطع القراءة - استخدمه للأخطاء الحرجة.

\n\n

مثال 2: سبويلر/أكورديون مخصص

\n\n

العناصر القياسية <details> و <summary> قابلة للوصول بالفعل، ولكن إذا كنت تصنع أكورديونًا مخصصًا باستخدام JS، فستحتاج إلى إضافة أدوار وحالات ARIA.

\n\n

// لكل قسم من الأكورديون\nconst accordionButton = document.querySelector('.accordion-button');\nconst accordionPanel = document.querySelector('.accordion-panel');\n\naccordionButton.setAttribute('aria-expanded', 'false');\naccordionButton.setAttribute('aria-controls', 'panel-1');\naccordionPanel.setAttribute('id', 'panel-1');\naccordionPanel.setAttribute('aria-hidden', 'true');\n\naccordionButton.addEventListener('click', () => {\n  const isOpen = accordionButton.getAttribute('aria-expanded') === 'true';\n  accordionButton.setAttribute('aria-expanded', !isOpen);\n  accordionPanel.setAttribute('aria-hidden', isOpen);\n});

\n\n

الآن يفهم قارئ الشاشة أن الزر يتحكم في اللوحة، ويعرف ما إذا كانت مفتوحة أم مغلقة.

\n\n

إدارة التركيز: لا تدع المستخدم يضيع

\n\n

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

\n\n