Bootstrap'da ilginç sorun | Cevap #7859

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?

@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.