Interactive controls are keyboard focusable Hatası

Google PageSpeed’te karşılaşılan “Interactive controls are keyboard focusable” ifadesi nedir, bununla ilgili sorun nasıl düzeltilir? Google PageSpeed Insights’ta karşılaşılan “Interactive controls are keyboard focusable” uyarısı, web sayfanızdaki etkileşimli öğelerin (örneğin, butonlar, form alanları, bağlantılar) klavye ile odaklanabilir olması gerektiğini belirten bir erişilebilirlik önerisidir.

Ne Demek:

Interactive controls are keyboard focusable uyarısı sayfanızda etkileşimli öğelerin klavye ile odaklanabilir olmasının, erişilebilirlik açısından önemli olduğunu vurgular. Yani, kullanıcıların fare kullanmadan yalnızca klavye ile gezinmesi gerektiğinde, bu öğelerin doğru şekilde odaklanabilir olması gerekir. Bu, özellikle engelli kullanıcılar için önemlidir. Klavye odaklanabilirlik, erişilebilirlik standardı olan WCAG‘nin (Web Content Accessibility Guidelines) bir parçasıdır.

Neden Önemlidir?

• Erişilebilirlik: Sayfanızda klavye ile odaklanabilen öğeler, görme engelli kullanıcıların ekran okuyucularla etkileşime girmesine yardımcı olur.
• Kullanıcı Deneyimi: Klavye ile odaklanabilir öğeler, yalnızca fare kullanabilen değil, tüm kullanıcılar için sayfanın navigasyonunu kolaylaştırır.

Sorunun Çözülmesi:

Bu sorunu çözmek için, etkileşimli öğelerin doğru HTML etiketleri ile tanımlandığından ve erişilebilirlik açısından doğru şekilde yapılandırıldığından emin olmanız gerekir.

1. HTML Etiketlerinin Kullanılması:

Etkileşimli öğeler için doğru HTML etiketlerini kullanmak önemlidir. Örneğin:

• <button> etiketi, bir buton için doğru etikettir.
• <a href=”#”> etiketi, bir bağlantı için doğru etikettir.

Bu etiketler, otomatik olarak klavye ile odaklanabilir hale gelir.

2. Tabindex Kullanımı:

Bir öğenin klavye ile odaklanabilir olmasını sağlamak için tabindex özelliğini kullanabilirsiniz. Ancak, genellikle bu özellik doğal HTML öğeleri için yeterlidir. tabindex="0" değeri, öğeyi standart sekme sırasına dahil eder. tabindex="-1" ise öğenin klavye odaklanmasını engeller.

<button tabindex="0">Etkileşimli Buton</button>

3. Etkileşimli Öğelerin Doğru Kullanımı:

Klavye odaklanabilirlik ve erişilebilirlik açısından, sadece görsel öğelerin değil, etkileşimli öğelerin de doğru şekilde tanımlanmış olması gerekir. Örneğin, özel stil ve işlevsellik eklediğiniz öğeler için role ve aria-* etiketlerini kullanabilirsiniz.

<div role="button" tabindex="0" aria-label="Kapat">X</div>

4. JavaScript İle Odak Yönetimi:

Eğer JavaScript ile dinamik olarak etkileşimli öğeler ekliyorsanız, bu öğelerin de klavye odaklanabilir olmasını sağlamalısınız. Bunun için, JavaScript ile tabindex ekleyebilirsiniz.

document.getElementById("myElement").setAttribute("tabindex", "0");

5. Erişilebilirlik Testi Yapma:

Bu tür sorunları tespit etmek için erişilebilirlik test araçları kullanabilirsiniz. Google Lighthouse veya WAVE gibi araçlarla sayfanızdaki etkileşimli öğelerin klavye ile odaklanabilir olup olmadığını kontrol edebilirsiniz.

“Interactive controls are keyboard focusable” uyarısını düzeltmek için, etkileşimli öğelerinizi doğru HTML etiketleriyle tanımladığınızdan ve gerektiğinde tabindex ve aria-* etiketlerini kullanarak klavye ile odaklanabilir hale getirdiğinizden emin olmalısınız. Bu sayede hem erişilebilirliği artırabilir hem de kullanıcı deneyimini iyileştirebilirsiniz.