Bootstrap'da ilginç sorun
Merhaba arkadaşlar. Bootstrap'da bir sebepten dolayı dropdown'ları, modalları açmak için javaScript kullanıyorum. Aşağıdaki koda bakın:
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-primary" aria-expanded="false"
id="menuAc">Menü</button>
<div class="dropdown-menu" id="siteMenusu">
<ul>
<li><a href="/denemeler.php">Ana Sayfa</a></li>
<li><a href="?sayfa=hakkimda">Hakkımda</a></li>
<li><a href="?sayfa=iletisim">İletişim</a></li>
</ul>
</div>
</div>
Ben bu belgeyi çalıştırdığımda menü düğmesine birinci tıklamamda menü açılmazken, ikinci tıklamamda menü açılıp kapanabiliyor. Bu ilginç sorunu nasıl düzeltebilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
@makifgokce dostum çok çok yeni gördüm fakat yanlış bildiğin bir şeyi düzelteyim. Aria-labelledby, aria-label öz niteliği kullanılmadan etiket oluşturmana yarar. Yani aria-labelledby niteliğinin içine yazdığın id'de hangi metin varsa ögenin etiketi o olur. Aria-label ve aria-labelledby etiketleri de ekran okuyuculara buton ile alakalı bilgi vermeyi sağlar. Bunun ile alakalı çok kapsamlı makaleler var, araştırabilirsin. Örneğin bir kapat düğmesine x yazarsın ve ekran okuyucunun kullanıcıya daha iyi aktarabilmesi için <button id="kapat" aria-label="kapat">x</button> yazarsın ve erişilebilirliğini sağlamış olursun. Bootstrap da insanlar erişilebilirliğe dikkat etsin diye bunu koyuyor, normalde zorunlu falan değil.
Eğer bootstrap 5 kullanıyorsan data-toggle gibi attributeleri data-bs-toggle şeklinde adlandırmalısın.
Ek olarak açılacak olan div'e aria-labelledby="menuAc" button'un idsini vermelisin.
<div class="dropdown-menu" aria-labelledby="menuAc" id="siteMenusu">
https://getbootstrap.com/docs/5.0/components/dropdowns/#single-button