HTML Tuzilmasi Misoli:

<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. Dinamik Kontent uchun ARIA Atributlari

ARIA rollari va holatlari yordamchi texnologiyalarni akkordeonning xatti-harakatlari haqida xabardor qilish uchun juda muhimdir.

• `role="button"`: Kontentni almashtiradigan interaktiv elementda (tugmada).
• `aria-expanded`: Kontent paneli ko‘rinadigan bo‘lganda `true` va yashiringanda `false` ga o‘rnatiladi. Bu holatni to‘g‘ridan-to‘g‘ri ekran o‘quvchilariga yetkazadi.
• `aria-controls`: Tugmada, u boshqaradigan kontent panelining `id` siga ishora qiladi. Bu dasturiy aloqani o‘rnatadi.
• `aria-labelledby`: Kontent panelida, uni boshqaradigan tugmaning `id` siga ishora qiladi. Bu ikki tomonlama aloqani yaratadi.
• `role="region"`: Kontent panelida. Bu kontentning sahifaning idrok etiladigan qismi ekanligini ko‘rsatadi.
• `aria-hidden`: Ko‘rinish holatlarini boshqarish uchun `aria-expanded` afzal ko‘rilsa-da, hozirda ko‘rsatilmayotgan kontent panellarida ularni ekran o‘quvchilari tomonidan e'lon qilinishining oldini olish uchun `aria-hidden="true"` dan foydalanish mumkin. Biroq, kontentning CSS (`display: none;`) orqali to‘g‘ri yashirilganligini yoki foydalanish imkoniyati daraxtidan olib tashlanganligini ta'minlash yanada ishonchliroqdir.

`aria-hidden` va `display: none` haqida eslatma: CSS'da `display: none;` dan foydalanish elementni foydalanish imkoniyati daraxtidan samarali ravishda olib tashlaydi. Agar siz kontentni `display: none;` ishlatmasdan JavaScript yordamida dinamik ravishda ko‘rsatayotgan/yashirayotgan bo‘lsangiz, `aria-hidden` muhimroq bo‘ladi. Biroq, `display: none;` odatda kontent panellarini yashirishning afzal usuli hisoblanadi.

3. Klaviatura orqali Ishlash Imkoniyati

Foydalanuvchilarning standart klaviatura buyruqlari yordamida akkordeon bilan o‘zaro aloqada bo‘lishini ta'minlang.

• Tab orqali Navigatsiya: Akkordeon sarlavhalari fokuslanadigan bo‘lishi va sahifaning tabiiy tab tartibida paydo bo‘lishi kerak.
• Aktivlashtirish: Fokuslangan akkordeon sarlavhasida `Enter` yoki `Probel` tugmalarini bosish uning kontent panelining ko‘rinishini almashtirishi kerak.
• Strelka Tugmalari (Ixtiyoriy, lekin Tavsiya Etiladi): Yanada yaxshilangan tajriba uchun strelka tugmalari orqali navigatsiyani amalga oshirishni ko‘rib chiqing:
  • `Pastga Strelka`: Fokusni keyingi akkordeon sarlavhasiga o‘tkazish.
  • `Yuqoriga Strelka`: Fokusni oldingi akkordeon sarlavhasiga o‘tkazish.
  • `Home`: Fokusni birinchi akkordeon sarlavhasiga o‘tkazish.
  • `End`: Fokusni oxirgi akkordeon sarlavhasiga o‘tkazish.
  • `O‘ngga Strelka` (yoki `Enter`/`Probel`): Joriy akkordeon elementini kengaytirish/yig‘ish.
  • `Chapga Strelka` (yoki `Enter`/`Probel`): Joriy akkordeon elementini yig‘ish va fokusni sarlavhaga qaytarish.

4. Vizual Fokus Ko‘rsatkichlari

Akkordeon sarlavhasi klaviatura fokusini olganda, u aniq vizual ko‘rsatkichga ega bo‘lishi kerak. Brauzerning standart fokus konturlari ko‘pincha yetarli, ammo ularning CSS tomonidan olib tashlanmaganligiga ishonch hosil qiling (masalan, `outline: none;`), muqobil, yuqori darajada ko‘rinadigan fokus uslubini taqdim etmasdan.

Fokus uchun CSS misoli:

.accordion-button:focus {
  outline: 3px solid blue; /* Yoki kontrast talablariga javob beradigan rang */
  outline-offset: 2px;
}

5. Kontentning Ko‘rinishi va Taqdimoti

• Standart Holat: Akkordeon bo‘limlari sukut bo‘yicha yig‘ilgan yoki kengaytirilgan bo‘lishi kerakligini hal qiling. FAQlar yoki zich ma'lumotlar uchun yig‘ilgan holda boshlash ko‘pincha eng yaxshisidir. Navigatsiya yoki funksiyalar xulosalari uchun bitta bo‘limni sukut bo‘yicha kengaytirilgan holda saqlash foydali bo‘lishi mumkin.
• Vizual Belgilar: Bo‘limning kengaytirilgan yoki yig‘ilganligini ko‘rsatish uchun aniq vizual belgilardan foydalaning. Bu o‘z ko‘rinishini o‘zgartiradigan belgi (masalan, '+' yoki '-' belgisi, yuqoriga/pastga strelka) bo‘lishi mumkin. Ushbu belgilarning ham foydalanish mumkinligini ta'minlang (masalan, agar ularda matn bo‘lmasa, `aria-label` orqali).
• Kontrast Nisbatlari: Akkordeon ichidagi matn kontenti va almashtirish tugmalari WCAG kontrast nisbati talablariga (oddiy matn uchun 4.5:1, katta matn uchun 3:1) javob berishini ta'minlang. Bu ko‘rish qobiliyati past bo‘lgan foydalanuvchilar uchun juda muhimdir.
• Kontent Yo‘qolmasligi: Bo‘lim kengayganda, uning kontenti o‘z konteyneridan chiqib ketmasligi yoki boshqa muhim kontentni yopib qo‘ymasligini ta'minlang.

6. Almashtirish paytida Fokusni Boshqarish

Bu yanada ilg‘or jihat, lekin uzluksiz tajriba uchun juda muhim.

• Kengaytirish: Foydalanuvchi bo‘limni kengaytirganda, fokusni yangi ochilgan kontent ichidagi birinchi interaktiv elementga o‘tkazishni ko‘rib chiqing. Bu, ayniqsa, kengaytirilgan kontentda forma maydonlari yoki havolalar mavjud bo‘lsa muhim.
• Yig‘ish: Foydalanuvchi bo‘limni yig‘ganda, fokus almashtirilgan akkordeon sarlavhasiga qaytishi kerak. Bu foydalanuvchilarning avval yig‘ilgan bo‘limlar orqali orqaga qaytishiga hojat qoldirmaydi.

Fokusni boshqarishni amalga oshirish odatda fokusni ushlash va dasturiy ravishda o‘rnatish uchun JavaScriptni o‘z ichiga oladi.

Foydalanish Mumkin bo‘lgan Akkordeonlarni JavaScript bilan Amalga Oshirish

Semantik HTML va ARIA birinchi qadamlar bo‘lsa-da, dinamik almashtirishni va ehtimol fokusni boshqarishni amalga oshirish uchun ko‘pincha JavaScript talab qilinadi. Mana konseptual JavaScript yondashuvi:

// Akkordeon Funktsionalligi uchun Konseptual JavaScript

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';
      
      // aria-expanded holatini almashtirish
      button.setAttribute('aria-expanded', !isExpanded);

      // Kontent ko‘rinishini almashtirish (foydalanish imkoniyati uchun CSS yordamida)
      content.style.display = isExpanded ? 'none' : 'block'; // Yoki sinf almashtirgichidan foydalaning

      // Ixtiyoriy: Kengaytirishda fokusni boshqarish
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Ixtiyoriy: Klaviatura navigatsiyasi (strelka tugmalari va hk.) bu yerda ham amalga oshirilishi mumkin.
  // Masalan, 'keydown' hodisalarini boshqarish.
});

// Dastlabki sozlash: Sukut bo‘yicha kontentni yashirish va aria-expanded ni false ga o‘rnatish
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Kontentni dastlab yashirish
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

JavaScript uchun Muhim Mulohazalar:

• Yashirish uchun CSS: Kontentni yashirish uchun CSS (masalan, `display: none;` yoki silliq o‘tishlar uchun `height: 0; overflow: hidden;` o‘rnatadigan sinf) dan foydalanish eng yaxshi amaliyotdir. Bu kontent ko‘rinmayotganda foydalanish imkoniyati daraxtidan olib tashlanishini ta'minlaydi.
• Chiroyli Degradasya: JavaScript yuklanmasa yoki ishlamasa ham, akkordeon kontenti foydalanish mumkin bo‘lib qolishini ta'minlang (garchi yig‘iladigan bo‘lmasa ham). Semantik HTML hali ham qandaydir tuzilmani taqdim etishi kerak.
• Freymvorklar va Kutubxonalar: Agar JavaScript freymvorklari (React, Vue, Angular) yoki UI kutubxonalaridan foydalanayotgan bo‘lsangiz, ularning foydalanish imkoniyati bo‘yicha hujjatlarini tekshiring. Ko‘pchilik o‘z-o‘zidan yoki maxsus atributlar bilan foydalanish mumkin bo‘lgan akkordeon komponentlarini taqdim etadi.

Foydalanish Imkoniyatini Sinovdan O‘tkazish

Akkordeon vidjetlaringiz haqiqatan ham foydalanish mumkin ekanligiga ishonch hosil qilish uchun sinchkovlik bilan sinovdan o‘tkazish juda muhimdir.

• Avtomatlashtirilgan Vositalar: Umumiy foydalanish imkoniyati muammolarini aniqlash uchun brauzer kengaytmalaridan (Axe, WAVE kabi) yoki onlayn tekshiruvchilardan foydalaning.
• Klaviatura bilan Sinov: Akkordeonni faqat klaviatura yordamida (Tab, Shift+Tab, Enter, Probel, Strelka tugmalari) boshqaring va ishlating. Barcha interaktiv elementlarga yetib borish va ularni ishlatish mumkinligini ta'minlang.
• Ekran O‘quvchisi bilan Sinov: Mashhur ekran o‘quvchilari (NVDA, JAWS, VoiceOver) bilan sinab ko‘ring. Akkordeonning tuzilishi va holati o‘zgarishlari qanday e'lon qilinishini tinglang. Bu mantiqiymi? `aria-expanded` holati to‘g‘ri yetkazilayaptimi?
• Foydalanuvchi bilan Sinov: Agar iloji bo‘lsa, sinov jarayoniga nogironligi bo‘lgan foydalanuvchilarni jalb qiling. Ularning fikr-mulohazalari real dunyodagi foydalanish muammolarini aniqlash uchun bebahodir.
• Brauzer va Qurilma Sinovi: Turli brauzerlar va qurilmalarda sinab ko‘ring, chunki renderlash va JavaScript xatti-harakatlari farq qilishi mumkin.

Global Perspektivalar va Mahalliylashtirish

Global auditoriya uchun loyihalashda quyidagi omillarni hisobga oling:

• Til: Barcha matnlar, jumladan, tugma yorliqlari va kontent aniq, qisqa va oson tarjima qilinadigan bo‘lishini ta'minlang. Idiomalar yoki madaniy xususiyatlarga ega havolalardan saqlaning.
• Kontent Uzunligi: Kontentning kengayishi sahifa tartibiga sezilarli darajada ta'sir qilishi mumkin. Tarjima qilingan kontent asl nusxadan uzunroq yoki qisqaroq bo‘lishi mumkinligini yodda tuting. Akkordeoningiz turli kontent uzunliklarini qanday boshqarishini sinab ko‘ring.
• Madaniy UI An'analari: Akkordeonlarning asosiy funksionalligi universal bo‘lsa-da, nozik dizayn elementlari turli madaniyatlarda turlicha qabul qilinishi mumkin. O‘rnatilgan naqshlar va aniq affordanslarga sodiq qoling.
• Ishlash: Internet aloqasi sekinroq bo‘lgan hududlardagi foydalanuvchilar uchun JavaScriptingiz optimallashtirilganligini va akkordeonlar ichidagi kontentning sahifaning dastlabki yuklanish vaqtiga haddan tashqari ta'sir qilmasligini ta'minlang.

Foydalanish Mumkin bo‘lgan Akkordeonlar Misollari

Ko‘pgina nufuzli tashkilotlar foydalanish mumkin bo‘lgan akkordeon naqshlarini namoyish etadi:

• GOV.UK Dizayn Tizimi: Foydalanish imkoniyatiga sodiqligi bilan tez-tez tilga olinadigan GOV.UK, WCAGga mos keladigan akkordeonlar kabi yaxshi hujjatlashtirilgan komponentlarni taqdim etadi.
• MDN Web Docs: Mozilla Developer Network ARIA dan foydalanishning aniq tushuntirishlari bilan akkordeonlar kabi foydalanish mumkin bo‘lgan vidjetlarni yaratish bo‘yicha batafsil qo‘llanmalar va misollarni taklif etadi.
• Yirik Texnologiya Kompaniyalarining Dizayn Tizimlari: Google (Material Design), Microsoft (Fluent UI) va Apple kabi kompaniyalar ko‘pincha foydalanish imkoniyatiga ustuvor ahamiyat beradigan dizayn tizimi komponentlarini taqdim etadi. Bularga murojaat qilish mustahkam amalga oshirish naqshlarini taklif qilishi mumkin.

Xulosa

Akkordeon vidjetlari kontentni tashkil qilish va foydalanuvchi tajribasini oshirish uchun kuchli vositalardir. Biroq, ularning dinamik tabiati foydalanish imkoniyatiga vijdonan yondashishni talab qiladi. WCAG yo‘riqnomalariga rioya qilish, semantik HTMLdan foydalanish, ARIA'ni to‘g‘ri amalga oshirish, mustahkam klaviatura navigatsiyasini ta'minlash va sinchkovlik bilan sinovdan o‘tkazish orqali siz butun dunyo bo‘ylab barcha uchun foydali va qulay bo‘lgan akkordeon komponentlarini yaratishingiz mumkin. Boshidanoq foydalanish imkoniyatiga ustuvorlik berish nafaqat muvofiqlikni ta'minlaydi, balki barcha uchun yanada inklyuziv va foydalanuvchilar uchun qulay mahsulotga olib keladi.

Yodda tuting, foydalanish mumkin bo‘lgan dizayn keyin o‘ylanadigan narsa emas; u yaxshi dizaynning ajralmas qismidir. Foydalanish mumkin bo‘lgan akkordeon vidjetlarini amalga oshirishni o‘zlashtirib, siz barcha foydalanuvchilar uchun yanada adolatli va foydali veb-sayt yaratishga hissa qo‘shasiz.