Klavye odağı

Birçok kullanıcı, birincil gezinme aracı olarak klavye veya klavyenin işlevini taklit eden yazılım ya da donanım (ör. anahtar cihaz) kullanır. Bu durum kişisel tercih, verimlilik veya bozuk donanımdan kaynaklanabilir.

Bileği burkulma veya karpal tünel gibi ince motor becerileriyle ilgili engeller gibi geçici fiziksel sınırlamalara sahip kullanıcılar gezinmek için klavye kullanmayı tercih edebilir. Görme bozukluğu olan veya görme engelli kullanıcılar, yakınlaştırma veya ekran okuyucu yazılımlarıyla birlikte klavye kullanarak gezinebilir. Ancak ekranda gezinmek için görme engeli olmayan bir kullanıcıdan farklı klavye kısayol komutları kullanabilirler.

Engelli olmayan bazı kullanıcılar da klavye kullanarak gezinmeyi tercih edebilir.

Bu engellerin ve koşulların tümünde klavye desteği çok önemlidir. Klavye erişilebilirliğinin büyük bir kısmı odağa odaklanır. Odak, ekranda klavyeden etkin bir şekilde giriş alan öğeyi ifade eder.

Bu modülde, klavye ve odaklanılabilir öğeler için HTML yapısına ve CSS stiline odaklanıyoruz. JavaScript modülü, etkileşimli öğeler için odak yönetimi ve tuş vuruşları hakkında daha fazla bilgi içerir.

Odak sırası

Klavye kullanıcısının gidebileceği öğelere odaklanılabilir öğeler denir. Sekme veya gezinme sırası olarak da adlandırılan odak sırası, öğelerin odaklanacağı sıradır. Varsayılan odak sırası mantıklı, sezgisel olmalı ve sayfanın görsel sırasıyla eşleşmelidir.

Çoğu dilde, odak sırası sayfanın üst kısmından başlar ve soldan sağa doğru ilerleyerek alt kısımda sona erer. Ancak bazı diller sağdan sola okunur. Bu nedenle, sayfanın birincil dili farklı bir odaklanma sırası gerektirebilir.

Odak sırası varsayılan olarak bağlantılar, onay kutuları ve metin girişleri gibi doğal olarak odaklanılabilir HTML öğelerini içerir. Doğal olarak odaklanılabilir HTML öğeleri arasında yerleşik sekme sırası desteği ve temel klavye etkinliği işleme yer alır.

Odak sırasını, normalde odaklanmayan öğeleri (ör. etkileşimli olmayan HTML öğeleri, özel bileşenler veya ARIA içeren öğeler) içerecek şekilde güncelleyebilir ve doğal odak anlamlarını geçersiz kılabilirsiniz.

Sekme dizini

Odak sırası, pozitif tabindex özelliğine sahip öğelerle (varsa) başlar ve en küçük pozitif sayıdan en büyüğe doğru ilerler (ör. 1, 2, 3). Ardından, DOM'daki sıralarına göre sekme dizini sıfır olan öğelere geçer. Negatif tabindex değerine sahip tüm öğeler doğal odaklanma sırasından kaldırılır.

Normalde odaklanamayan öğelere sıfır (tabindex="0") tabindex değeri uygulandığında, bu öğeler DOM'de göründükleri şekilde sayfanın doğal odaklanma sırasına eklenir. Ancak doğal olarak odaklanılabilir HTML öğelerinin aksine, bu öğelerin tam olarak erişilebilir olması için ek klavye desteği sağlamanız gerekir.

Benzer şekilde, normalde odaklanılabilir ancak etkin olmayan bir öğeniz varsa (ör. bir giriş alanı doldurulana kadar çalışmayan bir düğme) bu öğeye negatif bir sekme dizini (tabindex="-1") eklemeniz gerekir. Negatif bir sekme dizini eklemek, yardımcı teknolojilere ve klavyelere bu düğmenin doğal odak sırasından kaldırılması gerektiğini bildirir. Ancak endişelenmeyin. Gerektiğinde odak noktasını öğeye geri eklemek için JavaScript'i kullanabilirsiniz.

Bu örnekte, doğal olarak odaklanmayan öğelere tabindex özelliği eklenmiştir. Odak sırası üzerinde sahip olabileceği gücü göstermek için öğelerin sırası tabindex kullanılarak değiştirildi. Bu, yapılmaması gerekenlere dair bir örnektir.

Atlama bağlantıları

Günümüzde çoğu web sitesi, sayfanın ana başlığında sayfadan sayfaya tutarlı olan uzun bir menü bağlantıları listesine sahiptir. Bu, genel gezinme için mükemmel olsa da yalnızca klavye kullanan kullanıcıların sekme tuşuna birden fazla kez basmadan web sitesinin ana içeriğine kolayca ulaşmasını zorlaştırabilir.

Gereksiz veya işe yaramayan bağlantı gruplarını atlamanın bir yolu atlama bağlantısı eklemektir. Atlama bağlantıları, kullanıcıyı web sitesindeki başka bir sayfaya veya harici bir kaynağa göndermek yerine, ilgili bölümün kimliğini kullanarak aynı sayfanın farklı bir bölümüne atlayan ana bağlantılardır. Atlama bağlantıları genellikle bir kullanıcının bir web sitesine geldiğinde karşılaşacağı ilk odaklanılabilir öğe olarak eklenir ve tasarıma bağlı olarak, kullanıcı sekme tuşuyla bu öğeye gelene kadar görünür veya görsel olarak gizlenebilir.

Kullanıcı Sekme tuşuna bastığında ve etkin bir atlama bağlantısı varsa klavye odağını atlama bağlantısına gönderir. Kullanıcı, atlama bağlantısını tıklayarak başlık bölümünü ve ana gezinme menüsünü atlayabilir. Kullanıcı atlama bağlantısını tıklamamayı seçip DOM'da Sekme tuşuna basarak aşağı devam ederse bir sonraki odaklanılabilir öğeye yönlendirilir.

Tüm bağlantılar gibi atlama bağlantısının da bağlantının amacıyla ilgili bağlam bilgisi içermesi önemlidir. "Ana içeriğe atla" ifadesini eklemek, kullanıcının bağlantıyı tıkladığında nereye yönlendirileceğini bilmesini sağlar. Bağlantılarınıza ek bağlam sağlarken aria-labelledby, aria-label gibi birçok kod seçeneğinden yararlanabilir veya örneğin gösterildiği gibi <a> öğesinin metin içeriğine bağlam ekleyebilirsiniz.

Odak göstergesi

Az önce öğrendiğiniz gibi, odak sırası, klavye erişilebilirliğinin önemli bir yönüdür. Bu odağın nasıl biçimlendirileceğine karar vermek de önemlidir. Çünkü odaklanma sırası mükemmel olsa bile kullanıcı, uygun stil olmadan sayfanın neresinde olduğunu nasıl bilebilir?

Görünür bir odak göstergesi, kullanıcıları sayfanın neresinde oldukları konusunda her zaman bilgilendirmek açısından çok önemlidir. Bu, özellikle görme engelli ve yalnızca klavye kullanan kullanıcılarınız için önemlidir. Odak Gizlenmiyor (Minimum), odak göstergesinin diğer bileşenlerin altında gizlenmemesini sağlar.

Tarayıcı varsayılan stili

Günümüzde her modern web tarayıcısının, web sitenizdeki veya uygulamanızdaki odaklanılabilir öğelere uygulanan farklı bir varsayılan görsel stili vardır. Bu stiller, bazı öğelerin diğerlerinden daha iyi görünmesini sağlar. Kullanıcı sayfayı sekme tuşuyla gezerken, öğe klavye odağına alındığında bu stil uygulanır.

Tarayıcının, odak stilini işlemesine izin verirseniz temanızın tarayıcının varsayılan stilini geçersiz kılmayacağını onaylamak için kodunuzu incelemeniz önemlidir. Geçersiz kılma, stil sayfanızda genellikle "outline: 0" veya "outline: none" olarak yazılır. Bu küçük kod parçası, tarayıcının varsayılan odak göstergesi stilini kaldırabilir. Bu da kullanıcıların web sitenizde veya uygulamanızda gezinmesini çok zorlaştırır.

Önerilmez: Anahat yok

a:focus {
  outline: none; /* don't do this! */
}

Önerilen: stilize dış çizgi

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Özel stiller

Elbette varsayılan tarayıcı stilinin ötesine geçerek temanızı tamamlayan özel bir odak göstergesi de oluşturabilirsiniz. Özel bir odak göstergesi oluştururken yaratıcılığınızı konuşturabilirsiniz.

Odak göstergeç şekli, klavyenin o öğede etkin olduğunu belirtmek için yalnızca renge dayanmayan bir dış çizgi, kenar, alt çizgi, kutu, arka plan değişikliği veya başka bir belirgin stil değişikliği gibi birçok biçimde olabilir.

Odak göstergesinin görülebilmesi için stilini değiştirebilirsiniz. Örneğin, bir sayfanın arka planı beyazsa düğme odak göstergesini mavi arka plana ayarlayabilirsiniz. Sayfanın arka planı mavi olduğunda, aynı düğme odak stilini beyaz arka plana ayarlayabilirsiniz.

Odak öğesi stilini öğe türüne göre değiştirebilirsiniz. Örneğin, gövde bağlantıları için noktalı alt çizgi kullanabilir, ancak düğme öğesi için yuvarlak kenarlıklı bir stil seçebilirsiniz.

Bir sayfada kaç tane odak göstergesi stili kullanabileceğinizle ilgili bir kural yoktur ancak gereksiz karışıklığı önlemek için bu sayıyı makul bir düzeyde tuttuğunuzdan emin olun.

Öğrendiklerinizi test etme

Odak hakkındaki bilginizi test edin.