Bu tabindexözellik, bir sayfadaki odaklanılabilir öğeler (tipik olarak bağlantılar ve form kontrolleri) için gezinme sırasını açıkça tanımlar. Öğelerin odaklanabilir olup olmayacağını tanımlamak için de kullanılabilir.
[Her ikisi] tabindex="0"ve tabindex="-1"özel bir anlama sahiptir ve HTML'de farklı işlevler sağlar. Değeri 0, öğenin varsayılan gezinme sırasına yerleştirilmesi gerektiğini belirtir. Bu doğal olarak odaklanamazlar elemanları (örneğin verir <div>, <span>ve <p>klavye odağı alacak). Elbette, genel olarak tüm etkileşimli öğeler için bağlantılar ve form kontrolleri kullanılmalıdır, ancak bu, diğer öğelerin odaklanılmasına ve etkileşimi tetiklemesine izin verir.
Bir tabindex="-1"değer , öğeyi varsayılan gezinme akışından kaldırır (yani, bir kullanıcı sekme yapamaz), ancak programatik odak almasına izin verir , yani odak ona bir bağlantıdan veya komut dosyasıyla ayarlanabilir. ** Bu çok olabilir sekmeye alınmaması gereken, ancak odaklamanın onlara ayarlanması gerekebilecek öğeler için kullanışlıdır .
İyi bir örnek, kalıcı bir iletişim penceresidir - açıldığında, odak iletişim kutusuna ayarlanmalıdır, böylece bir ekran okuyucusu okumaya başlayacak ve klavye iletişim kutusu içinde gezinmeye başlayacaktır . Diyalog (muhtemelen sadece bir <div>öğe) varsayılan olarak tabindex="-1"odaklanılamadığından , bunun atanması , sunulduğunda komut dosyası ile odağın ona ayarlanmasına izin verir.
Bir değeri , sekme tuşuyla widget içindeki yalnızca bir öğenin gezilebilir olmasını sağlamak -1için ok tuşlarını veya diğer kısayol tuşlarını kullanan karmaşık widget'larda ve menülerde de yararlı olabilir , ancak yine de widget içindeki diğer bileşenlere odaklanmaya izin verir.
Kaynak: http://webaim.org/techniques/keyboard/tabindex
Bu nedenle tabindex="-1", kipte ihtiyacınız vardır <div>, böylece kullanıcılar genel fare ve klavye kısayollarına erişebilir. Umarım yardımcı olur.