مثال على بنية HTML:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Section 1 Title
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Content for section 1 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Section 2 Title
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Content for section 2 goes here.</p>
    </div>
  </div>
</div>

2. سمات ARIA للمحتوى الديناميكي

تعد أدوار وحالات ARIA ضرورية لإعلام التقنيات المساعدة بسلوك الأكورديون.

• `role="button"`: على العنصر التفاعلي (الزر) الذي يقوم بتبديل المحتوى.
• `aria-expanded`: يتم تعيينها إلى `true` عندما تكون لوحة المحتوى مرئية وإلى `false` عندما تكون مخفية. هذا يوصل الحالة مباشرة إلى قارئات الشاشة.
• `aria-controls`: على الزر، مع الإشارة إلى `id` لوحة المحتوى التي يتحكم فيها. هذا ينشئ رابطًا برمجيًا.
• `aria-labelledby`: على لوحة المحتوى، مع الإشارة إلى `id` الزر الذي يتحكم فيها. هذا ينشئ رابطًا ثنائي الاتجاه.
• `role="region"`: على لوحة المحتوى. يشير هذا إلى أن المحتوى قسم قابل للإدراك من الصفحة.
• `aria-hidden`: بينما يُفضل استخدام `aria-expanded` للتحكم في حالات الرؤية، يمكن استخدام `aria-hidden="true"` على لوحات المحتوى غير المعروضة حاليًا لمنع قارئات الشاشة من الإعلان عنها. ومع ذلك، فإن ضمان إخفاء المحتوى بشكل صحيح عبر CSS (`display: none;`) أو إزالته من شجرة الوصول هو أكثر متانة.

ملاحظة حول `aria-hidden` مقابل `display: none`: استخدام `display: none;` في CSS يزيل العنصر فعليًا من شجرة الوصول. إذا كنت تقوم بإظهار/إخفاء المحتوى ديناميكيًا باستخدام JavaScript بدون `display: none;`، فإن `aria-hidden` يصبح أكثر أهمية. ومع ذلك، فإن `display: none;` هو الطريقة المفضلة عمومًا لإخفاء لوحات المحتوى.

3. قابلية التشغيل بلوحة المفاتيح

تأكد من أن المستخدمين يمكنهم التفاعل مع الأكورديون باستخدام أوامر لوحة المفاتيح القياسية.

• التنقل باستخدام Tab: يجب أن تكون رؤوس الأكورديون قابلة للتركيز وتظهر في ترتيب التنقل الطبيعي للصفحة.
• التفعيل: يجب أن يؤدي الضغط على `Enter` أو `Spacebar` على رأس أكورديون مركز عليه إلى تبديل رؤية لوحة المحتوى الخاصة به.
• مفاتيح الأسهم (اختياري ولكن موصى به): للحصول على تجربة محسنة، فكر في تنفيذ التنقل بمفاتيح الأسهم:
  • `السهم لأسفل`: نقل التركيز إلى رأس الأكورديون التالي.
  • `السهم لأعلى`: نقل التركيز إلى رأس الأكورديون السابق.
  • `Home`: نقل التركيز إلى رأس الأكورديون الأول.
  • `End`: نقل التركيز إلى رأس الأكورديون الأخير.
  • `السهم لليمين` (أو `Enter`/`Space`): توسيع/طي عنصر الأكورديون الحالي.
  • `السهم لليسار` (أو `Enter`/`Space`): طي عنصر الأكورديون الحالي ونقل التركيز مرة أخرى إلى الرأس.

4. مؤشرات التركيز المرئية

عندما يتلقى رأس الأكورديون تركيز لوحة المفاتيح، يجب أن يكون له مؤشر مرئي واضح. غالبًا ما تكون مخططات التركيز الافتراضية للمتصفح كافية، ولكن تأكد من عدم إزالتها بواسطة CSS (على سبيل المثال، `outline: none;`) دون توفير نمط تركيز بديل وواضح للغاية.

مثال CSS للتركيز:

.accordion-button:focus {
  outline: 3px solid blue; /* أو لون يفي بمتطلبات التباين */
  outline-offset: 2px;
}

5. رؤية المحتوى وعرضه

• الحالة الافتراضية: قرر ما إذا كان يجب طي أقسام الأكورديون أو توسيعها افتراضيًا. بالنسبة للأسئلة الشائعة أو المعلومات الكثيفة، غالبًا ما يكون البدء مطويًا هو الأفضل. بالنسبة للتنقل أو ملخصات الميزات، قد يكون من المفيد توسيع قسم واحد افتراضيًا.
• إشارات مرئية: استخدم إشارات مرئية واضحة للإشارة إلى ما إذا كان القسم موسعًا أم مطويًا. قد يكون هذا رمزًا (على سبيل المثال، علامة '+' أو '-'، سهم لأعلى/لأسفل) يغير مظهره. تأكد من أن هذه الرموز يمكن الوصول إليها أيضًا (على سبيل المثال، عبر `aria-label` إذا لم يكن لديها نص).
• نسب التباين: تأكد من أن محتوى النص داخل الأكورديون، وأزرار التبديل، تفي بمتطلبات نسبة التباين في WCAG (4.5:1 للنص العادي، 3:1 للنص الكبير). هذا أمر حيوي للمستخدمين ذوي الرؤية المنخفضة.
• لا فقدان للمحتوى: عند توسيع قسم ما، تأكد من أن محتواه لا يتجاوز حاويته أو يحجب محتوى مهمًا آخر.

6. إدارة التركيز عند التبديل

هذا جانب أكثر تقدمًا ولكنه حاسم لتجربة سلسة.

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

يتضمن تنفيذ إدارة التركيز عادةً JavaScript لالتقاط التركيز وتعيينه برمجيًا.

تنفيذ أكورديون يمكن الوصول إليه باستخدام JavaScript

بينما يعد HTML الدلالي و ARIA هما الخطوتان الأوليان، غالبًا ما تكون JavaScript مطلوبة للتعامل مع التبديل الديناميكي وإدارة التركيز المحتملة. إليك نهج JavaScript مفاهيمي:

// Conceptual JavaScript for Accordion Functionality

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // Toggle aria-expanded state
      button.setAttribute('aria-expanded', !isExpanded);

      // Toggle content visibility (using CSS for accessibility)
      content.style.display = isExpanded ? 'none' : 'block'; // Or use a class toggle

      // Optional: Focus management on expand
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Optional: Keyboard navigation (arrow keys, etc.) would be implemented here as well.
  // For example, handling 'keydown' events.
});

// Initial setup: Hide content by default and set aria-expanded to false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Hide content initially
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

اعتبارات مهمة لـ JavaScript:

• CSS للإخفاء: من الأفضل استخدام CSS (على سبيل المثال، `display: none;` أو فئة تعين `height: 0; overflow: hidden;` لانتقالات أكثر سلاسة) لإخفاء المحتوى. هذا يضمن إزالة المحتوى من شجرة الوصول عندما لا يكون مرئيًا.
• التدهور التدريجي: تأكد من أنه حتى في حالة فشل تحميل أو تنفيذ JavaScript، يظل محتوى الأكورديون متاحًا (على الرغم من أنه قد لا يكون قابلاً للطي). يجب أن يوفر HTML الدلالي بعض البنية.
• الأطر والمكتبات: إذا كنت تستخدم أطر عمل JavaScript (React, Vue, Angular) أو مكتبات واجهة المستخدم، فتحقق من وثائق إمكانية الوصول الخاصة بها. يوفر الكثير منها مكونات أكورديون يمكن الوصول إليها بشكل جاهز أو بسمات محددة.

الاختبار من أجل إمكانية الوصول

الاختبار الشامل أمر حيوي لضمان أن عناصر الأكورديون الخاصة بك يمكن الوصول إليها حقًا.

• الأدوات الآلية: استخدم إضافات المتصفح (مثل Axe، WAVE) أو المدققات عبر الإنترنت لتحديد مشكلات إمكانية الوصول الشائعة.
• الاختبار بلوحة المفاتيح: تنقل وشغّل الأكورديون باستخدام لوحة المفاتيح فقط (Tab, Shift+Tab, Enter, Spacebar, مفاتيح الأسهم). تأكد من أن جميع العناصر التفاعلية يمكن الوصول إليها وتشغيلها.
• الاختبار بقارئ الشاشة: اختبر باستخدام قارئات الشاشة الشائعة (NVDA، JAWS، VoiceOver). استمع إلى كيفية الإعلان عن تغييرات بنية الأكورديون وحالته. هل هو منطقي؟ هل يتم نقل حالة `aria-expanded` بشكل صحيح؟
• اختبار المستخدم: إذا أمكن، أشرك المستخدمين ذوي الإعاقة في عملية الاختبار الخاصة بك. ملاحظاتهم لا تقدر بثمن لتحديد مشكلات قابلية الاستخدام في العالم الحقيقي.
• اختبار المتصفح والجهاز: اختبر عبر متصفحات وأجهزة مختلفة، حيث يمكن أن يختلف سلوك العرض و JavaScript.

وجهات نظر عالمية وتوطين

عند التصميم لجمهور عالمي، ضع في اعتبارك هذه العوامل:

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

أمثلة على أكورديون يمكن الوصول إليه

توضح العديد من المنظمات ذات السمعة الطيبة أنماط أكورديون يمكن الوصول إليها:

• نظام تصميم GOV.UK: غالبًا ما يتم الاستشهاد به لالتزامه بإمكانية الوصول، يوفر GOV.UK مكونات موثقة جيدًا، بما في ذلك الأكورديون، التي تلتزم بـ WCAG.
• وثائق MDN Web Docs: تقدم شبكة مطوري موزيلا أدلة وأمثلة مفصلة حول إنشاء عناصر واجهة مستخدم يمكن الوصول إليها، بما في ذلك الأكورديون، مع شروحات واضحة لاستخدام ARIA.
• أنظمة التصميم من شركات التكنولوجيا الكبرى: توفر شركات مثل Google (Material Design) و Microsoft (Fluent UI) و Apple مكونات نظام تصميم غالبًا ما تعطي الأولوية لإمكانية الوصول. يمكن أن يوفر الرجوع إلى هذه المكونات أنماط تنفيذ قوية.

الخاتمة

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

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